Koumbit.org

For freedom and solidarity online

How to make your site (more) responsive in under 5 minutes

We've all figured out by now that the future of the web is for the sites we build to be accessible on as wide a variety of platforms as possible. The magic of responsive design means that one single web page can be viewed on a large range of devices. All of this works very well when we have the time to build our site from the ground up with this in mind, but how can an existing site be adapted to be more responsive? In particular, it's relatively easy to get Drupal to render image fields differently for different screen sizes, but how can existing IMG tags in inline content be displayed at different sizes, and how can a user place images on the page with a WYSIWYG editor without using separate image fields and still have them display correctly? Fortunately, there's an easy answer to this.

While there are several modules that manage image fields (in no particular order, they include Client-side adaptive image, Adaptive Image, Responsive images and styles, and Picture, which is a backport of a Drupal 8 core module), the module Adaptive Image Styles (AIS) does this while also integrating with the WYSIWYG module and handling inline images. Each of these modules has their various strengths and weaknesses; for example, AIS requires you to modify .htaccess to rewrite image paths (the maintainers also provide instructions for use with nginx). But if you want to handle inline images, AIS is probably the simplest.

Once the module is installed and your webserver correctly configured, AIS will make any image with the class "responsive" resize to fit the current screen, using breakpoints configured in the module's administration options. The only thing left to do is to add this class to your image tags. For that, I wrote a patch which defines an input filter that you can add to your text formats. Apply the patch, add the filter to the necessary text formats, and like magic all your images will be resized when necessary! (Make sure you configure this to run after any other input filters.) It's really that easy. Enjoy your newly responsive website!

Add new comment

Call us

☏ +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

Come and See Us!

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.

Write to Us

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

Follow Us

ktweb_menu_social