From 6b1d3a8b8194ca52f3d9a5dbf842899de5eb92da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Sun, 12 Oct 2025 12:43:45 +0200
Subject: [PATCH] Image gallery

---
 templates/components/event_card.html.twig | 100 ++++++++++++++++
 templates/event/index.html.twig           | 139 +++++++++++++++++++---
 2 files changed, 222 insertions(+), 17 deletions(-)

diff --git a/templates/components/event_card.html.twig b/templates/components/event_card.html.twig
index 4ef53fd..8d3aef3 100644
--- a/templates/components/event_card.html.twig
+++ b/templates/components/event_card.html.twig
@@ -16,6 +16,106 @@
     <div class="event-content">
         {{ event.content|markdown_to_html|mentionify }}
     </div>
+
+    {# 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">
+                    <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 %}
+                </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 class="event-footer">
         <a href="/e/{{ nevent }}" class="view-full">View full event</a>
     </div>
diff --git a/templates/event/index.html.twig b/templates/event/index.html.twig
index 6ce77e7..aaffd12 100644
--- a/templates/event/index.html.twig
+++ b/templates/event/index.html.twig
@@ -1,7 +1,7 @@
 {% extends 'layout.html.twig' %}
 
 {% block title %}
-    {%- if author and author.name is defined -%}
+    {%- if author and (author.name ?? false) -%}
         {{ author.name }} - Nostr Event
     {%- else -%}
         Nostr Event
@@ -17,7 +17,7 @@
         {% set ogType = 'article' %} {# Could use 'image' but 'article' is more widely supported #}
     {% endif %}
     <meta property="og:type" content="{{ ogType }}" />
-    <meta property="og:title" content="{% if author and author.name is defined %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" />
+    <meta property="og:title" content="{% if author and (author.name ?? false) %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" />
 
     {# OG Description - use event content or fallback #}
     {% set ogDescription = event.content|default('View this Nostr event')|striptags|slice(0, 200) %}
@@ -50,7 +50,7 @@
     {% endif %}
 
     {# Fallback to author image if available #}
-    {% if ogImage is null and author and author.image is defined %}
+    {% if ogImage is null and author and (author.image ?? false) %}
         {% set ogImage = author.image %}
     {% endif %}
 
@@ -63,7 +63,7 @@
 
     {# Twitter Card tags #}
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="{% if author and author.name is defined %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" />
+    <meta name="twitter:title" content="{% if author and (author.name ?? false) %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" />
     <meta name="twitter:description" content="{{ ogDescription }}" />
     <meta name="twitter:image" content="{{ ogImage }}" />
 
@@ -72,7 +72,7 @@
         <meta property="article:published_time" content="{{ event.created_at|date('c') }}" />
     {% endif %}
 
-    {% if author and author.name is defined %}
+    {% if author and (author.name ?? false) %}
         <meta property="article:author" content="{{ author.name }}" />
     {% endif %}
 
@@ -110,7 +110,7 @@
         {# NIP-68 Picture Event (kind 20) #}
         {% if event.kind == 20 %}
             {% include 'event/_kind20_picture.html.twig' %}
-            {# NIP-71 Video Events (kind 21 and 22) #}
+        {# NIP-71 Video Events (kind 21 and 22) #}
         {% elseif event.kind == 21 or event.kind == 22 %}
             {% include 'event/_kind22_video.html.twig' %}
         {% elseif event.kind == 1450 %}
@@ -121,25 +121,130 @@
                 <twig:Atoms:Content :content="event.content" />
             </div>
         {% endif %}
-    </div>
-</article>
 
-    <div class="w-container d-flex">
-        <div class="notice info mt-4">
-            <p>This is a work in progress. If your event didn't render right, we apologize. Working on it!</p>
-        </div>
+        {# 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">
+                            <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 %}
+                    </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>
+</article>
 
 <div class="container">
-    {% if nostrLinks is defined and nostrLinks|length > 0 %}
+    {% if is_granted('ROLE_ADMIN') and nostrLinks is defined and nostrLinks|length > 0 %}
     <div class="nostr-links">
         <h4>Referenced Nostr Links</h4>
         <ul class="link-list">
             {% for link in nostrLinks %}
-            <li>
-                <a href="/e/{{ link.identifier }}">{{ link.identifier }}</a>
-                <span class="link-type">({{ link.type }})</span>
-            </li>
+                {% if link.type == 'url' %}
+                <li>
+                    <a href="{{ link.identifier }}">{{ link.identifier }}</a>
+                </li>
+                {% elseif link.type == 'npub' %}
+                    <li>
+                        <a href="/p/{{ link.identifier }}">{{ link.identifier }}</a>
+                        <span class="link-type">({{ link.type }})</span>
+                    </li>
+                {% else %}
+                    <li>
+                        <a href="/e/{{ link.identifier }}">{{ link.identifier }}</a>
+                        <span class="link-type">({{ link.type }})</span>
+                    </li>
+                {% endif %}
             {% endfor %}
         </ul>
     </div>