Use blog intro field on blog index, detail; blog bylines, avatars

- Resolves #60

bakerydemo/blog/models.py

@@ -118,7 +118,7 @@ class BlogIndexPage(BasePageFieldsMixin, RoutablePageMixin, Page):
         context = super(BlogIndexPage, self).get_context(request)
         context['blogs'] = BlogPage.objects.descendant_of(
             self).live().order_by(
-            '-first_published_at')
+            '-date_published')
         return context
 
     @route('^tags/$', name='tag_archive')

bakerydemo/static/css/main.css

@@ -504,7 +504,7 @@ li.has-submenu a.allow-toggle {
   color: #ccc;
   font-family: 'Lato', sans-serif;
   font-size: 14px;
-  margin-bottom: 0px; 
+  margin-bottom: 0px;
   padding-left: 0px;
 }
 .breadcrumb a, .breadcrumb .active {
@@ -591,6 +591,20 @@ time.location-time {
   z-index: 1;
 }
 
+/* Blog styles */
+
+.blog-byline {
+    margin-top: -40px;
+    margin-bottom: 20px;
+}
+.blog-avatar {
+    width: unset;
+    display: inline;
+}
+.blog-avatars {
+    margin-bottom: 20px;
+}
+
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;
@@ -601,4 +615,3 @@ time.location-time {
   padding-right: 0;
   padding-left: 0;
 }
-

bakerydemo/templates/blog/blog_index_page.html

@@ -13,7 +13,12 @@
                 {% for blog in blogs %}
                     <div>
                         <h2><a href="{{ blog.url }}">{{ blog.title }}</a></h2>
-                        {{ blog.body|truncatewords_html:10 }}
+                        <div class="small">{{ blog.date_published }} by
+                            {% for author in blog.authors %}
+                                {{ author }}{% if not forloop.last %}, {% endif %}
+                            {% endfor %}
+                        </div>
+                        {{ blog.introduction }}
                     </div>
                 {% endfor %}
             </div>

bakerydemo/templates/blog/blog_page.html

@@ -2,6 +2,7 @@
 {% load navigation_tags wagtailimages_tags %}
 
 {% block content %}
+
 {% image self.image fill-1920x600 as hero_img %}
 <div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
 <div class="hero-gradient-mask"></div>
@@ -22,6 +23,19 @@
                 <p class="intro">{{ page.introduction }}</p>
             {% endif %}
 
+            {# TODO These two loops could be consolidated into one, with styling #}
+            <div class="blog-byline">
+            {{ page.date_published }} by {% for author in page.authors %}
+                {{ author }}{% if not forloop.last %}, {% endif %}
+            {% endfor %}
+            </div>
+
+            <div class="blog-avatars">
+                {% for author in page.authors %}
+                    {% image author.image width-100 class="blog-avatar" %}
+                {% endfor %}
+            </div>
+
             {{ page.body }}
 
             {% if page.get_tags %}