Wagtail: display a list of child pages inside the parent page

Question

In Wagtail CMS, I am trying to create an index page that displays a list of all its child pages along with an image associated with each child page.

I created these two page models in models.py:

class IndexPage(Page):
    intro = RichTextField(blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('intro', classname='full'),
    ]

    subpage_types = ['myapp.ItemPage']


class ItemPage(Page):
    representative_image = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name='+'
    )

    body = RichTextField(blank=True)

    promote_panels = Page.promote_panels + [
        ImageChooserPanel('representative_image'),
    ]

    content_panels = Page.content_panels + [
        FieldPanel('body', classname='full'),
    ]

In the index_page.html template, I added the following code:

<div class="intro">{{ self.intro|richtext }}</div>

{% for page in self.get_children %}
  {{ page.title }}
  {% image page.representative_image width-400 %}
{% endfor %}

All subpage names are displayed here, but not images. Is it possible to get image fields for child pages?

Answer 1

From the release notes for wagtail version 1.1 :

, (, homepage.get_children()), , , . specific() (, homepage.get_children().specific()) , .

1.1, :

{% for page in self.get_children.specific %}
    {{ page.title }}
    {% image page.representative_image width-400 %}
{% endfor %}

, 0.8, : specific:

{% for page in self.get_children %}
    {{ page.title }}
    {% image page.specific.representative_image width-400 %}
{% endfor %}

Answer 2

: child_pages IndexPage:

class IndexPage(Page):
    intro = RichTextField(blank=True)

    def child_pages(self):
        return ItemPage.objects.live().child_of(self)

    content_panels = Page.content_panels + [
        FieldPanel('intro', classname='full'),
    ]

    subpage_types = ['myapp.ItemPage']

:

{% for page in self.child_pages %}
  {{ page.title }}
  {% image page.representative_image width-400 %}
{% endfor %}