Corrected sort order and published status on blog index

services/cms/blog/models.py

@@ -5,6 +5,7 @@ from wagtail.core.fields import RichTextField
 from wagtail.admin.edit_handlers import FieldPanel
 from wagtail.search import index
 
+
 class BlogIndexPage(Page):
     intro = RichTextField(blank=True)
 
@@ -12,6 +13,16 @@ class BlogIndexPage(Page):
         FieldPanel('intro', classname="full")
     ]
 
+    def get_context(self, request, *args, **kwargs):
+        """
+        Overrides the default context to include only published pages, ordered by reverse chronological order.
+        These child pages can be accessed in the template using `blogpages` instead of page.get_children.
+        """
+        context = super().get_context(request)
+        blogpages = self.get_children().live().order_by("-first_published_at")
+        context["blogpages"] = blogpages
+        return context
+
 
 class BlogPage(Page):
     date = models.DateField("Post date")

services/cms/blog/templates/blog/blog_index_page.html

@@ -9,13 +9,14 @@
 <section class="mw7 center">
   <h1 class="ph3 ph0-l">{{ page.title }}</h1>
 
-  {% for post in page.get_children %}
+  {% for post in blogpages %}
+    {% with post=post.specific %}
       <article class="pv4 bt bb b--black-10 ph3 ph0-l">
         <a class="db pv4 ph3 ph0-l no-underline black dim" href="{% pageurl post %}" >
           <div class="flex flex-column flex-row-ns">
             <div class="w-100 w-60-ns pr3-ns order-2 order-1-ns">
               <h1 class="f3 mt0 lh-title">{{ post.title }}</h1>
-          <p class="f5 f4-l lh-copy">{{ post.specific.intro }}</p>
+              <p class="f5 f4-l lh-copy">{{ post.intro }}</p>
             </div>
             <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
               <img src="http://mrmrs.github.io/photos/cpu.jpg" class="db"
@@ -23,9 +24,10 @@
             </div>
           </div>
           <p class="f6 lh-copy gray mv0">By <span class="ttu">{{ post.owner }}</span></p>
-      <time class="f6 db gray">{{ post.specific.date|date }}</time>
+          <time class="f6 db gray">{{ post.date|date }}</time>
         </a>
       </article>
+    {% endwith %}
   {% endfor %}
 
 </section>