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 @@