t-r.de/theme/templates/wide-cards.html

46 lines
1.6 KiB
HTML

{% extends "base.html" %}
{% block content_all%}
{% block content_header %}
<div class="extra-header">
<h1>{{ page.title }}</h1>
</div>
{% endblock content_header %}
{% block content_body %}
{# build list of pages where the slugs correspond to an entry in page.wide_cards; some hackiness required to keep the
original order #}
{% set wcards = [] %}
{% for wide_card in page.wide_cards %}
{% do wcards.append(pages | selectattr("slug", "==", wide_card) | list | first) if pages | selectattr("slug", "==",
wide_card) | list | first is defined %}
{% endfor %}
{# now we can finally iterate over the correct pages (max. 4 pages) #}
{% for wcard in wcards[:4] %}
<article class="wcard" style="flex-direction: {{ loop.cycle('row', 'row-reverse') }};">
<div class="wcard-title">
<h2><a href="{{ SITEURL }}/{{ wcard.slug | lower }}/" title="{{ wcard.summary | striptags }}">{{ wcard.title }}</a></h2>
</div>
<div class="wcard-gallery">
{% if wcard.card_images is defined %}
<div class="wcard-gallery-mask">
<ul>
{% for image in wcard.card_images %}
<li class="wcard-image" style="animation-delay: {{ loop.index0 * 5 }}s;">
<a href="{{ SITEURL }}/{{ image.link }}">
<img class="image-process-featured" src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {%- if image.y_offset is defined %} style="bottom: {{ image.y_offset }};" {% endif %} />
</a>
<div class="wcard-tooltip">
<p>{{ image.alt }}</p>
</div>
</li>
{% endfor %}
</div>
{% endif %}
</div>
</article>
{% endfor %}
{% endblock content_body %}
{% endblock content_all %}