Chargement...
Chargement du test...
Test DrupalMediaImage - Styles Grid
1. Grid 3x3 (300x300px)
Desktop: 300x300px, Mobile: 150x150px, Retina: 600x600px
Mode Statique
viewMode="grid_3x3" mode="static"Mode Dynamique
viewMode="grid_3x3" mode="dynamic"2. Grid 3x5 (300x500px)
Desktop: 300x500px, Mobile: 150x250px, Retina: 600x1000px
Format portrait 3:53. Grid 5x3 (500x300px)
Desktop: 500x300px, Mobile: 250x150px, Retina: 1000x600px
Format paysage 5:34. Grid 5x5 (500x500px)
Desktop: 500x500px, Mobile: 250x250px, Retina: 1000x1000px
5. Grid 3x8 (300x800px)
Desktop: 300x800px, Mobile: 150x400px, Retina: 600x1600px
Format portrait très allongé6. Grid 8x3 (800x300px)
Desktop: 800x300px, Mobile: 400x150px, Retina: 1600x600px
Format paysage très allongé7. Galerie (Grid 3x3)
Informations de Debug
Base URL: https://back-office.jerome-bc.fr
GraphQL Endpoint: https://back-office.jerome-bc.fr/data
Base Path: /sites/default/files/
Styles Grid configurés:
- • grid_3x3 (300x300) + mobile (150x150) + x2 (600x600)
- • grid_3x5 (300x500) + mobile (150x250) + x2 (600x1000)
- • grid_5x3 (500x300) + mobile (250x150) + x2 (1000x600)
- • grid_5x5 (500x500) + mobile (250x250) + x2 (1000x1000)
- • grid_3x8 (300x800) + mobile (150x400) + x2 (600x1600)
- • grid_8x3 (800x300) + mobile (400x150) + x2 (1600x600)
Structure <picture> générée:
- 1. <source> WebP Desktop (srcSet: 1x, 2x) - media: (min-width: 768px)
- 2. <source> JPG Desktop (srcSet: 1x, 2x) - media: (min-width: 768px)
- 3. <source> WebP Mobile (srcSet: 1x, 2x) - media: (max-width: 767px)
- 4. <source> JPG Mobile (srcSet: 1x, 2x) - media: (max-width: 767px)
- 5. <img> fallback (desktop JPG)
Exemple d'URLs générées (grid_3x3, mode statique):
- Desktop WebP 1x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3/public/2026-01/IMG_7732-1.webp
- Desktop WebP 2x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3_x2/public/2026-01/IMG_7732-1.webp
- Desktop JPG 1x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3/public/2026-01/IMG_7732-1.jpg
- Desktop JPG 2x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3_x2/public/2026-01/IMG_7732-1.jpg
- Mobile WebP 1x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3_mobile/public/2026-01/IMG_7732-1.webp
- Mobile WebP 2x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3/public/2026-01/IMG_7732-1.webp
- Mobile JPG 1x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3_mobile/public/2026-01/IMG_7732-1.jpg
- Mobile JPG 2x: https://back-office.jerome-bc.fr/sites/default/files/styles/grid_3x3/public/2026-01/IMG_7732-1.jpg
📝 Instructions
- Mode statique: Fonctionne immédiatement avec les IDs de type "2026-01/IMG_7732-1"
- Mode dynamique: Nécessite un endpoint GraphQL Drupal configuré avec les bons styles
- Responsive: Chaque image génère 4 sources (Desktop WebP, Desktop JPG, Mobile WebP, Mobile JPG)
- Retina: Chaque source a un srcSet avec 1x et 2x pour les écrans haute densité
- Breakpoint: Mobile < 768px, Desktop ≥ 768px