devplacepy/devplacepy/templates/_media_gallery.html

<div class="media-grid">
    {% for item in media %}
    <div class="media-tile" data-media-tile="{{ item['uid'] }}">
        {% if item.get('is_image') and item.get('thumbnail_url') %}
        <img src="{{ item['thumbnail_url'] }}" alt="{{ item.get('original_filename', '') }}" loading="lazy" class="gallery-thumb" data-lightbox data-full="{{ item['url'] }}">
        {% elif item.get('is_image') %}
        <img src="{{ item['url'] }}" alt="{{ item.get('original_filename', '') }}" loading="lazy" class="gallery-thumb" data-lightbox data-full="{{ item['url'] }}">
        {% elif item.get('is_video') %}
        <video src="{{ item['url'] }}" controls preload="metadata" class="gallery-video"></video>
        {% elif item.get('is_audio') %}
        <audio src="{{ item['url'] }}" controls preload="metadata" class="gallery-audio"></audio>
        {% else %}
        <a href="{{ item['url'] }}" target="_blank" rel="noopener" class="non-image" download="{{ item.get('original_filename', 'file') }}">
            <span class="icon">{{ file_icon_emoji(item.get('original_filename', 'file')) }}</span>
            <span class="name">{{ item.get('original_filename', 'file') }}</span>
            <span class="size">{{ format_file_size(item.get('file_size', 0)) }}</span>
        </a>
        {% endif %}
        <div class="media-tile-overlay">
            {% if item.get('target_url') %}
            <a href="{{ item['target_url'] }}" class="media-source-link">{{ item.get('target_type', 'source')|capitalize }}</a>
            {% endif %}
            {% if is_owner or viewer_is_admin %}
            <button type="button" class="media-delete-btn" data-media-delete="{{ item['uid'] }}" data-confirm="Delete this media?" data-confirm-danger aria-label="Delete media">&#x1F5D1;&#xFE0F;</button>
            <noscript>
                <form method="POST" action="/media/{{ item['uid'] }}/delete" class="media-delete-form">
                    <button type="submit" class="media-delete-btn" aria-label="Delete media">&#x1F5D1;&#xFE0F;</button>
                </form>
            </noscript>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div class="empty-state">No media yet.</div>
    {% endfor %}
</div>