From 71eaa3e788edbb779af9cca03b91a08d364f3a37 Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Sun, 21 Jun 2026 20:18:05 +0200
Subject: [PATCH] feat(photos): adaptive aspect ratio per entry (portrait 4:5,
 landscape 4:3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Portrait entries (first image taller than wide) get a 4:5 container —
Instagram's proven cap that prevents single photos dominating the screen.
Landscape entries keep 4:3. Aspect-ratio moved from slide to wrap so the
strip inherits it via height:100%.

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

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 6c3b7bd..b826507 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -207,6 +207,7 @@ body::after {
     margin-bottom: var(--space-5);
     border-radius: var(--radius-md);
     overflow: hidden;
+    aspect-ratio: 4 / 3;
 }
 
 .journal-photo-strip {
@@ -214,6 +215,7 @@ body::after {
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
+    height: 100%;
 }
 
 .journal-photo-strip::-webkit-scrollbar { display: none; }
@@ -221,7 +223,6 @@ body::after {
 .journal-photo-slide {
     flex: 0 0 100%;
     scroll-snap-align: start;
-    aspect-ratio: 4 / 3;
     overflow: hidden;
     display: block;
     text-decoration: none;
diff --git a/themes/intotheeast/templates/dailies.html.twig b/themes/intotheeast/templates/dailies.html.twig
index 9ecbf7f..eaca391 100644
--- a/themes/intotheeast/templates/dailies.html.twig
+++ b/themes/intotheeast/templates/dailies.html.twig
@@ -122,7 +122,9 @@ feedMap.on('load', function () {
 
                 {% set images = entry.media.images %}
                 {% if images|length > 0 %}
-                <div class="journal-photo-wrap">
+                {% set firstImg = images|first %}
+                {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
+                <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
                     <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
                         {% for img in images %}
                         <a class="journal-photo-slide"
diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index 86a9648..7a9ceaf 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -247,7 +247,9 @@
 
                         {% set images = entry.media.images %}
                         {% if images|length > 0 %}
-                        <div class="journal-photo-wrap">
+                        {% set firstImg = images|first %}
+                        {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
+                        <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
                             <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}">
                                 {% for img in images %}
                                 <a class="journal-photo-slide"