Drupal 10 : Responsive design
Comment déclarer des points de rupture pour vos images sur mobile ou desktop.
Cet article a été initialement rédigé pour Drupal 8 mais son contenu est toujours d'actualité pour Drupal 9 et Drupal 10.
N'hésitez pas à nous contacter ou à vous inscrire à notre formation «Drupal pour les développeurs et développeuses» pour en savoir plus !
La pratique du design responsive est petit à petit entrain de s’imposer sur tous les projets. Le responsive vient avec la notion de Breakpoint. Drupal permet une fois le module du cœur Breakpoint activé, de créer ces derniers. Il n’existe pas d’interface pour cela, c’est à chaque module de déclarer ses Breakpoints dans un fichier <module>.breakpoints.yml.
Les Breakpoints sont composés de :
- un label,
- une media query,
- un poids,
- un coefficient multiplicateur (utile pour gérer la densité des écrans).
Vous aurez probablement besoin de les grouper dans un fichier <module>.breakpoint_group.yml (voir documentation).
Oui mais voilà… créer les Breakpoints ne vous avance pas beaucoup. Ils ne sont pas intégrés à vos CSS automagiquement, vous aurez toujours à écrire vos media queries avec les dimensions qui vous intéressent sans pouvoir les récupérer depuis votre interface Drupal.
Pour que ce module prenne de l’intérêt il faut l’activer avec le module du cœur Responsive Image qui expose un formateur de champ ainsi qu’un plugin de champ pour Views. Chacun d’eux vous laissera choisir quel style d’image utiliser en fonction du Breakpoint d’un groupe pris en compte lors de l’affichage de votre page. Idéal pour gérer des formats d’image différents (ou pas d’image du tout) selon les cas.
Cela se base sur l’utilisation du tag HTML 5 picture et de picturefill.js pour gérer la compatibilité descendante.
Si vous voulez découvrir les options avancées du module, vous pouvez (tenter) de visionner cette vidéo d’attiks. Courage, sa voix n’est pas des plus entraînantes.
Liens intéressants
- http://running-on-drupal8.co.uk/article/drupal8-responsive-breakpoints
- http://x-team.com/2015/04/deep-dive-anatomy-drupal-8-theming/
- http://thinkshout.com/blog/2014/07/responsive-images-in-drupal-with-the-picture-module/
- http://d8.sqndr.com/breakpoint-images/breakpoints.html
- Utilisation des breakpoints : https://www.drupal.org/documentation/modules/breakpoint
- Utilisation des images responsives : https://www.drupal.org/node/2475903
Votre commentaire
À propos de Julien
Co-fondateur - Scrum master & Expert technique
Utilisateur de Drupal depuis 2008, j’ai fait mes armes comme développeur chez Commerce Guys puis me suis mis à encadrer les nouveaux arrivants avant de donner des formations, participer aux avant ventes et accompagner les équipes au passage à Scrum.
Je suis impliqué dans la communauté française de Drupal depuis 2009, j’ai été tour à tour président puis vice-président de l’association Drupal France et francophonie entre 2011 et 2013.