Des images responsive sur Drupal 8: belles sur tous les appareils

Dernière mise à jour le 6 Juin 2018
Des images responsive sur Drupal 8: belles sur tous les appareils

Quand est-ce que « plus petit » signifie « plus grand » ? Lorsque vos images deviennent plus petites pour s’adapter parfaitement à divers appareils, la satisfaction de vos utilisateurs, la couverture de l’audience, la vitesse du site et les bénéfices augmentent. Une belle formule, n’est-ce pas ? Cette capacité magique des images à s’adapter aux écrans est de savoir comment fonctionne le design web. Et cela fonctionne particulièrement bien dans la dernière version de Drupal, Drupal 8, qui prend en charge les images responsives. C’est ce dont nous allons discuter dans ce billet.

Des images responsives : Impeccables dans Drupal 8

Que signifie le support natif de Drupal 8 pour les images responsives ? En utilisant Drupal, vous remarquerez que ses thèmes intégrés sont déjà totalement responsives et sont impeccables sur tous les appareils.
Tout autre thème peut être configuré de la même manière, puisque Drupal 8 propose des outils intégrés modernes et pratiques pour une configuration d’image responsive. Jetons un coup d’œil dessus.

A lire aussi: Drupal 8: Tout ce que vous devez savoir sur les nouvelles fonctionnalités

Les outils natifs de Drupal 8 pour configurer des images responsives

Ces outils incluent les modules d’image Breakpoint (des points de rupture) et Responsive qui font désormais partie du noyau de Drupal 8. Le module Breakpoint est même activé par défaut. L’image Responsive (anciennement connue sous le nom de module d’élément d’image) doit cependant être activée manuellement.
Ensemble, ils vous permettent de configurer la sortie responsive des images sur différents périphériques en fonction de la largeur d’écran. Les images peuvent être à la fois redimensionnées et élégamment recadrées. Oubliez une bannière lourde 2000px sur un écran mobile. Ces jours sont dépassés !
Les images responsives de tailles appropriées seront affichées en fonction des Breakponts (des points d’arrêt) que vous définissez. Définir des points d’arrêt signifie choisir des largeurs de fenêtre auxquelles votre taille d’image doit changer (par exemple, min-width: 600px). Regardons brièvement le processus.

A lire aussi: Comment rendre le Backoffice plus convivial

Un aperçu du processus de configuration d’image responsive dans Drupal 8

  • Définir les points d’arrêt: Vous pouvez définir des points d’arrêt dans le fichier YAML (yourtheme.breakpoints.yml) dans le dossier de votre thème et organiser vos points d’arrêt en groupes.
  • Création des styles d’image pour les points d’arrêt: Pour chaque point d’arrêt, vous devrez créer un style d’image ici: Configuration – Média – Styles d’image. Utilisez l’effet « recadrage et échelle ».
  • Créer votre style d’image responsive: Dans Configuration – Médias – Styles d’images responsives, le bouton «Ajouter un style d’image responsive» vous aidera à regrouper tous ces styles pour créer votre style d’image responsive final.
  • Sélection du style pour votre champ: La dernière étape consiste à utiliser votre style pour votre champ d’image réel: allez dans Gérer l’affichage – Format – Image responsive et sélectionnez votre style d’image responsive. Terminé!

Retina: Quand « plus grand » signifie « plus grand » !

Dans certains cas, la capacité des images à s’agrandir est aussi importante que leur capacité à devenir plus petite. Un bon exemple sont les écrans HD / Retina qui ont une très haute résolution. Ici, c’est une bonne idée de fournir un style d’image plus grand que le double en utilisant un multiplicateur 2x dans les points d’arrêt. Et, bien sûr, la qualité de vos images originales devrait être impeccable.

A lire aussi: 5 bonnes raisons de rendre votre site web responsive design

Pour résumer

Le responsive design fait partie des nombreuses améliorations de Drupal 8. Plus d’exemples détaillés, des nouvelles fonctionnalités plus intéressantes vous attendent dans nos prochains articles pour découvrir Drupal 8 ensemble !
Et si vous avez besoin d’aide pour configurer des images responsives dans Drupal 8, ou si vous envisagez de migrer vers la dernière version de Drupal, n’hésitez pas à contacter nos développeurs. Tout va être responsive!

A Lire aussi: Comment optimiser les images de votre site web

    Téléchargement du module

    Laissez-nous votre prénom et votre adresse de courriel pour vous envoyer le module par courriel:


      Pssssst Attendez...

      Laissez nous votre meilleure adresse email et vous recevrez le premier nos prochaines publications...


        Recevoir chaque semaine notre publication en avant première.

        Rejoignez nos 153 845 fidèles lecteurs et restez informés concernant le domaine du développement web, en étant le premier à recevoir notre publication chaque semaine.