Attached is the wagtail template I have written so far.
{% load wagtailimages_tags %}
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
{% for member in self.general_member_cards %}
{% if member.photo %}
{% endif %}
{% endfor %}
</div>
</section>
Ultimately I want the code to look like:
<h2>Avatar Images</h2>
<ul>
<li><img src="img_avatar.png" alt="Avatar" class="avatar"> <h3> Bleu </h3></li>
<li><img src="img_avatar2.png" alt="Avatar" class="avatar"> <h3> Red </h3></li>
</ul>
</body>
</html>
with the image popping up next to the "h3" tag if there exists a photo of course the image will be {{}} double bracketed for dynamic template.
2
Answers
You more or less have it already …
You said you wanted image next to the
<h3>
, so you need to override thedisplay:block
property of the h3 tag and make it inline as above (or create a css class for this).EDIT: Updated to use wagtail’s image template tag to get the rendition of the member photo
It’s not clear whether the image is from Wagtail’s image library, but if it is, you should use the
{% image %}
tag. See https://docs.wagtail.org/en/stable/topics/images.html#I have also used a
{% with %}
tag to cacheself.general_member_cards
in the template, in case this requires a database query. If it does not, you can skip that step.