Set up image gallery structure field

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 {
+        tbody {
-
+            --bubble-size: 7.5em;
-            .k-button:nth-of-type(2),
+            --table-row-height: 100%;
-            .k-button:nth-of-type(3) {
-                display: none;
-            }
         }
     }
 }
-
-// Visual image crop field properties
-
-.kirby-imagecrop-field {
-
-    .k-column:nth-of-type(2) {
-        display: none;
-    }
-}

site/blueprints/files/image.yml

@@ -1,55 +1,12 @@
 title: Image
 accept:
     mime: image/jpeg, image/png
-columns:
+fields:
-    left:
+    alt_text:
-        width: 3/4
+        label:
-        fields:
+            en: Alternative text
-            caption:
+            fr: Texte alternatif
-                label:
+        type: text
-                    en: Caption
+        help:
-                    fr: Légende
+            en: "Short description displayed if the image can't be loaded (also used by screen readers)."
-                type: writer
+            fr: "Courte description affichée si l'image ne peut être chargée (également utilisée par les lecteurs d'écran)."
-                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: ""

site/blueprints/sections/site_content_gallery.yml

@@ -4,12 +4,59 @@ fields:
         label:
             en: Image gallery
             fr: Galerie d'images
-        type: files
+        type: structure
-        query: site.find('media-library').images
+        columns:
-        uploads:
+            main_image:
-            parent: site.find('media-library')
+                width: 1/3
-            template: image
+            related_image:
-        min: 2
+                width: 1/3
-        layout: cards
+            caption:
-        image:
+                width: 1/3
-            ratio: 1/1
+        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."

site/controllers/home.php

@@ -2,15 +2,15 @@
 
 return function ($site) {
 
-    // Get image files section content
+    // Get items from image gallery structure field
-    $images = $site->image_gallery()->toFiles();
+    $galleryItems = $site->image_gallery()->toStructure();
 
     // Get contact fields content
     $email = $site->email();
     $instagram = $site->instagram();
 
     return [
-        'images' => $images,
+        'galleryItems' => $galleryItems,
         'email' => $email,
         'instagram' => $instagram,
     ];

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>