Jun 18, 2014

Responsive Images with Drupal using the Picture Module.

Use Responsive Images today, save the world (bandwidth) tomorrow.

This tutorial covers Setting up the Picture module to display responsive images on your site. You will learn how to Use the Breakpoints Module, Image Styles and the Picture Module together to add responsive images to your site.

We have been using responsive images at iBec for a couple of years now with the Picturefill Polyfill from the Filament Group, it's a great polyfill and we wanted to keep using it when we moved our development over to Drupal last fall. The Picture module used the Picturefill polyfill out of the box, so it was an easy migration for us, however the configuration and initial setup can be a bit tricky for developers who have never used the Picture module, or even the Picturefill Polyfill. This tutorial aims to make that transition a bit easier.

Notes:

  1. This tutorial covers the 2.3 version of the Picture Module running on Drupal 7.28 - (Edit 6/20/2014 - the 2.4 version fixes a bug in IE8 where images wouldn't show up, use at least this version if you plan to support IE8)
  2. The Picture Module has one dependency in order to work properly: the Breakpoints Module.
  3. The Picture Module relies on 2 modules working in concert in order to work properly. The aforementioned Breakpoints Module, and the Image Styles Module (Which is part of the Drupal Core).

What's nice about the Picture 2.xx branch is that is uses the Picturefill 2.0 polyfill, which now follows the picture spec in terms of markup convention, so the markup that is used by the polyfill is the same as the spec - when browsers start adding native support for the picture and srcset elements, your site will already be compatible. For more information about the Picture element you can go to responsiveimages.org

Note: As of yesterday (6/17/2014) the Picture Element was added to the HTML Specification

Getting Started: Installation

This tutorial assumes you have Drupal already installed and configured.
To get started, download the two modules (Picture & Breakpoints) and install & enable them both.

Determine your Breakpoints

Now that you have your modules installed, lets start by configuring your breakpoints. For the Picture module to work properly you will need to define them now. Hopefully you know your major breakpoints already, even better you have designs for 2 or more of these breakpoints. To get started Navigate to the Breakpoints settings ("admin/config/media/breakpoints")

On the main configuration screen (Groups) You will see an empty table with the following headers:

  1. Name: The name of your breakpoint (ex: small, med, large | Mobile, Tablet, Desktop) any sort of descriptor that describes where this breakpoint will be used.
  2. Breakpoint, @Media ...: Here you define your media query condition so the module can determine at what point to display a particular image. The format assumes the "@media" already so your format should follow this convention: "screen and (min-width: 0px)".
  3. Multipliers: This lets you add different sized images for different screen densities (ex: you add the ability to target the Retina Display on an iPhone by checking off the "2x" multiplier, we will cover this in an subsequent step).
  4. Source: The breakpoints module lets you add your breakpoints in a theme if you prefer to configure it that way.
  5. Status: Enable / Disabled.
  6. Operations: Disable / Delete / Export.

Next step: start adding in your breakpoints, when you are done it should look something like this:

Note: With the 2.xx version of the Picture module, you need to order your breakpoints from largest to smallest , previous versions had you arrange the order in manner in which they would be detected - if you are upgrading to Picture 2.xx from 1.xx, please be aware of this change.

Image Groups

Each responsive image (which is a collection of Image Styles) needs a group to determine which breakpoints are relevant for a particular image, now that you have determined your breakpoints you can start adding groups for each of your responsive images.

In this example we are going to display a large image at the top of a page, and we need that image to be crisp and clear from a mobile phone all the way up to a wide screen display. Since we have set up our breakpoints in the previous step, we can now add those breakpoints to a group:

  1. From the Groups screen, click on "Add a new group"
  2. Give your new group a name
  3. Select the breakpoints that are relevant to this new group.

As you can see in the screenshot below, I have selected all of the breakpoints as relevant since we want the image to retain it's fidelity across all breakpoints. If you had an instance where only two or three breakpoints would be relevant you would select only those applicable to the group you are creating.

After you have created this group, you would move onto the next one. You need to create an image group for each type of image you need a responsive style for. If you have some generic image sizes, that can behave the same across all screen sizes, you can create one generic image group to handle those images. The key here is only create groups you really need, as you may have guessed we will be creating image styles for each of these breakpoints in a group - which is our next step.

Image Styles

In this step we will create image styles. Depending on how many breakpoints you have, how many multipliers you have and how many breakpoint groups you have, you may be creating a-lot of styles. At this point I usually take a step back and create an image inventory before diving into creating image styles. I've found that by doing this, I often find duplicate sizes in different image groups that I can re-use.

Creating an image inventory: I usually run through my design files, and measure the images that have been designed already (I may not have designs for every breakpoint). I then extrapolate the remaining image sizes based on my breakpoints, and the aspect ratio of the images I do have designed. In this case I know how wide my images have to be at the maximum of any given breakpoint (except the final, largest one).

In the image below you can see the image styles I have created for the Hero image we are creating responsive images for. You can see that I have doubled the amount of breakpoints I have by creating an "@2x" version of each image so I can support high density screens such as the iPhone and iPad.

Putting your Image Styles and Breakpoints Together - the Picture Module

Up to now, we have been using the Breakpoints and Image Styles modules, in this step we will actually cover how to create the responsive images we've been working toward. To finalize your Responsive Image style, find your way to the picture module settings ("admin/config/media/picture"). This is where you associate the Breakpoints group(s) you created with the Image Styles you created.

Click "Add", and on the next screen select your previously created breakpoint group and click "Continue":

Give your Picture Mapping a name, in this case: Hero Image. Then you can start associating your image styles with the breakpoints you created. Go through each breakpoint, and choose the "Use Image Styles" - you can then choose the appropriate image style for each of the breakpoints. If you forgot an image style, or decide you do not want to use one, that's cool, just leave the "Do not use this breakpoint" radio button selected, and it won't be used on the front end. See the image below for an example:

We did it, we successfully created a responsive image set using the picture module, but we aren't done yet. We need to tell Drupal to use the responsive image when the image is displayed on the front end of the website.

Show me the images!

You can display your responsive image style in a couple of different ways:

  • In the Manage Display Setting of a content type
  • In Views

Each use a similar process and I will cover both here.

Displaying a responsive image using "Manage Display" in the content type settings. Navigate to your content types, and click on the "Manage Display" setting for a content type that has an image field you would like to configure with a responsive image style.

In the "Format" column for the image field, you will see that "Image" is currently selected, click on the select box and change it to "Picture", then click on the settings icon that appears on the right side of row. Choose the Picure mapping that you created for this field, choose a fallback image style if necessary (Older browsers that don't support the JS polyfill will receive the fallback image) and whether or not you want the image to link to the content. Click update and then visit a page on the front end that uses that content type to see your responsive image style in action.

Displaying a responsive image using Views. The process for views is nearly identical to the "Manage Display" method. First you need to have an image field in your view. Then edit the field, and you will see settings for the image that look similar to the "Manage Display" setting, change the formatter from "Image" to "Picture" and configure your responsive image in the same way you did with "Manage Display".

Wrap up

So, we covered the basics of setting up the Picture module and getting your site up and running with responsive images. There are more aspects to each of the different modules that I will go over in future posts. The trickiest part of the Picture module is learning about how the Picture module, Image Styles and the Breakpoints module all work together to create responsive images you can use today. Hopefully this tutorial help out with that.

Here are some examples of sites we've built at iBec Creative using the Picture module: