Read child pages from DB

static/src/scss/_listing.scss

@@ -6,6 +6,10 @@
     align-items: center;
   }
 
+  p.image {
+    width: 100%;
+  }
+
   .media img {
     object-fit: cover;
     width: 100%;

website/common/models.py

@@ -1,6 +1,7 @@
 from typing import Any
 
 from django.db import models
+from django.http.request import HttpRequest
 from django.utils.functional import classproperty
 from wagtail.admin.panels import FieldPanel
 from wagtail.images import get_image_model_string
@@ -42,3 +43,10 @@ class ContentPage(BasePage, BaseContentMixin):  # type: ignore[misc]
 
 class ListingPage(BasePage, BaseContentMixin):  # type: ignore[misc]
     content_panels = BasePage.content_panels + BaseContentMixin.content_panels
+
+    def get_context(self, request: HttpRequest) -> dict:
+        context = super().get_context(request)
+        context["child_pages"] = (
+            self.get_children().live().specific().select_related("hero_image")
+        )
+        return context

website/common/templates/common/listing-item.html

@@ -1,13 +1,15 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
 <article class="media listing-item">
   <div class="columns">
     <figure class="media-left column is-3 image-column">
       <p class="image">
-        <img src="https://placekitten.com/g/600/300">
+        <img src="{% image_url page.hero_image 'width-300' %}">
       </p>
     </figure>
     <div class="media-content column">
       <div>
-        <h2 class="title is-3"><a href="#">Title</a></h2>
+        <h2 class="title is-3"><a href="{% pageurl page %}">{{ page.title }}</a></h2>
         <h3 class="subtitle is-6">2022-04-15 4 minutes <a>#programming</a> <a href="#security">#security</a> <a>#website</a></h3>
         {% lorem 1 p %}
       </div>

website/common/templates/common/listing_page.html

@@ -7,7 +7,7 @@
 {% include "common/hero.html" %}
 
 <div class="container">
-  {% for i in 9|range %}
+  {% for page in child_pages %}
     {% include "common/listing-item.html" %}
   {% endfor %}
 </div>