CODEWITHSUNDEEP
htmlcssdjangodjango-templateswagtail
Juan Monster
Juan Monster

Reputation: 27

I need to write an if statement for adding an image next to an h1 tag in an unordered list, if the image exists

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

Upvotes: 0

Views: 112

Answers (2)

Rich - enzedonline
Rich - enzedonline

Reputation: 1258

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

Upvotes: 1

nimasmi
nimasmi

Reputation: 4138

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.

Upvotes: 2

Related Questions