afg-website/templates/gallery.html

{% extends "page.html" %}

{% block content %}
<main>
    <h1>{{page.title}}</h1>
    {{page.content | safe}}
    <br/>

    <div class="gallery">
    {% for asset in page.assets | sort -%}
        {%- if asset is matching("[.](jpg|jpeg|JPG)$") -%}
            {% set meta = get_image_metadata(path=asset) %}
            {% set image = resize_image(path=asset, width=280, height=210) %}
                <a href="{{ get_url(path=asset) }}"
                    data-pswp-width="{{ meta.width }}"
                    data-pswp-height="{{ meta.height }}"
                    target="_blank">
                    <img src="{{ image.url }}" />
                </a>
        {%- endif %}
    {%- endfor %}
    </div>
    {%- if page.extra.masto_instance -%}
    {% include "masto-comments.html" %}
    {%- endif -%}
    <hr></hr>
    <small>
        Published: {{page.date | date(format="%d.%m.%Y %H:%M")}}
        {% if item.updated %}
        Updated: {{page.updated | date(format="%d.%m.%Y %H:%M")}}
        {% endif %}
    </small>
    <br/>
    <br/>
</main>

<script type="module">
    import PhotoSwipeLightbox from '{{ get_url(path="js/photoswipe/photoswipe-lightbox.esm.min.js") }}';
    const lightbox = new PhotoSwipeLightbox({
        gallery: '.gallery',
        children: 'a',
        pswpModule: () => import('{{ get_url(path="js/photoswipe/photoswipe.esm.min.js") }}')
    });
    lightbox.init();
</script>
{% endblock content %}