Accueil / Drupal How-To: Responsive or adaptive images

Drupal How-To: Responsive or adaptive images

In this 3 part Drupal How to series, I'm going to show you how various options for configuring images on your site. In Part 1, we looked at how to tweak the default image options. In Part 2, we saw ways to allow inline images.

In this post, I’ll discuss the various options for responsive/adaptive images on your site. Though I’m writing for beginners to Drupal, I assume you’re aware of responsive design and of course you’ve read my first two blog posts so you also understand how Drupal handles images. If you’re not sure, check out this info to start:

The image problem

Creating any website is an obstacle course, but taking the responsive route means you’ll run into a few tricky turns: tables, grids, images are pose problems when you try to use the same content across different browser widths.

Images pose the biggest problem because not only does a image need to resize, in some cases you need a totally different proportion, and of course, you don’t want to serve up a large desktop-sharp image to a 320px mobile device over a 3g connection. Also, the size of the image isn’t neccessarily related to the width of the device, but the container around it.

Below, I’ve made an illustration of the image problem with an example 3 column website with a wide lead image. You can see how you could compromise somewhat on the images across your desktop, laptop and tablet. Perhaps you could use CSS to resize the images where there is only a small difference. Media queries check the dimensions of the browser window, and allow you to set CSS specific to that browser width. However, for mobile device, a different crop of an image would be more suitable.

Responsive images problem illustrated

It’s bleeding-edgy

Any solution for so-called fluid images, responsive images or adaptive images right now is going to be a bleeding-edge case. That means it’s likely to be fragile and need tweaking and updates. Here’s a good round up of related articles on the topic.

The Responsive Images Community Group has proposed the new <picture> element as a solution http://responsiveimages.org/ This would allow the markup to specify multiple image sources, and display the appropriate one based on specific browser widths, and then rely on a “fallback” in any other case. The proposed markup would look something like this:

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="/fr/large.jpg">
   <source media="(min-width: 18em)" src="/fr/med.jpg">
   <source src="/fr/small.jpg">
   <img src="/fr/small.jpg" alt="">
   <p>Accessible text</p>
</picture>

The proposal has been in development since last year, though it was only decided in October 2012 to postpone work to get it into the official HTML 5 specification. The proposal is a “living document” with frequent updates and changes. http://picture.responsiveimages.org/

Because no browsers can render the proposed new picture element, solutions are cropping up to solve the problem with JavaScript. See for example the jQuery Picture script. http://jquerypicture.com/ In that case you wrap a fallback image in a <noscript> element. This degrades nicely for older browsers.

So what are the options?

There are lots of quick hacks you can use. For our Movember page, we whipped up a scalable vector image (SVG) and used CSS to resize it depending on the browser width. But that isn’t going to work in many cases where you need a specifically different image.

Evan Scheingross has a good demo of Evan Marcotte’s recommendation to dynamically resize an image based on a proportion of the browser width. (Marcotte is credited with laying the foundation for ‘responsive’ design in 2010). However, as shown in the diagram above, a tablet in portrait mode with a single column may have more space available than a laptop with sidebars.

A good solution is to use server-side resizing and caching of images so you can serve up the appropriate image size as needed.

Fluid, Adaptive or Responsive image solutions in Drupal

Responsive themes, such as the Zen theme do take care of a certain amount of image sizing for your site applying CSS based on media queries, taking care of backward compatibility very elegantly. You’ll need to choose a module however to give you the options for controlling what images display and when- particularly in the case you detect a small browser width and want to display a lower resolution and smaller file size.

At the bleeding edge of design in Drupal - you’ll see a bunch of new modules pop up proposing slightly different solutions. Over time, the community has been really good about standardizing on 1 or 2 solutions, making it easier for maintainers, and also users.

Right now, the situation is so volatile with responsive images, there are a several equally good and popular solutions, each with their own caveats. There are two potential solutions: solve the image resizing on the server side or on the client side as markup. Even in the case that you use markup as the solution, you still need those alternative images available for display. However, the wider web design community doesn’t neccessarily agree that either is the right solution.

The Adaptive images script by Matt Wilcox takes care of image resizing on the server side. A screencast explains: http://vimeo.com/38947881 This is a PHP script which resizes and caches the images, and directs the server to hand out the right image to your viewer. It aims to work “right out of the box”. This is overwhelmingly the most popular solution up until now, with two modules leading the pack:

If we judged by popularity alone, we’d assume either of these Adaptive images was the best solution. However, there are alternative modules which give you control when you manage display of an image field on a content type. I've chosen not to list all the options here because two seem to have taken the lead.

Drupal 8 is forming a clear path with the Picture module. That is already part of Drupal 8 and has been backported to Drupal 7. Though there are few sites using this module now, you can expect to see many improvements coming soon, and more sites adopting it.

I drafted this blog post about 2 weeks ago, when I contributed documentation to the Picture module. I backtracked after realizing I had to cover some basics first (in Parts 1 and 2). In the meantime, Chris Ruppel at Four Kitchens has written up a blog post about this very situation. Responsive images: A Drupal solution.

How the Picture module works:

  1. Check out a demo for the Drupal 7 Picture module http://atix.be/Zke. Inspect the source to see the markup provided.
  2. First you specify breakpoints in your theme. This defines at which widths you want to offer alternative images. The Picture module reads the configuration from your theme's .info file.
  3. Configure custom image styles if needed. Picture module provides a wizard to help you create the styles, but you'll need to set the widths.
  4. Map the image styles and set the display options for the image field. Picture provides an alternative to the "Image" display formatter for image fields. For me, that was the only tricky step.
    Picture display formatter

Read the complete tutorial on Drupal.org for the full step-by-step you need to set this up:http://drupal.org/node/1902264 I recommend combining the Picture module with a responsive theme such as Zen.

But is it future-proof??

I always have to be really careful about what we include in our training materials. We have to recommend reliable, stable modules and trusted solutions. Right now, the Picture module seems the most future-proof solution as its inclusion in Drupal 8 (hopefully) means a smooth upgrade. Can I guarantee that a better solution won't come up in a few months? Well... not really.

I’m always wary when I ask my colleagues for reports about what is happening “in the field”, and they come up with as many responses as people I ask. My colleagues on the Acquia Professional Services team work with some of the largest brands and organizations and advanced teams of designers and developers. They see a cross-section of solutions which actually work in practice. And right now, all of my colleagues admitted they aren’t seeing a lot of brands choose a responsive or adaptive image solution.

That doesn’t mean you shouldn’t try it however. It’s great to see established brands such as The Boston Globe leading the charge, and there’s no reason you can’t attempt it if you think it’s going to enhance your user’s experience.

Don't forget to sign up for my training newsletter and check out our Drupal training events across the globe.

Commentaires

Posted on by Neil (non vérifié).

Thank you for this article. I'm getting to grips with responsive design using Zen 5, and I'll now try the Picture module. However, I notice that the Picture module depends on the Breakpoints module, which requires that breakpoints be set in the .info file.

Could you tell me how setting breakpoints in .info relates to media queries in CSS?

Posted on by heather.

Hello Neil!

The Breakpoints you set in the .info file define the measurements used for the media queries. With Media queries you can set specific CSS for media types such as screen or print. Then you can set CSS for media features such as "width".

The Breakpoints module used the word "breakpoint" to clarify that you can only define widths, as far as I know. But the module could have been called "Media Query Width Feature Setting Module" and it would have been correct, but hard to remember.

The magic of the Picture module happens with JavaScript which checks the width of the browser, and then loads and displays the appropriate image. If there is no JavaScript enabled, the "fallback" option appears in the "no script" tag.

You should probably give the Picture module a go, and check out the Markup that gets generated. You'll notice that there are span tags with special attributes prefixed by "data-". This hides the sources from your browser until the script is prompted to display the different image.

But yeah, try out the Picture module and check out the markup.

Here's a screenshot of the markup:
http://www.evernote.com/sh ard/s22/sh/f8031dc5-b6d3-4d13-a76d-c2ca3b7bb24...

Posted on by Navid Emami.

Recently i configured Responsive Images and Styles with Omega in one of my projects and it works well for displaying single image in different content types, but not in galleries. I haven't tried Picture yet but it seems to be a robust replacement for responsive images in drupal.

Posted on by John Murphy (non vérifié).

Images play an important role for making a website popular among people. However, the image size plays an important role, as well. The best part of Drupal is that it helps you to resize the image according the website's need.

Posted on by Naushad (non vérifié).

Thanks for the tutorial, i was able to get this working. However. I have the image field "Hidden" as i need to display images Inline and used the same image via Wysiwyg CK Editor and this effect applies only on the Image Field and not the image directly. How can we make it to apply on image within body content?

Posted on by Dori (non vérifié).

Hi Heather,

I have picture working with breakpoints for wide, normal and narrow. But what to do about mobile? There isn't a good way to detect a size smaller than narrow, and these images can often be larger on a smartphone to fill the screen than they can in a column on a tablet. So how do you make the image fluid below the narrow breakpoint?

Thanks!

Posted on by Rémi Pigeyre.

Hi Heather
More than one year later, is there anything new on the subject?
The 4 modules you mentioned are still in active development, but the last dev version came out between sept 2013 and Nov 2013. Does it mean they came to a stable state of development ?
Did any of them appear to be better than others ?
Thanks for any opinion or advice.

Posted on by Rémi Pigeyre.

Well, I just found that :
https: //www.acquia.com/blog/using-adaptive-images-drupal (Mar 04, 2014)

The author points Picture as the "best one" (but it seems it is based on screen size and not browser size ?) + Borealis (not mentioned here)
Responsive Images and Styles seems to be a good choice as well.

If anyone has other experience or more to say about it ...
Thanks.

Ajouter un commentaire

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • Pour publier des morceaux de code, entourez-les avec les balises <code>...</code>. Pour du PHP, utilisez. <?php ... ?>, ce qui va colorier le code en fonction de sa syntaxe.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
By submitting this form, you accept the Mollom privacy policy.