How to display the children of a wagtail page

Question

My requirement sounds simple, but I am struggling to make it work

In my wagtail project I have a BlogListingPage which has many child pages. I am trying to create a list of the children in a web page. Here is my code:

models.py

class BlogListingPage(Page):    
    ...
    def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)
        context['blog_pages'] = BlogDetailPage.objects.live().child_of(self)
        return context


class BlogDetailPage(Page):
    ...    
    blog_listing = models.ForeignKey(BlogListingPage,
                                     on_delete=models.PROTECT,
                                     blank=True,
                                     null=True,)

views.py

def blog(request):
    url = 'blog/blog_listing_page.html'
    context = {'data': BlogListingPage.objects.all()}
    return render(request, url, context)

blog_listing_page.html

{% block content %}
    {% for blog_listing in data %}
        {% for post in blog_listing.blogdetailpage %}
            <a href="{% pageurl post %}">{{ post.blog_title }}</a>
        {% endfor %}
    {% endfor %}
{% endblock content %}

I am lost in the fog of the django/wagtail pages/objects/querysets/all()/specific

Can someone please lead me to clear blue water?

Answer 1

A couple of suggestions regarding your approach:

1. Having a foreign key from BlogDetailPage to BlogListingPage is not the Wagtail way to organise parent-child relationships. All Page objects already have a tree hierarchy and you should rely on that, otherwise you lose all the built-in tree handling provided by Wagtail.

   You should use the parent/subpage rules to specify how page types can be related to each other. In you case it would look something like:

   class BlogListingPage(Page):    
       subpage_types = ['myapp.BlogDetailPage']
   
   class BlogDetailPage(Page):
       parent_page_types = ['myapp.BlogListingPage']
   

2. The get_context() method on BlogListingPage only runs when Wagtail is serving that specific page in a view. It doesn't run when you're iterating over these pages in your blog view. In order to access the children there, you need to do something like this:

   {% for blog_listing in data %}
       {% for post in blog_listing.get_children.live %}
           <a href="{% pageurl post %}">{{ post.blog_title }}</a>
       {% endfor %}
   {% endfor %}
   

   i.e., you need to use the get_children() method on the page to obtain it's children. live() further filters this to exclude unpublished pages. Note that this will only work if the blog posts are children (in the Wagtail page tree sense) of the listing page. specific() isn't important here if you're only using the post URL and title - it is relevant if you want to display fields that are part of your model rather than the base Page model.