Set up media library

site/blueprints/files/gallery_image.yml

@@ -1,31 +0,0 @@
-title: Image
-accept:
-    mime: image/jpeg, image/png
-fields:
-    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."
-    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."

site/blueprints/files/image.yml

@@ -0,0 +1,55 @@
+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: ""

site/blueprints/pages/media-library.yml

@@ -0,0 +1,12 @@
+title:
+    en: Media library
+    fr: Médiathèque
+options:
+    changeStatus: false
+    duplicate: false
+    preview: false
+status:
+    draft: true
+    unlisted: true
+sections:
+    images: sections/media-library_images

site/blueprints/sections/media-library_images.yml

@@ -0,0 +1,6 @@
+label: Images
+type: files
+template: image
+layout: cardlets
+image:
+    ratio: 1/1

site/blueprints/sections/site_content_gallery.yml

@@ -0,0 +1,15 @@
+type: fields
+fields:
+    image_gallery:
+        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

site/blueprints/sections/site_content_images.yml

@@ -1,9 +0,0 @@
-label:
-    en: Image gallery
-    fr: Galerie d'images
-type: files
-template: gallery_image
-min: 2
-layout: cards
-image:
-    ratio: 1/1

site/blueprints/sections/site_seo_metadata.yml

@@ -20,8 +20,10 @@ fields:
             en: Meta image
             fr: Méta image
         type: files
-        query: site.images
+        query: site.find('media-library').images
-        uploads: false
+        uploads:
+            parent: site.find('media-library')
+            template: image
         multiple: false
         required: true
         layout: cards

site/blueprints/tabs/site_content.yml

@@ -3,5 +3,5 @@ label:
     fr: Contenu
 icon: text
 sections:
-    artworks: sections/site_content_images
+    gallery: sections/site_content_gallery
     contact: sections/site_content_contact

site/config/config.php

@@ -3,9 +3,35 @@
 return [
     // Kirby configuration settings
     'panel' => [
-        'language' => 'fr',
         'css' => 'build/panel.css',
         'install' => true,
+        'language' => 'fr',
+        'menu' => [
+            'site' => [
+                'current' => function (string $current): bool { // Override default menu entry highlighting
+                    $links = [ // Links of all custom menu entries
+                        'pages/media-library',
+                    ];
+                    $path  = Kirby\Cms\App::instance()->path();
+                    return $current === 'site' && A::every($links, fn ($link) => Str::contains($path, $link) === false);
+                },
+            ],
+            '-',
+            'media-library' => [
+                'icon' => 'images',
+                'label' => [
+                    'en' => 'Media library',
+                    'fr' => 'Médiathèque',
+                ],
+                'link' => 'pages/media-library',
+                'current' => function (string $current): bool { // Override default menu entry highlighting
+                    $path = Kirby\Cms\App::instance()->path();
+                    return Str::contains($path, 'pages/media-library');
+                },
+            ],
+            'users',
+            'system',
+        ]
     ],
     // Sitemapper plugin options
     'kirbyzone.sitemapper' => [

site/controllers/home.php

@@ -3,17 +3,15 @@
 return function ($site) {
 
     // Get image files section content
-    $images = $site->files()->template("gallery_image")->shuffle();
+    $images = $site->image_gallery()->toFiles();
 
     // Get contact fields content
     $email = $site->email();
     $instagram = $site->instagram();
-    $portfolio = $site->portfolio()->toFile();
 
     return [
         'images' => $images,
         'email' => $email,
         'instagram' => $instagram,
-        'portfolio' => $portfolio
     ];
 };