From 00b2118e2c4a90ee33f2d11bb10bfde5c0d3f106 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Thu, 8 May 2025 17:10:00 +0200
Subject: [PATCH] Set up image gallery structure field

---
 assets/css/panel.scss                         | 24 ++-----
 site/blueprints/files/image.yml               | 61 +++--------------
 .../sections/site_content_gallery.yml         | 65 ++++++++++++++++---
 site/controllers/home.php                     |  6 +-
 site/templates/home.twig                      |  5 +-
 5 files changed, 77 insertions(+), 84 deletions(-)

diff --git a/assets/css/panel.scss b/assets/css/panel.scss
index 093f3c7..fd9912d 100644
--- a/assets/css/panel.scss
+++ b/assets/css/panel.scss
@@ -2,27 +2,15 @@
 // KIRBY PANEL CUSTOMIZATION
 // ----------------------------------------------------------------------------
 
-// Textarea headline buttons
+// Structure field gallery
 
-.k-textarea-field {
+.k-field-name-image_gallery {
 
-    .k-toolbar {
+    table {
 
-        .k-dropdown {
-
-            .k-button:nth-of-type(2),
-            .k-button:nth-of-type(3) {
-                display: none;
-            }
+        tbody {
+            --bubble-size: 7.5em;
+            --table-row-height: 100%;
         }
     }
 }
-
-// Visual image crop field properties
-
-.kirby-imagecrop-field {
-
-    .k-column:nth-of-type(2) {
-        display: none;
-    }
-}
diff --git a/site/blueprints/files/image.yml b/site/blueprints/files/image.yml
index 6c392d4..31af4ee 100644
--- a/site/blueprints/files/image.yml
+++ b/site/blueprints/files/image.yml
@@ -1,55 +1,12 @@
 title: Image
 accept:
     mime: image/jpeg, image/png
-columns:
-    left:
-        width: 3/4
-        fields:
-            caption:
-                label:
-                    en: Caption
-                    fr: Légende
-                type: writer
-                when: false
-                toolbar:
-                    inline: false
-                nodes: false
-                marks:
-                    - bold
-                    - italic
-                    - '|'
-                    - link
-                    - email
-                    - '|'
-                    - clear
-                help:
-                    en: "Informative text displayed below the image."
-                    fr: "Texte informatif affiché sous l'image."
-            alt_text:
-                label:
-                    en: Alternative text
-                    fr: Texte alternatif
-                type: text
-                help:
-                    en: "Short description displayed if the image can't be loaded and used by screen readers."
-                    fr: "Courte description affichée si l'image ne peut être chargée et utilisée par les lecteurs d'écran."
-    right:
-        width: 1/4
-        fields:
-            related_image:
-                label:
-                    en: Related image
-                    fr: Image associée
-                type: files
-                query: site.find('media-library').images
-                uploads:
-                    parent: site.find('media-library')
-                    template: image
-                multiple: false
-                layout: cards
-                size: small
-                image:
-                    ratio: 1/1
-                # help:
-                #     en: ""
-                #     fr: ""
+fields:
+    alt_text:
+        label:
+            en: Alternative text
+            fr: Texte alternatif
+        type: text
+        help:
+            en: "Short description displayed if the image can't be loaded (also used by screen readers)."
+            fr: "Courte description affichée si l'image ne peut être chargée (également utilisée par les lecteurs d'écran)."
diff --git a/site/blueprints/sections/site_content_gallery.yml b/site/blueprints/sections/site_content_gallery.yml
index 80eddb3..ac7408d 100644
--- a/site/blueprints/sections/site_content_gallery.yml
+++ b/site/blueprints/sections/site_content_gallery.yml
@@ -4,12 +4,59 @@ fields:
         label:
             en: Image gallery
             fr: Galerie d'images
-        type: files
-        query: site.find('media-library').images
-        uploads:
-            parent: site.find('media-library')
-            template: image
-        min: 2
-        layout: cards
-        image:
-            ratio: 1/1
+        type: structure
+        columns:
+            main_image:
+                width: 1/3
+            related_image:
+                width: 1/3
+            caption:
+                width: 1/3
+        fields:
+            main_image:
+                label:
+                    en: Main image
+                    fr: Image principale
+                type: files
+                query: site.find('media-library').images
+                uploads:
+                    parent: site.find('media-library')
+                    template: image
+                multiple: false
+                layout: cards
+                image:
+                    ratio: 1/1
+                width: 1/2
+            related_image:
+                label:
+                    en: Related image
+                    fr: Image associée
+                type: files
+                query: site.find('media-library').images
+                uploads:
+                    parent: site.find('media-library')
+                    template: image
+                multiple: false
+                layout: cards
+                image:
+                    ratio: 1/1
+                width: 1/2
+            caption:
+                label:
+                    en: Caption
+                    fr: Légende
+                type: writer
+                toolbar:
+                    inline: false
+                nodes: false
+                marks:
+                    - bold
+                    - italic
+                    - '|'
+                    - link
+                    - email
+                    - '|'
+                    - clear
+                # help:
+                #     en: "Informative text displayed below the image."
+                #     fr: "Texte informatif affiché sous l'image."
diff --git a/site/controllers/home.php b/site/controllers/home.php
index 7694f6a..fe1e8d5 100644
--- a/site/controllers/home.php
+++ b/site/controllers/home.php
@@ -2,15 +2,15 @@
 
 return function ($site) {
 
-    // Get image files section content
-    $images = $site->image_gallery()->toFiles();
+    // Get items from image gallery structure field
+    $galleryItems = $site->image_gallery()->toStructure();
 
     // Get contact fields content
     $email = $site->email();
     $instagram = $site->instagram();
 
     return [
-        'images' => $images,
+        'galleryItems' => $galleryItems,
         'email' => $email,
         'instagram' => $instagram,
     ];
diff --git a/site/templates/home.twig b/site/templates/home.twig
index 0938f68..882dca3 100644
--- a/site/templates/home.twig
+++ b/site/templates/home.twig
@@ -68,9 +68,10 @@
             <div class="splide" aria-label="{{ site.title }}'s artwork gallery">
                 <div class="splide__track">
                     <ul class="splide__list">
-                        {% for image in images %}
+                        {% for galleryItem in galleryItems %}
+                            {% set mainImage = galleryItem.main_image().toFile() %}
                             <li class="splide__slide">
-                                <img class="splide__image" src="{{ image.url }}" srcset="{{ image.srcset() }}" alt="{{ image.alt_text }}">
+                                <img class="splide__image" src="{{ mainImage.url }}" srcset="{{ mainImage.srcset() }}" alt="{{ mainImage.alt_text }}">
                             </li>
                         {% endfor %}
                     </ul>