From b926912294f37e1d5a3f84c412d55f8637c71583 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 17:42:54 +0200
Subject: [PATCH] Styles and templates, again

---
 assets/styles/03-components/picture-event.css |   2 +-
 templates/event/_kind20_picture.html.twig     | 129 +----------------
 templates/event/index.html.twig               |  99 +------------
 templates/pages/author-about.html.twig        |   2 +-
 templates/pages/author-media.html.twig        |   2 +-
 templates/pages/author.html.twig              |   3 +-
 templates/partial/_gallery.html.twig          | 131 ++++++++++++++++++
 7 files changed, 137 insertions(+), 231 deletions(-)
 create mode 100644 templates/partial/_gallery.html.twig

diff --git a/assets/styles/03-components/picture-event.css b/assets/styles/03-components/picture-event.css
index c351a37..d86a67a 100644
--- a/assets/styles/03-components/picture-event.css
+++ b/assets/styles/03-components/picture-event.css
@@ -1,6 +1,6 @@
 figure.media {
     margin: 0;
-    padding: var(--spacing-3) var(--spacing-3) 0 var(--spacing-3);
+    padding: var(--spacing-3);
     border: none;
     box-shadow: none;
     background-color: var(--color-bg-light);
diff --git a/templates/event/_kind20_picture.html.twig b/templates/event/_kind20_picture.html.twig
index 18f3a9c..884d426 100644
--- a/templates/event/_kind20_picture.html.twig
+++ b/templates/event/_kind20_picture.html.twig
@@ -13,135 +13,8 @@
         {% set isEmbed = true %}
     {% endif %}
 
-    {# 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 %}
-                <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>
-            </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 %}
+    {% include 'partial/_gallery.html.twig' with {event: event, isEmbed: isEmbed} %}
 
     {# Location data #}
     {% set location = null %}
diff --git a/templates/event/index.html.twig b/templates/event/index.html.twig
index b3a81df..4eef17a 100644
--- a/templates/event/index.html.twig
+++ b/templates/event/index.html.twig
@@ -120,104 +120,7 @@
             <div class="event-content">
                 <twig:Atoms:Content :content="event.content" />
             </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 %}
+            {% include 'partial/_gallery.html.twig' with {event: event, isEmbed: false} %}
 
         {% endif %}
 
diff --git a/templates/pages/author-about.html.twig b/templates/pages/author-about.html.twig
index bde8034..20627cc 100644
--- a/templates/pages/author-about.html.twig
+++ b/templates/pages/author-about.html.twig
@@ -2,7 +2,7 @@
 
 {% block body %}
 
-    {% import 'partial/_author-section.html.twig', {author: author, npub: npub} %}
+    {% include 'partial/_author-section.html.twig' with {author: author, npub: npub} %}
 
     <section>
         <div class="profile-tabs">
diff --git a/templates/pages/author-media.html.twig b/templates/pages/author-media.html.twig
index 6268a28..e1791c5 100644
--- a/templates/pages/author-media.html.twig
+++ b/templates/pages/author-media.html.twig
@@ -2,7 +2,7 @@
 
 {% block body %}
 
-    {% import 'partial/_author-section.html.twig', {author: author, npub: npub} %}
+    {% include 'partial/_author-section.html.twig' with {author: author, npub: npub} %}
 
     <section>
     <div class="profile-tabs">
diff --git a/templates/pages/author.html.twig b/templates/pages/author.html.twig
index 8017670..7e3ae5d 100644
--- a/templates/pages/author.html.twig
+++ b/templates/pages/author.html.twig
@@ -2,7 +2,7 @@
 
 {% block body %}
 
-    {% import 'partial/_author-section.html.twig', {author: author, npub: npub} %}
+    {% include 'partial/_author-section.html.twig' with {author: author, npub: npub} %}
 
     <section>
         <div class="profile-tabs">
@@ -24,4 +24,3 @@
         </div>
     </section>
 {% endblock %}
-
diff --git a/templates/partial/_gallery.html.twig b/templates/partial/_gallery.html.twig
new file mode 100644
index 0000000..dbbf393
--- /dev/null
+++ b/templates/partial/_gallery.html.twig
@@ -0,0 +1,131 @@
+    {# 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 %}