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

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

{% block title %}{{ gallery.name }}{% endblock %}

{% block extra_head %}
<!-- CanIHazMoreComplexityPlease? https://htmlhead.dev/ -->
<meta
    name="twitter:image" property="og:image" itemprop="image"
    content="https://media.larlet.fr/{{ photo.gallery_slug }}/jpg/{{ photo.name }}_{{ sizes.0.0 }}x{{ sizes.0.1 }}.jpg"
>
{% endblock %}

{% block container %}
    <div class="hero u-center">
        <picture>
            <source
                srcset="
                {%- for size in sizes %}
                    {{ photo.gallery_slug }}/webp/{{ photo.name }}_{{ size.0 }}x{{ size.1 }}.webp {{ size.0 }}w{% if not loop.last%},{% endif %}
                {%- endfor -%}
                "
                sizes="min(100vw, calc(100vh * {{ photo.width }} / {{ photo.height }}))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="{{ photo.gallery_slug }}/jpg/{{ photo.name }}_{{ sizes.0.0 }}x{{ sizes.0.1 }}.jpg"
                width="{{ photo.width }}" height="{{ photo.height }}"
                srcset="
                {%- for size in sizes %}
                    {{ photo.gallery_slug }}/jpg/{{ photo.name }}_{{ size.0 }}x{{ size.1 }}.jpg {{ size.0 }}w{% if not loop.last%},{% endif %}
                {%- endfor -%}
                "
                sizes="min(100vw, calc(100vh * {{ photo.width }} / {{ photo.height }}))"
                fetchpriority="high"
                decoding="sync"
                alt="{{ photo.alt or 'TODO' }}">
        </picture>
    </div>

    <h1>{{ gallery.name }}{% if gallery.private %} (🔒 privé){% endif %}</h1>
    {% if photo.alt %}
        <h2>{{ photo.alt }}</h2>
    {% endif %}

    <nav>
        <p class="u-center">
            {% if previous %}
                <a href="{{ previous.page_url }}"
                    title="Photo précédente, vous pouvez utiliser la flèche du clavier ←"
                >← Photo précédente</a>
                •
            {% endif %}
            <a href="/"
                title="Retour à l’accueil, vous pouvez utiliser la flèche du clavier ↑"
            >↑ Retour aux albums{% if gallery.private %} publics{% endif %}</a>
            {% if next %}
                •
                <a href="{{ next.page_url }}"
                    title="Photo suivante, vous pouvez utiliser la flèche du clavier →"
                >Photo suivante →</a>
            {% endif %}
        </p>
    </nav>

    {# TODO: less manual! #}
    {% if gallery.type == "video" %}
    <div class="u-center">
        <script src="https://player.vimeo.com/api/player.js"></script>
        <div class="iframe-container"><iframe src="https://player.vimeo.com/video/580086949?h=0833bc929c" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
        <p><a href="https://vimeo.com/580086949/0833bc929c">Évasion (lire sur Vimeo)</a></p>
        <hr>
        <div class="iframe-container"><iframe src="https://player.vimeo.com/video/540447287?h=323e810be3" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
        <p><a href="https://vimeo.com/540447287/323e810be3">Contemplation (lire sur Vimeo)</a></p>
        <hr>
        <div class="iframe-container"><iframe src="https://player.vimeo.com/video/516515235?h=45826baa92" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
        <p><a href="https://vimeo.com/516515235/45826baa92">Précipitation (lire sur Vimeo)</a></p>
        <hr>
        <div class="iframe-container"><iframe src="https://player.vimeo.com/video/492686199?h=31ac11260c" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
        <p><a href="https://vimeo.com/492686199/31ac11260c">Arrakice (lire sur Vimeo)</a></p>
        <hr>
        <div class="iframe-container"><iframe src="https://player.vimeo.com/video/473661570?h=46af2e921e" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
        <p><a href="https://vimeo.com/473661570/46af2e921e">Chaos (lire sur Vimeo)</a></p>
    </div>
    {% endif %}
    <div class="gallery">
        {% for gallery_photo in gallery.photos %}
            {% if not gallery_photo.url == photo.url %}
            <div class="photo{% if gallery_photo.narrow %} narrow{% endif %}{% if gallery_photo.wide %} wide{% endif %}">
                <a href="{{ gallery_photo.page_url }}">
                    <picture>
                        <source
                            srcset="
                            {%- for size in sizes %}
                                {{ gallery_photo.gallery_slug }}/webp/{{ gallery_photo.name }}_{{ size.0 }}x{{ size.1 }}.webp {{ size.0 }}w{% if not loop.last%},{% endif %}
                            {%- endfor -%}
                            "
                            sizes="{% if gallery_photo.narrow %}150px{% else %}310px{% endif %}"
                            type="image/webp">
                        <img
                            src="{{ gallery_photo.gallery_slug }}/jpg/{{ gallery_photo.name }}_{{ sizes.0.0 }}x{{ sizes.0.1 }}.jpg"
                            width="{{ gallery_photo.width }}" height="{{ gallery_photo.height }}"
                            srcset="
                            {%- for size in sizes %}
                                {{ gallery_photo.gallery_slug }}/jpg/{{ gallery_photo.name }}_{{ size.0 }}x{{ size.1 }}.jpg {{ size.0 }}w{% if not loop.last%},{% endif %}
                            {%- endfor -%}
                            "
                            sizes="{% if gallery_photo.narrow %}150px{% else %}310px{% endif %}"
                            alt="{{ gallery_photo.alt or 'TODO' }}" loading="lazy" decoding="async">
                    </picture>
                </a>
            </div>
            {% endif %}
        {% endfor %}
    </div>
    <nav>
        <p class="u-center"
            data-controller="navigation"
            data-action="keydown@window->navigation#navigate"
        >
            {% if previous %}
                <a href="{{ previous.page_url }}"
                    title="Photo précédente, vous pouvez utiliser la flèche du clavier ←"
                    rel="prev"
                    data-navigation-target="previous"
                >← Photo précédente</a>
                •
            {% endif %}
            <a href="/"
                title="Retour à l’accueil, vous pouvez utiliser la flèche du clavier ↑"
                data-navigation-target="up"
            >↑ Retour aux albums{% if gallery.private %} publics{% endif %}</a>
            {% if next %}
                •
                <a href="{{ next.page_url }}"
                    title="Photo suivante, vous pouvez utiliser la flèche du clavier →"
                    rel="next"
                    data-navigation-target="next"
                >Photo suivante →</a>
            {% endif %}
        </p>
    </nav>
{% endblock %}

{% block extra_bottom %}
    <script type="module">
        import { Application, Controller } from "/scripts/stimulus-3.0.1.js"
        window.Stimulus = Application.start()
        // window.Stimulus.debug = true

        Stimulus.register("navigation", class extends Controller {
            static targets = [ "previous", "next", "up" ]

            navigate(event) {
                const key = event.key
                if (key === "ArrowLeft" && this.hasPreviousTarget) {
                    this.previousTarget.click()
                }
                if (key === "ArrowRight" && this.hasNextTarget) {
                    this.nextTarget.click()
                }
                if (key === "ArrowUp" && this.hasUpTarget) {
                    this.upTarget.click()
                }
            }
        })
    </script>
{% endblock %}