newsroom/templates/partial/_gallery.html.twig

    {# Content warning #}
    {% set contentWarning = null %}
    {% for tag in event.tags %}
        {% if tag[0] == 'content-warning' %}
            {% set contentWarning = tag[1] %}
        {% endif %}
    {% endfor %}

    {% if contentWarning %}
        <div class="content-warning">
            <strong>⚠️ Content Warning:</strong> {{ contentWarning }}
            <button class="btn-show-nsfw" onclick="this.parentElement.nextElementSibling.classList.remove('hidden'); this.parentElement.style.display='none';">Show Content</button>
        </div>
        <div class="picture-gallery hidden">
    {% else %}
        <div class="picture-gallery">
    {% endif %}

    {# Collect all imeta images into an array #}
    {% set images = [] %}
    {% for tag in event.tags %}
        {% if tag[0] == 'imeta' %}
            {% set imageUrl = null %}
            {% set mimeType = null %}
            {% set blurhash = null %}
            {% set dimensions = null %}
            {% set altText = null %}
            {% set fallbacks = [] %}
            {% set annotatedUsers = [] %}
            {# Parse imeta tag parameters #}
            {% for i in 1..(tag|length - 1) %}
                {% set param = tag[i] %}
                {% if param starts with 'url ' %}
                    {% set imageUrl = param[4:] %}
                {% elseif param starts with 'm ' %}
                    {% set mimeType = param[2:] %}
                {% elseif param starts with 'blurhash ' %}
                    {% set blurhash = param[9:] %}
                {% elseif param starts with 'dim ' %}
                    {% set dimensions = param[4:] %}
                {% elseif param starts with 'alt ' %}
                    {% set altText = param[4:] %}
                {% elseif param starts with 'fallback ' %}
                    {% set fallbacks = fallbacks|merge([param[9:]]) %}
                {% elseif param starts with 'annotate-user ' %}
                    {% set annotatedUsers = annotatedUsers|merge([param[14:]]) %}
                {% endif %}
            {% endfor %}
            {# Alt is also own tag #}
            {% for altTag in event.tags %}
                {% if altTag[0] == 'alt' %}
                    {% set altText = altTag[1] %}
                {% endif %}
            {% endfor %}
            {% set images = images|merge([{
                'url': imageUrl,
                'mimeType': mimeType,
                'blurhash': blurhash,
                'dimensions': dimensions,
                'altText': altText,
                'fallbacks': fallbacks,
                'annotatedUsers': annotatedUsers
            }]) %}
        {% endif %}
    {% endfor %}

    {% if images|length > 0 %}
    <div class="gallery-view" data-controller="gallery">
        <div class="main-image-wrapper">
            {% set main = images[0] %}
            <figure class="media">
                {% if isEmbed %}
                    <a href="{{ path('nevent', {nevent: event.id|nEncode }) }}" aria-label="View standalone">
                {% endif %}
                <picture>
                    <img src="{{ main.url }}"
                         alt="{{ main.altText|default('Picture') }}"
                         {% if main.dimensions %}data-dimensions="{{ main.dimensions }}"{% endif %}
                         {% if main.blurhash %}data-blurhash="{{ main.blurhash }}"{% endif %}
                         class="picture-image main-image"
                         data-gallery-target="mainImage"
                         />
                    {% for fallback in main.fallbacks %}
                        <source srcset="{{ fallback }}" />
                    {% endfor %}
                </picture>

                {% if images|length > 1 %}
                    <div class="thumbnails" data-gallery-target="thumbnails">
                        {% for img in images %}
                            <img src="{{ img.url }}"
                                 alt="{{ img.altText|default('Picture') }}"
                                 class="thumbnail{% if loop.first %} selected{% endif %}"
                                 data-gallery-target="thumbnail"
                                 data-action="click->gallery#switch"
                                 data-gallery-index="{{ loop.index0 }}"
                                 {% if img.dimensions %}data-dimensions="{{ img.dimensions }}"{% endif %}
                                {% if img.blurhash %}data-blurhash="{{ img.blurhash }}"{% endif %}
                            />
                        {% endfor %}
                    </div>
                {% endif %}

                {% if isEmbed %}
                    </a>
                {% endif %}
                {% if event.kind == 20 %}
                <figcaption class="picture-description">
                    <twig:Atoms:Content :content="event.content" />
                    {% if isEmbed %}
                        <span class="credits">Image by <twig:Molecules:UserFromNpub :ident="event.pubkey" class="credits" /></span>
                    {% endif %}
                </figcaption>
                {% endif %}
            </figure>
            {# Display annotated users for main image #}
            {% if main.annotatedUsers|length > 0 %}
                <div class="annotated-users">
                    {% for userAnnotation in main.annotatedUsers %}
                        {% set parts = userAnnotation|split(':') %}
                        {% if parts|length == 3 %}
                            <div class="user-tag" data-left="{{ parts[1] }}" data-top="{{ parts[2] }}" style="left: {{ parts[1] }}%; top: {{ parts[2] }}%;">
                                <twig:Molecules:UserFromNpub ident="{{ parts[0] }}" />
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>