python 3.x - wagtail template page not rendering images

Question

I am new to Django and wagtail, I trying to build a project blog website with wagtail, Project listing page(project_listing_page.html) template is not showing images on my first wagtail site, I am trying to have thumbnails as the first image of project_page.htmlpage. please help...

thanks in advance...

Code details as below...

in models.py

from django.db import models
from modelcluster.fields import ParentalKey
from wagtail.core.models import Page, Orderable
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel, InlinePanel
from wagtail.images.edit_handlers import ImageChooserPanel
from wagtail.search import index


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


def main_image(self):
    gallery_item = self.gallery_images.first()
    if gallery_item:
        return gallery_item.image
    else:
        return None


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


class ProjectPage(Page):
    date = models.DateField("Post date")
    intro = models.CharField(max_length=250)
    body = RichTextField(blank=True)

    search_fields = Page.search_fields + [
        index.SearchField('intro'),
        index.SearchField('body'),
    ]

    content_panels = Page.content_panels + [
        FieldPanel('date'),
        FieldPanel('intro'),
        FieldPanel('body', classname="full"),
        InlinePanel('gallery_images', label="Gallery images"),
    ]


class ProjectPageGalleryImage(Orderable):
    page = ParentalKey(ProjectPage, on_delete=models.CASCADE, related_name='gallery_images')
    image = models.ForeignKey(
        'wagtailimages.Image', on_delete=models.CASCADE, related_name='+'
    )
    caption = models.CharField(blank=True, max_length=250)

    panels = [
        ImageChooserPanel('image'),
        FieldPanel('caption'),
    ]

in Project_index_page.html

{% extends "base.html" %}

{% load wagtailcore_tags %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %} template-projectindexpage {% endblock %}

{% block content %}



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

    <div class="content">
        {% image page.ProjectPageGalleryImage max 200x200 %}
                <img src="{{ ProjectPageGalleryImage.url }}" alt= "{{ProjectPageGalleryImage.alt}}">

        {% for post in page.get_children %}
            <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
            {{ post.specific.intro }}
            {{ post.specific.body|richtext }}
        {% endfor %}
    </div>
{% endblock %}

in project_page.html (project detail page template)

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-blogpage{% endblock %}

{% block content %}
    {% for item in page.gallery_images.all %}
        <div style="float: left; margin: 10px">
            {% image item.image fill-840x240 %}
            <p>{{ item.caption }}</p>
        </div>
    {% endfor %}

    <h1>{{ page.title }}</h1>
    <p class="meta">{{ page.date }}</p>

    <div class="intro">{{ page.intro }}</div>

    {{ page.body|richtext }}



    <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>

{% endblock %}

Answer 1

In your {% image %} tag, page.ProjectPageGalleryImage doesn't make sense because ProjectPageGalleryImage is a model class - it doesn't refer to a specific image.

Perhaps you intended to use page.main_image there? However, the code for that method is faulty too, because ProjectIndexPage doesn't have a self.gallery_images property - that's only defined on ProjectPage. If you want your index page to have a single image on it, then you'll have to write some valid logic to say which image that is - for example, 'retrieve the first image of the first child page of this section'.

Alternatively, maybe you wanted to show one image for each project page? If so, your main_image method should be defined on the ProjectPage model, and your image tag should be inside the {% for post in page.get_children %} loop.

Finally, a couple of errors to fix in the {% image %} tag:

• max 200x200 should be max-200x200
• Normally, the {% image %} tag will generate the <img src="..."> element itself, so you don't need that on your template. You only need to write your own <img> element if you're using the alternative {% image ... as myimage %} form.

Putting that together, you'll end up with:

<div class="content">
    {% for post in page.get_children %}
        {% image post.specific.main_image max-200x200 %}
        <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
        {{ post.specific.intro }}
        {{ post.specific.body|richtext }}
    {% endfor %}
</div>