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,60 +126,56 @@ tabs:
                 uploads:
                   template: image
                 help: Petite image carrée représentant le jeu
-              galleryAnimationMode:
+  animation:
-                label: Mode d'animation de la galerie
+    icon: video
-                type: toggles
+    columns:
-                default: vertical
+      - width: 1/2
-                options:
+        fields:
-                  - value: vertical
+          imagesGallery:
-                    text: Vertical
+            label: Galerie d'images
-                    icon: arrow-up-down
+            type: files
-                  - value: horizontal
+            layout: cards
-                    text: Horizontal
+            size: small
-                    icon: arrow-left-right
+            min: 6
-                help: "Direction du défilement des images dans la galerie animée"
+            accept: image/*
-              galleryBackgroundColor:
+            translate: false
-                label: Couleur d'arrière-plan de la galerie animée
+            image:
-                type: color
+              back: #ffffff
-                alpha: false
+            uploads:
-              galleryBackgroundImage:
+              template: image
-                label: Image d'arrière-plan
+            help: |
-                type: files
+              Minimum 6 images
-                multiple: false
+      - width: 1/2
-              keywords:
+        fields:
-                label: Mots clés
+          galleryAnimationMode:
-                type: structure
+            label: Mode d'animation de la galerie
-                fields:
+            type: toggles
-                  label:
+            default: vertical
-                    label: Label
+            options:
-                    required: true
+              - value: vertical
-                    type: text
+                text: Vertical
-                    width: 1/2
+                icon: arrow-up-down
-                    placeholder: "Ex: Impact, Catégorie..."
+              - value: horizontal
-                  text:
+                text: Horizontal
-                    label: Texte
+                icon: arrow-left-right
-                    required: true
+            help: "Direction du défilement des images dans la galerie animée"
-                    type: text
+          secondsPerImage:
-                    width: 1/2
+            label: Durée de l'animation
-
+            type: range
-          # Liens externes
+            default: 8
-          links:
+            min: 3
-            type: fields
+            max: 12
-            fields:
+            after: secondes
-              externalLinks:
+            help: |
-                label: Liens externes
+              Temps qu'une image mets pour traverser le conteneur de l'animation. 
-                type: structure
+              **Augmenter la valeur ralentira l'animation, et inversement.**
-                fields:
+          galleryBackgroundColor:
-                  label:
+            label: Couleur d'arrière-plan de la galerie animée
-                    label: Nom du bouton
+            type: color
-                    required: true
+            alpha: false
-                    type: text
+          galleryBackgroundImage:
-                    width: 1/2
+            label: Image d'arrière-plan
-                    placeholder: "Ex: App Store, Site web..."
+            type: files
-                  url:
+            layout: cards
-                    label: URL
+            multiple: false
-                    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) -->