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

JuanMonster
February 3, 2023
140 views
1 vote
2 Answers

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.

Answers

- RichardAllen
- February 3, 2023 at 6:10 pm
- 0 votes
0
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.

- nimasmi
- February 3, 2023 at 6:43 pm
- 0 votes
0
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.