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.
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
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
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.
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.
If you have any questions, please leave a comment.