In Wagtail CMS, I'm trying to create an index page that will display a list of all its child pages along with a featured image associated with each child page.
I have 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 template index_page.html, 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 %}
This displays all of the child page titles, but not the images. Is it possible to retrieve the image fields for the child pages?
From the release notes of wagtail version 1.1:
Usually, an operation that retrieves a queryset of pages (such as
homepage.get_children()
) will return them as basic Page instances, which only include the core page data such as title. Thespecific()
method (e.g.homepage.get_children().specific()
) now allows them to be retrieved as their most specific type, using the minimum number of queries.
Therefore you don't need your custom function in the upcoming release 1.1 anymore and you can change your template to:
{% for page in self.get_children.specific %}
{{ page.title }}
{% image page.representative_image width-400 %}
{% endfor %}
At least since version 0.8 the following should work, too, using specific
:
{% for page in self.get_children %}
{{ page.title }}
{% image page.specific.representative_image width-400 %}
{% endfor %}
I've found this solution: Add a function child_pages to the 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']
And this can be accessed in the template:
{% for page in self.child_pages %}
{{ page.title }}
{% image page.representative_image width-400 %}
{% endfor %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With