skip to Main Content

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.

Image of what I want but need to know how to achieve in django templates

2

Answers


  1. You more or less have it already …

    <section class="container">
        <h2 class="text-center">{{ self.title }}</h2>
        <div class="general-alumnae-deck">
            <ul>
            {% for member in self.general_member_cards %}
                <li>
                {% if member.photo %}
                    {% image member.photo fill-50x50 as avatar %}
                    <img src="{{ avatar.url }} class='avatar">&nbsp;
                {% endif %}
                <h3 style="display:inline;">{{ member.name }}</h3>
                </li>
            {% endfor %}
            </ul>
        </div>
    </section>
    

    You said you wanted image next to the <h3>, so you need to override the display: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

    Login or Signup to reply.
  2. 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#

    {% with self.general_member_cards as cards %}
    {% if cards %}
        <ul>
            {% for member in cards %}
                <li>
                    {% if member.photo %}
                        {% image member.photo fill-80x80 %}
                    {% endif %}
                    <h3>{{ member.name }}</h3>
                </li>
            {% endfor %}
        <ul>
    {% endif %}
    

    I have also used a {% with %} tag to cache self.general_member_cards in the template, in case this requires a database query. If it does not, you can skip that step.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search