Chargement...
Chargement du test...
Test DrupalMediaImage - Mode GraphQL
1. Différents formats grid
Récupère les URLs depuis Drupal via GraphQL avec responsive activé
Grid 3x3
viewMode="grid_3x3"Grid 3x5
viewMode="grid_3x5"Grid 5x5
viewMode="grid_5x5"2. Hero Image (Grid 8x3)
3. Galerie
4. Comparaison Responsive
Sans responsive
Une seule image, pas de sources alternatives
Avec responsive
Balise picture avec sources multiples (desktop, mobile, retina)
5. Lazy Loading
Lazy (défaut)
Eager (chargement immédiat)
Informations de Debug
GraphQL Endpoint: https://back-office.jerome-bc.fr/data
Styles configurés: grid_3x3, grid_3x5, grid_5x3, grid_5x5, grid_3x8, grid_8x3 (+ variantes _mobile et _x2)
Structure GraphQL :
Chaque image récupère automatiquement 3 variantes :
- • Desktop : grid_3x3 (ex: 300x300px)
- • Mobile : grid_3x3_mobile (ex: 150x150px)
- • Retina : grid_3x3_x2 (ex: 600x600px)
📝 Instructions
- GraphQL requis: Assurez-vous que votre endpoint GraphQL Drupal est configuré dans
.env.local - IDs de médias: Les mediaId correspondent aux IDs de vos médias Drupal
- Responsive: Activez
responsive=truepour générer une balise<picture>avec les 3 variantes - Styles disponibles: grid_3x3, grid_3x5, grid_5x3, grid_5x5, grid_3x8, grid_8x3