Nous avons tous compris que l'avenir de l'internet est de rendre les sites que nous construisons le plus accessible possible sur une grande variété de plates-formes. La magie du design adaptatif est qu'une seule page web peut être consultée sur une large gamme d'appareils. Tout cela fonctionne très bien quand nous avons le temps de construire notre site à partir de zéro dans cet esprit, mais comment adapter un site existant pour être plus flexible ? En particulier, il est relativement facile de configurer Drupal pour rendre les champs d'images différemment pour différentes tailles d'écran, mais comment adapter les balises IMG existantes dans le contenu pour être affichées à des tailles différentes, et comment laisser un utilisateur placer des images sur la page avec un éditeur WYSIWYG sans utiliser des champs d'image distincts ? Heureusement, il y a une réponse facile à cette question.

Bien qu'il existe plusieurs modules qui gèrent les champs de l'image ( dans aucun ordre particulier, Client-side adaptive image, Adaptive Image, Responsive images and styles, et Picture, un « backport » d'un module du noyau de Drupal 8), le module Adaptive Image Styles (AIS) le fait tout en intégrant avec le module WYSIWYG et la manipulation des images inline. Chacun de ces modules a ses points forts et ses points faibles; par exemple, AIS vous oblige à modifier htaccess pour réécrire les chemins de l'image (il inclut également des instructions pour nginx). Mais si vous voulez gérer les images en ligne, AIS est probablement le plus simple.

Une fois le module installé et configuré correctement votre serveur, AIS redimensionne les images avec la classe CSS "responsive" pour s'adapter à l'écran actuel, en utilisant des « breakpoints » configurés dans les options d'administration du module. La seule chose qui reste à faire est d'ajouter cette classe à toutes vos balises IMG. Pour cela, j'ai écrit un patch qui définit un filtre d'entrée que vous pouvez ajouter à vos formats de texte. Appliquez le patch, ajoutez le filtre aux formats de texte nécessaires, et comme par magie toutes vos images seront redimensionnées au besoin ! (Assurez-vous que vous configurez ce à rouler après tous les autres filtres d'entrée.) C'est vraiment aussi simple que cela. Profitez de votre nouveau site adaptatif!