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,23 +9,25 @@
 <section class="mw7 center">
   <h1 class="ph3 ph0-l">{{ page.title }}</h1>
 
-  {% for post in page.get_children %}
-  <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>
-        </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"
-               alt="Photo of a dimly lit room with a computer interface terminal.">
-        </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>
-    </a>
-  </article>
+  {% 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.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"
+                   alt="Photo of a dimly lit room with a computer interface terminal.">
+            </div>
+          </div>
+          <p class="f6 lh-copy gray mv0">By <span class="ttu">{{ post.owner }}</span></p>
+          <time class="f6 db gray">{{ post.date|date }}</time>
+        </a>
+      </article>
+    {% endwith %}
   {% endfor %}
 
 </section>