Phase 4 M1: Entry enrichment — location, weather, gallery, hero image

themes/intotheeast/templates/entry.html.twig

@@ -1,16 +1,111 @@
 {% extends 'default.html.twig' %}
 
 {% block content %}
+{% set weather_icons = {
+    'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
+    'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
+    'Snow': '❄️', 'Thunderstorm': '⛈️'
+} %}
+
 <article class="entry">
     <header class="entry-header">
         <time class="entry-date" datetime="{{ page.date|date('Y-m-d') }}">
             {{ page.date|date('l, d F Y') }}
         </time>
+
+        {% if page.header.location_city or page.header.location_country %}
+        <p class="entry-location">
+            📍
+            {% if page.header.location_city %}{{ page.header.location_city }}{% endif %}
+            {% if page.header.location_city and page.header.location_country %}, {% endif %}
+            {% if page.header.location_country %}{{ page.header.location_country }}{% endif %}
+        </p>
+        {% endif %}
+
+        {% if page.header.weather_desc or page.header.weather_temp_c %}
+        <p class="entry-weather">
+            {% if page.header.weather_desc %}
+                {{ weather_icons[page.header.weather_desc] ?? '🌡️' }} {{ page.header.weather_desc }}
+            {% endif %}
+            {% if page.header.weather_temp_c %}
+                · {{ page.header.weather_temp_c|round }}°C
+            {% endif %}
+        </p>
+        {% endif %}
+
         <h1 class="entry-title">{{ page.title }}</h1>
     </header>
+
     <div class="entry-body">
         {{ page.content }}
     </div>
+
+    {% set images = page.media.images %}
+    {% if images|length > 0 %}
+    <div class="entry-gallery" id="entry-gallery">
+        {% for image in images %}
+        <button class="gallery-thumb" data-full="{{ image.url }}" data-alt="{{ image.filename }}" aria-label="View {{ image.filename }}">
+            <img src="{{ image.cropResize(300, 300).url }}" alt="{{ image.filename }}" loading="lazy">
+        </button>
+        {% endfor %}
+    </div>
+
+    <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Photo viewer" hidden>
+        <button class="lightbox-close" id="lb-close" aria-label="Close">✕</button>
+        <button class="lightbox-prev" id="lb-prev" aria-label="Previous">‹</button>
+        <img class="lightbox-img" id="lb-img" src="" alt="">
+        <button class="lightbox-next" id="lb-next" aria-label="Next">›</button>
+    </div>
+
+    <script>
+    (function() {
+        var gallery = document.getElementById('entry-gallery');
+        var lightbox = document.getElementById('lightbox');
+        var lbImg = document.getElementById('lb-img');
+        var thumbs = Array.from(gallery.querySelectorAll('.gallery-thumb'));
+        var current = 0;
+
+        function open(index) {
+            current = index;
+            var btn = thumbs[index];
+            lbImg.src = btn.dataset.full;
+            lbImg.alt = btn.dataset.alt;
+            lightbox.hidden = false;
+            document.body.style.overflow = 'hidden';
+            document.getElementById('lb-close').focus();
+        }
+
+        function close() {
+            lightbox.hidden = true;
+            document.body.style.overflow = '';
+            thumbs[current].focus();
+        }
+
+        function prev() { open((current - 1 + thumbs.length) % thumbs.length); }
+        function next() { open((current + 1) % thumbs.length); }
+
+        thumbs.forEach(function(btn, i) {
+            btn.addEventListener('click', function() { open(i); });
+        });
+
+        document.getElementById('lb-close').addEventListener('click', close);
+        document.getElementById('lb-prev').addEventListener('click', prev);
+        document.getElementById('lb-next').addEventListener('click', next);
+
+        lightbox.addEventListener('click', function(e) {
+            if (e.target === lightbox) close();
+        });
+
+        document.addEventListener('keydown', function(e) {
+            if (lightbox.hidden) return;
+            if (e.key === 'Escape') close();
+            if (e.key === 'ArrowLeft') prev();
+            if (e.key === 'ArrowRight') next();
+        });
+    })();
+    </script>
+    {% endif %}
+
     <footer class="entry-footer">
         <a href="{{ base_url_absolute }}/tracker">← Back to journal</a>
     </footer>