Get paid to write Drupal tutorials on WebWash

Handle Responsive Images Using Picture Module In Drupal 7

This tutorial was written for Picture 1.x.

There are a lot of techniques available on handling responsive images. You could simply resize the image using CSS. This is the easiest technique but the user will have to download the full “desktop” version of an image. Or you could display a resized version depending on the screen size. This technique saves the user from wasting bandwidth downloading large images over their 3G connection.

In Drupal, there are a few modules that offer responsive image functionality, but today I want to talk about the Picture module.

Side note: Both the Picture and Breakpoints module are part of Drupal 8 core. The Drupal 7 version of the modules are backports.

The Picture allows you to define different image styles for specific screen sizes (breakpoints), and you define the breakpoints using the Breakpoints module.

In this tutorial, I’ll show you how to make images displayed from the Image field responsive.

Getting Start

Before we can begin, download and install the Picture, Breakpoints and Ctools module.

If you use Drush, run the following command:

$ drush dl picture breakpoints ctools
$ drush en picture

I recommend that you use a responsive theme instead of the default Bartik. For this tutorial, I’ll use the Omega (7.x-3.1) theme, but you can use any responsive theme.

Step 1: Breakpoints Module

First, we need to configure some breakpoints for the Picture module.

1. Go to Configuration -> Breakpoints and enter in the breakpoints using the values defined in Table 1.0.

Table 1-0. Create breakpoints

Name Value
mobile (min-width: 0px)
narrow (min-width: 740px)
normal (min-width: 980px)

Click on Save for a new row to appear.

Once the breakpoints have been entered the page should look like the image below:

Fig 1.0

It’s important to note that the breakpoint min-width will vary depending on how you setup your @media queries within your theme.

2. Click on the “Add a new group” link, enter “Article image” into the “Group name” field, select all the breakpoints and click on Save.

Fig 1.1

3. When viewing the “Article image” breakpoint group make sure the breakpoints are ordered correctly. First mobile, narrow and normal.

Fig 1.2

Step 2: Picture Module

In the section above we configured three breakpoints, now we’ll assign image styles to those breakpoints.

1. Go to Configuration -> Picture and click on “Article image”.

Fig 1.3

2. Assign image styles to specific breakpoints and click on Save.

Fig 1.4

Step 3: Configure Field Formatter

The last bit of work we need to do is configure the Image field to use the Picture formatter.

1. Go to Structure -> “Content types” and click on the “manage display” link within the Article row.

2. Select the Picture formatter from the Format drop-down list.

Fig 1.5

3. Click on the cog wheel and select “Article image” from the “Picture group” drop-down and click on Update.

Fig 1.6

4. Save the whole page by clicking on Save.

Test Formatter

Now go and create a piece of content and see if the images are responsive.

The image should go from large:

Fig 1.7

Then, all the way down to a thumbnail:

Fig 1.9

As I said earlier, there are a lot modules floating on drupal.org that offer similar responsive image functionality. If Picture does not work well for you look at Client-side adaptive image, Responsive images and styles, Adaptive Image Styles (ais) or Adaptive Image.

Further resources

If you have any questions, please leave a comment.

About the Author

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Leave a Reply 16 comments

Tommy Styrbæk - April 23, 2013 Reply

Just what I was looking for.
Thanks again for at good article

Neil - May 9, 2013 Reply

I’ve got it working in everything but IE8 – Did you encounter similar problems? I thought it may of been a case of HTML5 figure throwing it for a loop, but I’ve got the latest version of HTML5shiv installed. Any ideas?

Much appreciated!

Michael Hartl - May 25, 2013 Reply

Thank you very much! Great thing, worked fine!

Naushad - August 5, 2013 Reply

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?

Craig - August 8, 2013 Reply

The picture module has been working great so far. One thing I’ve yet to figure out though is how to programmatically render a “Picture” from code. I have access to the image field on the node object but not quite sure how to render it.

Any suggestions?

Colin Watson - May 9, 2014 Reply

Nice write-up Ivan πŸ™‚

My one (& ongoing) dilemma is: as devices get better and better resolution, should they be served an image with a lower resolution than for a desktop?

Do you have any thoughts on this? πŸ™‚

Thanks

    Ivan Zugec - May 10, 2014 Reply

    That’s one way of doing it. But you also need to think about retina screens.

Colin Watson - May 9, 2014 Reply

I wonder if this could provide the needed assistance: http://responsivedesign.is/resources/javascript-jquery/foresight.js

Haven’t played with it yet, though πŸ™‚

    Ivan Zugec - May 10, 2014 Reply

    Thanks for the link.

Omar - September 7, 2014 Reply

Hi, I have a problem. I use picture module v1.1 to show a reponsive slideshow with views (views slideshow), and it was fine, but then I upgrade it to 2.7. The slideshow only show the title and subtitle, but not show the image. I go to my views and the image field is in your place but not show nothing. I had to return to picture 1.1 to show the image. Why it happend?

    Ivan Zugec - September 7, 2014 Reply

    Upgrading is always a tricky thing. Look out for PHP errors and look in the Picture issue queue and see if others have had the same problem.

Leave a Reply: