Bloc PageBuilder : imageGallery

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 bloc

Entrée : Configuration du bloc imageGallery dans Sanity Studio

Structure :

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

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