portfolio : add secondsPerImage field to control gallery animation speed. closes #33

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

site/blueprints/pages/project.yml

@@ -52,24 +52,43 @@ tabs:
                   - link
                 maxlength: 500
                 help: Description complète du projet
+          test:
+            type: fields
+            fields:
+              keywords:
+                label: Mots clés
+                type: structure
+                fields:
+                  label:
+                    label: Label
+                    required: true
+                    type: text
+                    width: 1/2
+                    placeholder: "Ex: Impact, Catégorie..."
+                  text:
+                    label: Texte
+                    required: true
+                    type: text
+                    width: 1/2
+              externalLinks:
+                label: Liens externes
+                type: structure
+                fields:
+                  label:
+                    label: Nom du bouton
+                    required: true
+                    type: text
+                    width: 1/2
+                    placeholder: "Ex: App Store, Site web..."
+                  url:
+                    label: URL
+                    required: true
+                    type: url
+                    width: 1/2
 
           images:
             type: fields
             fields:
-              imagesGallery:
-                width: 2/3
-                label: Galerie d'images
-                type: files
-                layout: cards
-                size: small
-                min: 6
-                accept: image/*
-                translate: false
-                image:
-                  back: #ffffff
-                uploads:
-                  template: image
-                help: "Une animation sera générée à partir des images de ce champ. Minimum optimal d'images : 6"
               mockup:
                 width: 1/3
                 label: Image de mise en situation
@@ -107,6 +126,27 @@ tabs:
                 uploads:
                   template: image
                 help: Petite image carrée représentant le jeu
+  animation:
+    icon: video
+    columns:
+      - width: 1/2
+        fields:
+          imagesGallery:
+            label: Galerie d'images
+            type: files
+            layout: cards
+            size: small
+            min: 6
+            accept: image/*
+            translate: false
+            image:
+              back: #ffffff
+            uploads:
+              template: image
+            help: |
+              Minimum 6 images
+      - width: 1/2
+        fields:
           galleryAnimationMode:
             label: Mode d'animation de la galerie
             type: toggles
@@ -119,6 +159,16 @@ tabs:
                 text: Horizontal
                 icon: arrow-left-right
             help: "Direction du défilement des images dans la galerie animée"
+          secondsPerImage:
+            label: Durée de l'animation
+            type: range
+            default: 8
+            min: 3
+            max: 12
+            after: secondes
+            help: |
+              Temps qu'une image mets pour traverser le conteneur de l'animation. 
+              **Augmenter la valeur ralentira l'animation, et inversement.**
           galleryBackgroundColor:
             label: Couleur d'arrière-plan de la galerie animée
             type: color
@@ -126,41 +176,6 @@ tabs:
           galleryBackgroundImage:
             label: Image d'arrière-plan
             type: files
+            layout: cards
             multiple: false
-              keywords:
-                label: Mots clés
-                type: structure
-                fields:
-                  label:
-                    label: Label
-                    required: true
-                    type: text
-                    width: 1/2
-                    placeholder: "Ex: Impact, Catégorie..."
-                  text:
-                    label: Texte
-                    required: true
-                    type: text
-                    width: 1/2
-
-          # Liens externes
-          links:
-            type: fields
-            fields:
-              externalLinks:
-                label: Liens externes
-                type: structure
-                fields:
-                  label:
-                    label: Nom du bouton
-                    required: true
-                    type: text
-                    width: 1/2
-                    placeholder: "Ex: App Store, Site web..."
-                  url:
-                    label: URL
-                    required: true
-                    type: url
-                    width: 1/2
-
   seo: seo/page

site/templates/portfolio.json.php

@@ -18,6 +18,7 @@ $specificData = [
       'mockupSrcset'          => $project->mockup()->toFile()?->srcset('mockup'),
       'mockupWebp'            => $project->mockup()->toFile()?->srcset('mockup-webp'),
       'galleryAnimationMode'   => $project->galleryAnimationMode()->value() ?: 'vertical',
+      'secondsPerImage'        => $project->secondsPerImage()->isNotEmpty() ? (int) $project->secondsPerImage()->value() : 8,
       'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(),
       'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->url() : null,
       'keywords'       => $project->keywords()->toStructure()->map(fn($i) => [

src/views/Portfolio.svelte

@@ -147,7 +147,7 @@
 </script>
 
 <div class="portfolio-gallery mobile-only" aria-hidden="true">
-  <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} />
+  <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
 </div>
 
 <section
@@ -163,7 +163,7 @@
   {#if currentProject}
     <!-- Galerie animation (gauche desktop / plein écran mobile) -->
     <div class="portfolio-gallery desktop-only" aria-hidden="true">
-      <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} />
+      <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
     </div>
 
     <!-- Mockup device (centre) -->