Мне нужно написать оператор 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», если существует фотография, конечно, изображение будет {{}} заключено в двойные скобки для динамического шаблона.
Как мне сделать это, если у меня нет изображения, то ничего не появляется, но если у меня есть изображение, оно появляется рядом с тегом h?
В вашем «шаблоне на данный момент» и «как я хочу, чтобы код выглядел» используется совершенно разная HTML-разметка, поэтому мы не можем знать, с каким именно битом у вас возникла проблема.
Ответы 2
У вас это более-менее уже есть...
<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">
{% endif %}
<h3 style = "display:inline;">{{ member.name }}</h3>
</li>
{% endfor %}
</ul>
</div>
</section>
Вы сказали, что вам нужно изображение рядом с <h3>, поэтому вам нужно переопределить свойство display:block тега h3 и сделать его встроенным, как указано выше (или создать для этого класс css).
Обновлено: Обновлено, чтобы использовать тег шаблона изображения трясогузки, чтобы получить представление фотографии участника.
Неясно, взято ли изображение из библиотеки изображений трясогузки, но если это так, вы должны использовать тег {% 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 в шаблоне на случай, если для этого потребуется запрос к базе данных. Если это не так, вы можете пропустить этот шаг.
На какой вопрос вы пытаетесь получить ответ?