Bloc PageBuilder : imageGallery

Documentation technique

Objet : Bloc PageBuilder
Type : Object
Slice : Slice 1 (Page d’accueil)
Cycle : DOC → SPEC → CODE → TEST → INTÉG
Statut : DOC

1. Description et périmètre

1.1. Objectif

Le bloc imageGallery est un bloc PageBuilder qui affiche une galerie d’images avec un titre.

1.2. Utilisation principale

Section de galerie de la page d’accueil
Présentation visuelle de produits ou projets
Portfolio visuel

1.3. Périmètre concerné

Type : Object Sanity
Champs : title, images (array)
Rendu : Composant Astro ImageGallery
Grille responsive : Support mobile/desktop

2. Contrats d’entrée

2.1. Structure du bloc1/2

Entrée : Configuration du bloc imageGallery dans Sanity Studio

Structure :

{
  _type: "imageGallery",
  title: string,
  images: [image]
}

2.1. Structure du bloc2/2

Règles :

title : obligatoire, titre de la galerie
images : obligatoire, tableau d’images
Chaque image : type Sanity image

2.2. Validation

Règles de validation :

title : max 100 caractères
images : minimum 1 image, maximum 12 images
Format d’image accepté (jpg, png, webp)

3. Contrats de sortie

3.1. Données Sanity

Sortie : Bloc imageGallery dans le PageBuilder

Format : JSON avec la structure définie ci-dessus

Utilisation :

Rendu dans le composant Astro ImageGallery
Utilisation dans le PageBuilder de la page

3.2. Rendu Astro

Sortie : Composant Astro ImageGallery

Comportement :

Affichage du titre de la galerie
Affichage de la grille d’images
Grille responsive (1 colonne mobile, 4 colonnes desktop)
Optimisation des images

4. Side effects

4.1. Impact sur le rendu

Effet : Le bloc imageGallery nécessite un composant Astro spécifique

Impact :

Création du composant ImageGallery.astro
Gestion de la grille responsive
Optimisation des images

4.2. Impact sur les performances

Effet : Les images peuvent impacter fortement les performances

Impact :

Optimisation des images (format, taille)
Lazy loading des images
Responsive images
Chargement progressif

5. Erreurs et gestion

5.1. Erreurs potentielles

Erreur	Cause probable	Solution
Aucune image	Tableau `images` vide	Afficher un message d’erreur ou masquer le bloc
Image trop lourde	Image non optimisée	Optimiser l’image avant upload
Trop d’images	Plus de 12 images	Limiter à 12 images côté Sanity

5.2. Codes HTTP

Non applicable (bloc PageBuilder)

6. Checklist de validation

Avant de passer à l’étape SPEC, vérifier :

La structure du bloc est documentée
Les contrats d’entrée/sortie sont documentés
Les side effects sont identifiés
Les erreurs potentielles sont documentées

7. Approbation

Validation requise : Confirmer que la documentation du bloc imageGallery peut passer à l’étape SPEC.

8. Historique des modifications

Date	Version	Description	Auteur
2026-09-16	1.0	Création initiale	Devin