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 is 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 its 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:

• Breakpoints
• 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.

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)

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

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 drop-down, select the breakpoint group you had just created.

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).

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
• Select ‘Article image’ from the picture group drop-down.

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).

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

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

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 thedrop-downn.
• 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: Responsive images with Drupal 8!