Picture Module: Building Responsive Images in Drupal 7

In 2017, 77% of Americans own a smartphone, a phenomenal increase from just 35% in 2011 (source: Pew Research Center Mobile Fact Sheet). And we are not just talking about a single screen size here! There are a multitude of screen sizes to consider from different versions of iPhones, android. And outside of smartphones, you probably want to consider iPads, tablets, desktops, tvs, to name a few.
And with the abundance of screen sizes to consider comes a challenge among others -- responsive images, providing an image that looks good all throughout different screen sizes.

This blog post will walk you through an easy and detailed process of making your images responsive using two Drupal modules: Picture and Breakpoints.

Before getting started...

Before we dive into the setup and the Drupal module, we need to clarify a few terms. Those terms are common words used in responsive web development.

“Breakpoint”: A certain point in your screen at which your layout changes. This usually represents the different category of devices you are targeting. For example: 

- 0px to 320px = one column layout for smartphones.

- 768px to 1024px= two column layout, for tablets.

- > 1024px = 3 column layout, for desktops.

“Image styles”: In Drupal, Image styles are modifications that you apply to the content’s images. You can scale, crop, resize, rotate and desaturate images without affecting the original image. The image will fit into your webpage and devices.

“Picture mapping”: This is the way we associate a breakpoint to an image style. You can have different images styles for different breakpoints. You want to display small images on smartphones, and large images on desktop. This is what picture mapping is about.

Picture Module

This blog article is based on Picture module version 2.x for Drupal 7.

Requirements:

- Breakpoints module and Chaos tools. This is a dependency of the Picture module. Don’t panic, everything will be explained.

- PHP GD Library. You probably don’t have to do anything to enable this library. GD is included with PHP 4.3 and higher and usually enabled by default. GD is a required extension in Drupal 7 and later (More information).

Step 1. Download and enable picture module and breakpoint module.

Using Drush

Drush is a fantastic tool to interact with Drupal and work faster. You can learn more on this article: Drush Made Simple

Download and install the picture module and it’s dependencies by running the following commands in your terminal.
Starting with dependencies:
$ drush dl breakpoints
$ drush dl ctools


Then download and enable the picture module. It will automatically enable the dependencies.
$ drush dl picture
$ drush en picture -y
 

Without Drush

If you are not using Drush:
Download the picture module and breakpoints module manually at  ADD CTOOLS: https://www.drupal.org/project/breakpoints and https://www.drupal.org/project/picture.

Make sure to place the modules at sites/all/modules/contrib.

Enable the modules in the UI at admin/modules.

Step 2. Configure breakpoint for the picture module

After the picture module and it’s dependencies had been downloaded and enabled, go to Configuration » Media then click breakpoints. We will add our custom breakpoint. Screen Shot 2015-04-06 at 12.41.43 PM.png

We set the smallest breakpoint to 0px minimum to ensure that we can accommodate arbitrarily small screen sizes.

- (min-width: 0px)

- (min-width: 480px)

- (min-width: 960px)

Once the breakpoints had been entered, we should see the page similar below.

Screen Shot 2017-08-02 at 4.20.57 PM.png

2. After breakpoints had been set, click on ‘add new group’. Enter a name in the ‘Group name’ field base on it’s purpose. For this tutorial, we will call our group ‘Article image.’  Select all the breakpoints then click ‘Save’.

Screen Shot 2016-06-03 at 1.23.15 PM.png

Step 3. Configure picture module


We have just configured three breakpoints, next we will be assigning image styles to these breakpoints.

In the toolbar go to Admin > Configuration > Media> Picture (admin/config/media/picture) and click ‘add’ and from the breakpoint group dropdown, select the breakpoint group you had just created.

Screen Shot 2017-08-02 at 3.29.37 PM.png

 

Screen Shot 2017-08-02 at 3.32.22 PM.png

Next we are going to assign image styles to each of our breakpoints in our breakpoint group. By default there are image styles ready for use but you can also create your own at Configuration > Media (config/media/image-styles).

Screen Shot 2017-08-02 at 3.39.16 PM.png

 

Screen Shot 2017-08-02 at 3.39.34 PM.png

 

Screen Shot 2017-08-02 at 3.41.07 PM.png

Step 4. Configure field formatter in content types.

Go to Structure > Content types (admin/structure/content/types).
Click on ‘Articles’ then click on ‘Manage display’ tab.
Select the picture formatter from the dropdown

Screen Shot 2017-08-02 at 3.44.54 PM.png

Select ‘Article image’ from the picture group dropdown.

Screen Shot 2017-08-02 at 3.46.38 PM.png

 

Step 5. Test to be sure your picture mapping works!


Check if the formatter works by creating a piece of content with an image. The image should go from large to small as you resize your browser’s window. 

The result?

On desktop, image size is 844px by 620px in browser resolution (min-width: 960px).

Screen Shot 2017-08-02 at 4.58.47 PM.png

Screen Shot 2017-08-02 at 5.01.11 PM.png

On a tablet, image size is 480px by 353px in browser resolution starting (min-width: 480px).

Screen Shot 2017-08-02 at 4.24.04 PM.png

Screen Shot 2017-08-02 at 5.03.55 PM.png

On mobile, image size is 240px by 176px in a browser resolution (min-width: 0px).

Screen Shot 2017-08-02 at 4.26.52 PM.png

 

Screen Shot 2017-08-02 at 5.04.48 PM.png

Recap: How to Build Responsive Images in Drupal 7


We addressed the challenge of providing an image that looks good all throughout different screen sizes with the help of two Drupal modules: Picture and Breakpoints. 

- Create image styles at Administration > Media > Image styles (config/media/image-styles).

- Define breakpoints at Administration > Configuration > Media > Breakpoints (admin/config/media/breakpoints).

- Assigned image styles to specific breakpoints at Administration > Configuration > Media > Picture Mapping (admin/config/media/picture_mapping)

- Go to your content type, and in manage display for the image field, and choose ‘picture’ in the dropdown.

- To test, create a test content with an image for that content type. Your image should go from large to small as you resize your browser’s window.


Next: Tune in for responsive images with Drupal 8!