Koumbit.org

Pour un internet libre et solidaire

Comment rendre votre site (plus) adaptatif en moins de 5 minutes

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!

Ajouter un commentaire

Permanence téléphonique

☏ +1 514 907 9494
Lun: 10h à 12h
Mar/Mer: 10h à 12h et 13h à 16h
Jeu: 10h à 12h
Mon: 10AM to 12PM
Tue/Wed: 10AM to 12PM et 13AM to 16PM
Thu: 10AM to 12PM

Venez nous voir!

1883, rue Atateken,
Montréal (Québec) H2L 3L7, Canada
Veuillez noter que nos bureaux n'ont pas de stationnement attitré.
1883 Atateken Street,
Montreal, Quebec, H2L 3L7, Canada
Please note that you'll need to find on-street parking.

Écrivez-nous

Informations générales

Support technique

Pour une demande de devis, voir le formulaire à la page contact.

Nos clefs PGP

General inquiries

Technical support

For a free estimate, see the form on our contact page.

Our PGP keys

Suivez-nous

ktweb_menu_social