From fdf4e79a695b4c251e8d2a7d39b6fe3abd45e850 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 18 May 2025 14:27:00 +0200
Subject: [PATCH] refactor(bulma): use main-thumbnail view for AN photos

---
 .../details/bulma-detail-adoption-notice.html | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html b/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html
index ef6b1f4..a98abcb 100644
--- a/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html
+++ b/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html
@@ -38,16 +38,32 @@
                         <div class="column block">
                             <div class="card">
                                 <div class="grid card-content">
-                                    <div class="cell gallery">
-                                        {% for photo in adoption_notice.get_photos %}
-                                            <a href="{{ MEDIA_URL }}{{ photo.image }}"
-                                               data-pswp-width="{{ photo.image.width }}"
-                                               data-pswp-height="{{ photo.image.height }}"
-                                               target="_blank">
-                                                <img style="height: 12rem" src="{{ MEDIA_URL }}{{ photo.image }}"
-                                                     alt="{ photo.alt_text }}"/>
-                                            </a>
-                                        {% endfor %}
+                                    <div class="gallery">
+                                        {% with photo=adoption_notice.get_photos.0 %}
+                                            <div class="main-photo">
+                                                <a href="{{ MEDIA_URL }}{{ photo.image }}"
+                                                   data-pswp-width="{{ photo.image.width }}"
+                                                   data-pswp-height="{{ photo.image.height }}"
+                                                   target="_blank">
+                                                    <img src="{{ MEDIA_URL }}{{ photo.image }}"
+                                                         alt="{{ photo.alt_text }}">
+                                                </a>
+                                            </div>
+                                        {% endwith %}
+
+                                        <div class="thumbnail-row">
+                                            {% for photo in adoption_notice.get_photos|slice:"1:4" %}
+                                                <div class="thumbnail">
+                                                    <a href="{{ MEDIA_URL }}{{ photo.image }}"
+                                                       data-pswp-width="{{ photo.image.width }}"
+                                                       data-pswp-height="{{ photo.image.height }}"
+                                                       target="_blank">
+                                                        <img src="{{ MEDIA_URL }}{{ photo.image }}"
+                                                             alt="{{ photo.alt_text }}">
+                                                    </a>
+                                                </div>
+                                            {% endfor %}
+                                        </div>
                                     </div>
                                 </div>
                             </div>