From 8829817e4818e5314039c809e5ab191f1679be1d Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Sat, 21 Mar 2026 12:34:18 +0100
Subject: [PATCH] =?UTF-8?q?feat(portfolio):=20image=20d'arri=C3=A8re-plan?=
 =?UTF-8?q?=20pour=20la=20galerie=20anim=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

related to #20

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 site/blueprints/pages/project.yml         | 10 +++++++++-
 site/templates/portfolio.json.php         |  1 +
 src/components/ui/GalleryAnimation.svelte |  5 +++--
 src/views/Portfolio.svelte                |  4 ++--
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml
index fb4f2a9..134695c 100644
--- a/site/blueprints/pages/project.yml
+++ b/site/blueprints/pages/project.yml
@@ -55,13 +55,15 @@ columns:
         fields:
           imagesGallery:
             width: 2/3
-            label: Galerie d'image
+            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"
@@ -76,6 +78,7 @@ columns:
             translate: false
             image:
               ratio: 1/1
+              back: #ffffff
             uploads:
               template: image
             help: Écran de jeu mis en situation sur un appareil
@@ -104,6 +107,11 @@ columns:
             label: Couleur d'arrière-plan de la galerie animée
             type: color
             alpha: false
+          galleryBackgroundImage:
+            label: Image d'arrière-plan
+            type: files
+            multiple: false
+            help: L'ajout d'une image d'arrière-plan masquera la couleur d'arrière-plan.
           keywords:
             label: Mots clés
             type: structure
diff --git a/site/templates/portfolio.json.php b/site/templates/portfolio.json.php
index 825bfd4..5ee09a4 100644
--- a/site/templates/portfolio.json.php
+++ b/site/templates/portfolio.json.php
@@ -18,6 +18,7 @@ $specificData = [
       'mockupSrcset'          => $project->mockup()->toFile()?->srcset('mockup'),
       'mockupWebp'            => $project->mockup()->toFile()?->srcset('mockup-webp'),
       'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(),
+      'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->url() : null,
       'keywords'       => $project->keywords()->toStructure()->map(fn($i) => [
                             'label' => $i->label()->value(),
                             'text'  => $i->text()->value(),
diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte
index d3a5aa2..535231c 100644
--- a/src/components/ui/GalleryAnimation.svelte
+++ b/src/components/ui/GalleryAnimation.svelte
@@ -4,7 +4,7 @@
    * @prop {Array<{src: string, srcset: string, webp: string}>} images
    * @prop {number} secondsPerImage — durée par image (défaut: 8s)
    */
-  let { images = [], secondsPerImage = 8, backgroundColor = null } = $props()
+  let { images = [], secondsPerImage = 8, backgroundColor = null, backgroundImage = null } = $props()
 
   const columns = $derived.by(() => {
     const count    = images.length
@@ -29,7 +29,7 @@
 
 <div
   class="gallery-animation gallery-animation--vertical"
-  style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}"
+  style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}{backgroundImage ? `; --background-image: url(${backgroundImage})` : ''}"
 >
   {#each columns as col}
     <div class="gallery-animation__column">
@@ -66,6 +66,7 @@
     height: 100%;
     overflow: hidden;
     background-color: var(--background-color, transparent);
+    background-image: var(--background-image);
   }
 
   /* Vertical mode (Portfolio) */
diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte
index 913cdac..eec3426 100644
--- a/src/views/Portfolio.svelte
+++ b/src/views/Portfolio.svelte
@@ -80,7 +80,7 @@
 </script>
 
 <div class="portfolio-gallery mobile-only" aria-hidden="true">
-  <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} />
+  <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} />
 </div>
 
 <section
@@ -99,7 +99,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} />
+      <GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} />
     </div>
 
     <!-- Mockup device (centre) -->