Rendre vos images adaptatives avec le module Adaptive Image

Le but de ce tutoriel est de vous apprendre à utiliser le module Adaptive Image, dans le but de rendre vos images ..... adaptatives; c'est-à-dire que leur taille va varier en fonction de la taille de votre fenêtre.

Pour voir au mieux les effets du module, je conseille d'utiliser de très grandes images, du genre 3000*3000.

Site pour se créer des images de test : http://dummyimage.com

Ce module est d'une utilisation extrêmement simple, tellement simple que je ne voyais pas de changement lors de ma première utilisation, et tellement simple que j'ai trouvé très peu de tutoriels et vidéos sur ce module (pour la partie sur CKEditor, j'ai trouvé une vidéo youtube en parlant). Les rares tutoriels trouvés disaient tous la même chose que ce qui est écrit sur la page du module ce qui ne m'a guère aidé.

Le rendu est meilleur si votre thème est adaptatif.

Utilisation avec les styles d'images

Dans Menu d'admistration : Configuration > Média > Styles d'images éditer le style d'image qui vous intéresse.

Ajouter APRÉS tous les effets souhaités, l'effet "Adaptive" et c'est fini. (voilà où s'arrête les tutoriels que j'ai rencontré)

Vous pouvez laisser les réglages de l'effet tels quels.

Utilisation avec CKEditor

Dans un champ utilisant CKEditor, lorsque vous ajouter une image, vous avez accès à ses propriétés.

Dans l'onglet "Advanced", dans le champ "Stylesheet Classes", mettre "adaptive-image".

Votre image est désormais adaptative même si elle n'est pas gérée par un champ image et les styles d'images.

Explications

Maintenant, un peu d'explications sur ce qui se passe et sur les nombres 1382, 992, 768, 480 de l'effet "Adaptive". Explications issues de tests, elles peuvent être fausse.

Pour rendre les images adaptatives, Adaptive Image utilise la propriété (et sa valeur) CSS "max-width: 100%;". Il ajoute la classe adaptive-image à la balise img et ajoute la css suivante img.adaptive-image{max-width: 100%}.

On peut donc rendre les images adaptative avec uniquement de la CSS, pas besoin de ce module. Même si ce module permet à ceux qui n'y connaissent rien en CSS de rendre les images adaptatives et surtout l'utilisation de breakpoints, et c'est là qu'on en vient aux valeurs 1382, 992, 768, 480

Si l'on prend une image de 3000*3000 mise dans un conteneur de taille variable, disons que le conteneur fait la largeur de la fenêtre du navigateur.

• Sans aucun effet appliqué : l'image va sortir du cadre
• Avec un effet adaptive sans aucun breakpoint (aucune valeur là où il y a 1382, 992, 768, 480) : l'image va faire la taille en largeur du conteneur. Si vous changer la taille du conteneur la taille de l'image va changer dynamiquement avec.
• Avec un effet adaptive et avec un breakpoint de 800 : si la fenêtre est plus petite que 800px et qu'on l'agrandit l'image va s'adapter jusqu'à une largeur maximale de 800px.
• Avec plusieurs breakpoints, par exemple 1382, 992, 768, 480, soit W (pour width) la largeur de votre terminal :
  • si W > 1382 :  l'image va s'adapter avec une largeur maximale de 1382px
  • si 1382 > W > 992 : l'image va s'adapter avec une largeur maximale de 992px
  • si .....
  • si W inconnue : l'option "Mobile first" indique à Adaptive Image que la largeur maximale sera celle du plus petit breakpoint.