Comment rendre votre site (plus) adaptatif en moins de 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!