studio-variable/world-game
3
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat(portfolio): image d'arrière-plan pour la galerie animée
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s
Details

Browse source 
related to #20

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-21 12:34:18 +01:00
parent b455cbb82e
commit 8829817e48
4 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
site/blueprints/pages/project.yml
View file

@ -55,13 +55,15 @@ columns:
fields: fields:
imagesGallery: imagesGallery:
width: 2/3 width: 2/3
label: Galerie d'image label: Galerie d'images
type: files type: files
layout: cards layout: cards
size: small size: small
min: 6 min: 6
accept: image/* accept: image/*
translate: false translate: false
image:
back: #ffffff
uploads: uploads:
template: image template: image
help: "Une animation sera générée à partir des images de ce champ. Minimum optimal d'images : 6" 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 translate: false
image: image:
ratio: 1/1 ratio: 1/1
back: #ffffff
uploads: uploads:
template: image template: image
help: Écran de jeu mis en situation sur un appareil 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 label: Couleur d'arrière-plan de la galerie animée
type: color type: color
alpha: false 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: keywords:
label: Mots clés label: Mots clés
type: structure type: structure

1
site/templates/portfolio.json.php
View file

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

5
src/components/ui/GalleryAnimation.svelte
View file

@ -4,7 +4,7 @@
* @prop {Array<{src: string, srcset: string, webp: string}>} images * @prop {Array<{src: string, srcset: string, webp: string}>} images
* @prop {number} secondsPerImage — durée par image (défaut: 8s) * @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 columns = $derived.by(() => {
const count = images.length const count = images.length
@ -29,7 +29,7 @@
<div <div
class="gallery-animation gallery-animation--vertical" 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} {#each columns as col}
<div class="gallery-animation__column"> <div class="gallery-animation__column">
@ -66,6 +66,7 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: var(--background-color, transparent); background-color: var(--background-color, transparent);
background-image: var(--background-image);
} }
/* Vertical mode (Portfolio) */ /* Vertical mode (Portfolio) */

4
src/views/Portfolio.svelte
View file

@ -80,7 +80,7 @@
</script> </script>
<div class="portfolio-gallery mobile-only" aria-hidden="true"> <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> </div>
<section <section
@ -99,7 +99,7 @@
{#if currentProject} {#if currentProject}
<!-- Galerie animation (gauche desktop / plein écran mobile) --> <!-- Galerie animation (gauche desktop / plein écran mobile) -->
<div class="portfolio-gallery desktop-only" aria-hidden="true"> <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> </div>
<!-- Mockup device (centre) --> <!-- Mockup device (centre) -->