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:
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.
3. When viewing the “Article image” breakpoint group make sure the breakpoints are ordered correctly. First mobile, narrow and normal.
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”.
2. Assign image styles to specific breakpoints and click on Save.
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.
3. Click on the cog wheel and select “Article image” from the “Picture group” drop-down and click on Update.
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:
Then, all the way down to a thumbnail:
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
- Brilliant post by Heather James over at Acquia: Drupal How-To: Responsive or adaptive images.
If you have any questions, please leave a comment.
Just what I was looking for.
Thanks again for at good article
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!
oh IE8. 🙂
I have not tested the module in IE8 unfortunately. There is an issue (http://drupal.org/node/1982908) in the Picture project issue queue.
Thank you very much! Great thing, worked fine!
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?
Try the 7.x-1.x-dev version. 7.x-1.1 does not have wysiwyg support.
Look at this issue for more details, https://drupal.org/node/2020451#comment-7561511
Thanks Ivan, im thinking if the dev version will be okay for a production site 🙂
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?
Good question.
Have a look at the link below:
http://www.computerminds.co.uk/articles/rendering-drupal-7-fields-right-way
$node = node_load($nid);
$field = field_get_items('node', $node, 'field_name');
$output = field_view_value('node', $node, 'field_name', $field[$delta]);
I enjoyed your link, and found this gist on implementing in code: https://gist.github.com/jamiemagique/e3063fa7cb1ea163a11c
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
That’s one way of doing it. But you also need to think about retina screens.
I wonder if this could provide the needed assistance: http://responsivedesign.is/resources/javascript-jquery/foresight.js
Haven’t played with it yet, though 🙂
Thanks for the link.
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?
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.