media-larlet-fr/theme/index.html.j2

{% extends "base.html.j2" %}

{% block title %}Photos & vidéos{% endblock %}

{% block extra_head %}
<!-- CanIHazMoreComplexityPlease? https://htmlhead.dev/ -->
<meta
    name="twitter:image" property="og:image" itemprop="image"
    content="https://media.larlet.fr/2021--paysages/jpg/15_660x440.jpg"
>
<link type="text/html" href="https://mastodon.social/@dav" rel="me" />
{% endblock %}

{% block container %}
<div class="galleries">
    {% for gallery in galleries -%}
        {% if not gallery.private %}
            <div class="gallery-cover">
                <a href="{{ gallery.cover_photo.page_url }}">
                    <picture>
                        <source
                            srcset="
                            {%- for size in sizes %}
                                {{ gallery.cover_photo.gallery_slug }}/webp/{{ gallery.cover_photo.name }}_{{ size.0 }}x{{ size.1 }}.webp {{ size.0 }}w{% if not loop.last%},{% endif %}
                            {%- endfor -%}
                            "
                            sizes="min((100vw - 2rem), 330px)"
                            type="image/webp">
                        <img
                            src="{{ gallery.cover_photo.gallery_slug }}/jpg/{{ gallery.cover_photo.name }}_{{ sizes.0.0 }}x{{ sizes.0.1 }}.jpg"
                            width="{{ gallery.cover_photo.width }}" height="{{ gallery.cover_photo.height }}"
                            srcset="
                            {%- for size in sizes %}
                                {{ gallery.cover_photo.gallery_slug }}/jpg/{{ gallery.cover_photo.name }}_{{ size.0 }}x{{ size.1 }}.jpg {{ size.0 }}w{% if not loop.last%},{% endif %}
                            {%- endfor -%}
                            "
                            sizes="min((100vw - 2rem), 330px)"
                            alt="{{ gallery.cover_photo.alt or 'TODO' }}" loading="lazy" decoding="async">
                        <figcaption>{{ gallery.name }}</figcaption>
                    </picture>
                </a>
            </div>
        {% endif %}
    {% endfor %}
</div>
{% endblock %}