Responsive Images in Drupal 7

While we wait patiently for Drupal 8’s beta release, we thought it would be useful to share our process for implementing responsive images in the current version of Drupal.

What are the benefits of responsive images? In short: faster loading times and less bandwidth for mobile and tablet devices.

With the speed of most desktop machines and broadband connections, traditional optimisation of images is generally all that is required. But mobile still suffers in this arena due to (mostly) the limitation of lower end smart-devices and expensive mobile data. Also, If users have to wait around to load those images meant for desktop screen resolutions, that’s bad!

The modules that facilitate this are (with the exception of ctools) backports of core modules coming in Drupal 8.

Module Overview

Apart from some core modules, three third-party modules provide all the functionality we’ll need for basic implementation of responsive images.

Chaos Tools Suite (ctools)

https://www.drupal.org/project/ctools
We’ll be using version 7x-1.4.

A development API used by Drupal’s most popular third party modules such as Views and Panels. This module is required by both Breakpoints and Picture.

Breakpoints

https://www.drupal.org/project/breakpoints
We’ll be using version 7x-1.3. This module is dependent on CTools.

If you’ve implemented any responsive design before, you’ll no doubt be familiar with CSS breakpoints implemented via media queries. This module features:

  • breakpoints that work independently from your theme’s styles
  • generates image styles for defined breakpoints
  • provides options for mobile devices with high resolutions (i.e. Apple devices with Retina displays).
  • Allows custom grouping of breakpoints (needed for the Picture module)

Picture

https://www.drupal.org/project/picture
We’ll be using version 7x-2.7. This module is dependent on Breakpoints and CTools.

Provides a display formatter for image styles, which we’ll be using to implement our group of image breakpoints. It also has FlexSlider support (useful for Billboards).

How to

For our guide, we’ll assume you have at least some knowledge on how to install Drupal and work with its user interface. In our example, we’ll be using the latest stable version of Drupal 7 (version 7.31 at time of writing). We always recommend using Drush (Drupal shell) and will provide some command lines for ease of use - but it’s not required.

We’ll also be using our favourite responsive framework, Bootstrap (7.x-3.1-beta2) , as the base and admin theme for the guide site. There are other responsive themes available for Drupal, such as Omega and Foundation. This will make it easier to see when images should change their styles depending on various breakpoints.

We highly recommend you give Bootstrap a spin.

Step 1: Downloading and enabling CTools, Breakpoints and Picture modules

With your standard Drupal installation and Bootstrap theme installed, you’ll need to download the CTools, Breakpoints and Picture modules and place them in yours sites/all/modules folder.

Once downloaded, browse to [yoursite]/admin/modules/ and enable them:

  • Chaos tool suite > Chaos tools
  • Other > Breakpoints
  • Picture > Picture.
drush en ctools breakpoints picture -y

Step 2: Adding dummy content for testing.

We’ll be using the default Drupal content type Articles to add three pieces of dummy content to be shown on the front page.

Login and browse to [your site]/node/add/article.

Create three Articles with content for the title, body and image fields and publish them for the front page. For our example we used images that are 1170x878 pixels (Bootstrap’s default maximum container width).

 

NB: We disabled the default search, user login and navigation blocks as they won’t be needed.

By default, Articles will use the pre-defined Medium (220x220) image style in a teaser display and the Large (480x480) image style in a node display. Don’t worry about changing this now, we’ll be taking care of them later in the guide.

Step 3: Creating custom image style.

Browse to [your site]/admin/config/media/image-styles and add a new style called ‘Articles’. Once the style is created, add a ‘Scale and Crop’ effect with a width of 1170 pixels and height of 878 pixels.

Step 4: Define Breakpoints.

Before we start on this step, it is important to note that this is the most important part of this guide and is open to many different approaches. For our example we’ll be defining max-width breakpoints, but essentially any media query logic for breakpoints can be used.

Browse to [your site]/admin/config/media/breakpoints

You’ll see a set of helpful instructions, explaining how to add the breakpoints. You can add the breakpoints via this interface, or if you’re feeling brave you can add them directly to your theme’s .info file. We’ll be using the latter approach as it’s easier to version control and make changes later. Using your file browser, find your theme folder. In our case this can be found in [your-site]/sites/all/themes/bootstrap/bootstrap.info

NB: For this example, we did not create a sub-theme for Bootstrap. It is highly recommended to create a sub-theme in any other use case.

Open bootstrap.info with your text editor (we use Sublime Text) and add the following breakpoints under ‘Theme settings’:


; BREAKPOINTS
;---------------
breakpoints[mobile] = (max-width: 480px)
breakpoints[narrow] = (max-width: 780px)
breakpoints[normal] = (max-width: 1000px)
breakpoints[wide] = (max-width: 1000px)

Extra info: You can also define Multipliers for devices with high resolutions by using this example syntax:


multipliers[mobile][] = 1.5x
multipliers[mobile][] = 2x

To make things simpler, we won’t be defining these in our .info file.

Save bootstrap.info and clear your Drupal cache.

drush cc all

Go back to your browser and refresh the page or re-browse to [your-site]/admin/config/media/breakpoints

You should now see the breakpoints we defined in the bootstrap.info file are visible in the interface.

NB: The order of the breakpoints is extremely important for the Picture module to map correctly. If you’re using a mobile-first approach (min-width), your breakpoints should be ordered from largest to smallest. In our example, we are going with a desktop-first approach (max-width) and therefore our breakpoints are ordered from smallest to largest.

Step 5: Add a new group.

Select ‘Add a new group’ listed under the ‘Groups’ tab on the Breakpoints page. Create a group with the name ‘All breakpoints’, select all breakpoints available and save the group.

Step 6: adding responsive styles

Select ‘Add responsive style’ tab on the Breakpoints page. Under ‘Image style’ select the ‘Articles’ image style we created earlier. For our image style base name type ‘articles_’. Make sure all breakpoints are checked and click the ‘Create’ button.

You will be directed to the ‘Image styles’ page and by now have noticed that we have four new image styles for each of our defined breakpoints (mobile, narrow, normal and wide).

We need to edit the ‘scale and crop’ effect for each of new image styles to use the correct image sizes at our defined breakpoints.

For the benefit of this guide, we’ll be setting the image styles to be half their corresponding breakpoint width so that we can see the effect of this process easily.

Select ‘edit’ on each image style. Using our original size (1170x878 pixels), here is a quick list for editing each of the new styles:

  1. articles_breakpoints_theme_bootstrap_mobile_1x = 360x240 pixels
  2. articles_breakpoints_theme_bootstrap_narrow_1x = 640x480 pixels
  3. articles_breakpoints_theme_bootstrap_normal_1x = 800x600 pixels
  4. articles_breakpoints_theme_bootstrap_wide_1x = 1170x878 pixels.

Once complete, you can delete our original image style ‘Articles’.

Step 7: Add a Picture mapping

A picture mapping will allow us to use our set of breakpoint image styles as a display formatter for the Article content type.

Browse to [your-site]/admin/config/media/picture

‘Add’ a new picture mapping and from the ‘Breakpoint group’ list select the ‘All breakpoints’ group that we created earlier. Click ‘Continue’.

Next, we’ll need to assign each image style to its breakpoint. For the administrative title, use ‘Articles’ and then for each breakpoint select it’s partner image style (as shown in the image below). Once you’re done, click ‘Finish’.

We’re almost done!

Step 8: Assigning picture mapping to content type displays.

Now that we have all the major steps completed, we need to change the display fomatters for our Article content type to use the correct image styles and picture mapping.

Browse to [your site]/admin/structure/types/manage/article/display

For the default display, our format for the Image field must change from ‘Image’ to ‘Picture’. Then, select a responsive image mapping (click the cog icon). Since we’ve only created one mapping, it will only have ‘Articles’ available. Leave ‘Fallback image style’ as Automatic and ‘Link image to’ as Nothing and update.

Follow the same procedure for the teaser display and keep all the default options.

And that’s it! Browse to your site’s home page and test that the responsive images are working by adjusting your viewport and inspecting them with your browser dev tools. The images will resize themselves with smaller images as you viewport hits the defined breakpoints.

That concludes our guide for Drupal 7 Responsive Images. If you have any questions or comments about this guide, please leave them below. We welcome feedback!

Stay fresh and flexible,
Team MM