From 3379e50503c853d121b4596c8ba91e07dcabaea3 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 19:39:33 +0200
Subject: [PATCH] fix(dailies): fix PhotoSwipe CSS loading + restore expand
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move PhotoSwipe CSS from per-entry assets.addCss() (runs after head is
committed) to a single <link> tag at block start. Restore the expand
button as the reliable mobile tap target — it dispatches a synthetic
click on the visible <a> slide, which bubbles to PhotoSwipe's gallery
handler. Merge dot sync into the single module script.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
---
 themes/intotheeast/css/style.css              | 21 ++++++++
 .../intotheeast/templates/dailies.html.twig   | 52 +++++++++++--------
 2 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 57b056a..223a7be 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -234,6 +234,27 @@ body::after {
     display: block;
 }
 
+.journal-photo-expand {
+    position: absolute;
+    bottom: var(--space-3);
+    right: var(--space-3);
+    width: 32px;
+    height: 32px;
+    background: rgba(0,0,0,0.45);
+    border: none;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    z-index: 2;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.journal-photo-expand:active { background: rgba(0,0,0,0.7); }
+
 .journal-photo-dots {
     display: flex;
     justify-content: center;
diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig
index 3e547b1..78a5fe0 100644
--- a/themes/intotheeast/templates/dailies.html.twig
+++ b/themes/intotheeast/templates/dailies.html.twig
@@ -1,6 +1,7 @@
 {% extends 'default.html.twig' %}
 
 {% block content %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css">
 {% set journal_entries = page.collection() %}
 {% set stories_page = grav.pages.find(page.parent().route ~ '/stories') %}
 {% set story_entries = stories_page ? stories_page.children.published() : [] %}
@@ -121,7 +122,6 @@ feedMap.on('load', function () {
 
                 {% set images = entry.media.images %}
                 {% if images|length > 0 %}
-                {% do assets.addCss('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.css') %}
                 <div class="journal-photo-wrap">
                     <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
                         {% for img in images %}
@@ -134,6 +134,9 @@ feedMap.on('load', function () {
                         </a>
                         {% endfor %}
                     </div>
+                    <button class="journal-photo-expand" aria-label="View full size">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+                    </button>
                 </div>
                 {% if images|length > 1 %}
                 <div class="journal-photo-dots" aria-hidden="true">
@@ -173,33 +176,38 @@ feedMap.on('load', function () {
 
 <script type="module">
 import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js';
+
 const lightbox = new PhotoSwipeLightbox({
     gallery: '.pswp-gallery',
     children: 'a.journal-photo-slide',
     pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js')
 });
 lightbox.init();
-</script>
 
-<script>
-/* ── Dot sync ────────────────────────────────────────────────── */
-(function () {
-    document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
-        var strip   = wrap.querySelector('.journal-photo-strip');
-        var slides  = Array.from(strip.querySelectorAll('.journal-photo-slide'));
-        var article = wrap.closest('article');
-        var dots    = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
-        if (!dots.length) return;
-        var io = new IntersectionObserver(function (entries) {
-            entries.forEach(function (e) {
-                if (!e.isIntersecting) return;
-                var idx = slides.indexOf(e.target);
-                dots.forEach(function (d) { d.classList.remove('is-active'); });
-                if (dots[idx]) dots[idx].classList.add('is-active');
-            });
-        }, { root: strip, threshold: 0.5 });
-        slides.forEach(function (s) { io.observe(s); });
-    });
-})();
+/* Per-strip: dot sync + expand button → tap the visible slide to trigger pswp */
+document.querySelectorAll('.journal-photo-wrap').forEach(function (wrap) {
+    var strip     = wrap.querySelector('.journal-photo-strip');
+    var slides    = Array.from(strip.querySelectorAll('a.journal-photo-slide'));
+    var expandBtn = wrap.querySelector('.journal-photo-expand');
+    var article   = wrap.closest('article');
+    var dots      = article ? Array.from(article.querySelectorAll('.journal-photo-dot')) : [];
+    var visibleIdx = 0;
+
+    var io = new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+            if (!e.isIntersecting) return;
+            visibleIdx = slides.indexOf(e.target);
+            dots.forEach(function (d) { d.classList.remove('is-active'); });
+            if (dots[visibleIdx]) dots[visibleIdx].classList.add('is-active');
+        });
+    }, { root: strip, threshold: 0.5 });
+    slides.forEach(function (s) { io.observe(s); });
+
+    if (expandBtn && slides.length) {
+        expandBtn.addEventListener('click', function () {
+            slides[visibleIdx].dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        });
+    }
+});
 </script>
 {% endblock %}