Мне нужно написать оператор if для добавления изображения рядом с тегом h1 в неупорядоченном списке, если изображение существует

Прилагается шаблон трясогузки, который я написал на данный момент.

{% 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>

В конечном итоге я хочу, чтобы код выглядел как

<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>

при этом изображение появляется рядом с тегом "h3", если существует фотография, конечно, изображение будет {{}} в двойных скобках для динамического шаблона.

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

У вас это уже более или менее есть...

<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 %}
                <img src="{{ member.photo.url }} class='avatar">&nbsp;
            {% endif %}
            <h3 style="display:inline;">{{ member.name }}</h3>
            </li>
        {% endfor %}
        </ul>
    </div>
</section>

Вы сказали, что хотите, чтобы изображение было рядом с <h3>, поэтому вам нужно переопределить свойство display:block тега h3 и сделать его инлайн, как указано выше (или создать для этого css-класс).

Неясно, взято ли изображение из библиотеки изображений Wagtail, но если да, то следует использовать тег {% image %}. См. 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 %}

Я также использовал тег {% with %} для кэширования self.general_member_cards в шаблоне, на случай, если потребуется запрос к базе данных. Если этого не требуется, вы можете пропустить этот шаг.

Вернуться на верх