Last updated November 14, 2014. Created on January 29, 2013.
Edited by ashish_nirmohi, mherchel, clemens.tolboom, Sutharsan. Log in to edit this page.

The Picture module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints. The Picture module is a backport of the Drupal 8 solution for responsive images, and promises to provide a smooth upgrade path.

Installation

Recommended to download the latest version as usual. This version doesn't use JavaScript to detect the device width, but uses a picture tag and full media queries.

Module dependencies

  1. Breakpoints
  2. Ctools

Install and enable

  1. Place all the modules in: your sites/all/modules directory; or your sites/[my site]/modules directory.
  2. Enable the modules at: admin/modules

Configuration

1. Configure your theme

After you have all the modules enabled and ready to go, start with theme configuration. You set the breakpoints for view ports in your theme’s .info file.

Note that for Picture 2.x, you have to order your breakpoints from the "largest" (e.g. wide) to the "smallest" (e.g mobile), but keep in mind that it depends if you use min or max queries, the picture element (and the polyfill) will use the first matching source tag (reading from top to bottom).

; For Picture 1.x
breakpoints[mobile] = (min-width: 0px)
breakpoints[narrow] = (min-width: 560px)
breakpoints[wide] = (min-width: 851px)
breakpoints[tv] = only screen and (min-width: 3456px)
; For Picture 2.x
breakpoints[tv] = only screen and (min-width: 3456px)
breakpoints[wide] = (min-width: 851px)
breakpoints[narrow] = (min-width: 560px)
breakpoints[mobile] = (min-width: 0px)

2. Enable your theme

Breakpoints are only read from an .info file when the theme is enabled, so you'll need to enable your theme in /admin/appearance.

Manually refresh

To manually refresh your theme for breakpoints, go to active theme settings under /admin/appearance/settings/ACTIVE_THEME_NAME and click on the Scan this theme for breakpoints button.

3. Check that your breakpoints are loaded

Go to Configuration » Media » Breakpoints

With the breakpoints configured in your theme’s info file and the theme enabled, you will get a message

The breakpoints from theme (name) are imported and a new group is created.

You’ll see a list of the options you specified in your info file.

If you want to create another breakpoint group see Add a breakpoint group through the UI. You will need a new breakpoint group for every image style you want to be responsive. For example, if you want the image styles "thumbnail" and "medium" to be responsive, you will probably need to create two breakpoint groups, which you might call "Thumbnail" and "Medium".

4. Add new styles for breakpoints

Go to Configuration » Media » Breakpoints » Add responsive style

Next, generate a series of image styles using this quick wizard. You could create your own manually, but this is a nice shortcut.
Select any existing style for use as a template. You are going to change the style settings anyhow later on.

imagesd7-breakpoints.png

A better image style base name in this case might be "large_" so you can tell that the newly generated styles are based on the "large" image style. This is especially true if you are going to have another set of responsive images based on a different image style such as "thumbnail".

5. Configure image height and width per image style

Go to Configuration » Media » Image styles

Since you based the style on a pre-existing image set, they are all the same to start. Tweak the sizes, such as making mobile small and the wide option larger.

imagesd7-breakpointstyles.png

6. Map image styles to picture options

Go to Configuration » Media » Picture mappings

Each breakpoint group you created will result in a picture group being created and listed on this page. For each picture group, associate the breakpoints with your preset image styles.

imagesd7-map-pictures.png

7. Set Picture as display option

Go to Structure » Content types » ... » manage display

Change the format from 'Image' to 'Picture' and select the group that was created for your theme; or if you created multiple groups, choose the one that contains the desired image styles.

imagesd7-pictureoption.pngSelection_035.png

Inline images

On how to handle inline images with Ckeditor SEE: https://drupal.org/node/1983312

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

immoreel’s picture

Hey,

For Omega 3 subthemes you can use these breakpoints:

breakpoints[mobile] = (min-width: 0px)
breakpoints[narrow] = (min-width: 740px)
breakpoints[normal] = (min-width: 980px)
breakpoints[wide]   = (min-width: 1220px)

Also, if you add new breakpoints to your .info file you have to disable the theme, clear your cache, re-enable the theme and scan for breakpoints again.

Paul Broon’s picture

For an existing and quite complex Drupal 7 site (using Omega 3), it was required to make the teaser images responsive. After research and testing I ended up using the Picture module. But in my case, the mobile version was always shown. I had to add max-width to the media queries to make it work. I don't know if that's really required or just something specific with that website, but in case someone stumbles upon that, my .info file contains the following and it's working for me.

breakpoints[mobile] = (min-width: 0px AND max-width: 739px)
breakpoints[narrow] = (min-width: 740px AND max-width: 979px)
breakpoints[normal] = (min-width: 980px AND max-width: 1219px)
breakpoints[wide]   = (min-width: 1220px)
jaylotta’s picture

Breakpoints should follow CSS media query specs.

(min-width: 0px AND max-width: 739px) is an invalid CSS media query.

it should be.

(min-width: 0px) and (max-width: 739px)

Though you are correct about the behavior of the picture mappings. Without the max width specifiers, more than one image will be loaded during page rendering. This is bad and the documentation of the module should correctly specify how to configure breakpoints.

bradweikel’s picture

The reason you were always getting the mobile version is because your breakpoints are ordered from smallest to largest, and the browser will choose the first match. Had you reversed the order, you wouldn't have needed to specify a max-width.

This is noted in the documentation above.

jaylotta’s picture

Relying on the order of the breakpoints sounds brittle to me.

Thanks for updating the docs. Most people might never notice they were getting the wrong pictures.

Paul Broon’s picture

I agree with jaylotta, the ordering shouldn't be important, it adds unnecessary (and imho unwanted) hierarchy to modules' info files. Besides, this was the stock ordering when installing Omega 3.
And thanks for syntax error reporting in my media queries.

frost’s picture

I did up a few screencasts based on this page as well as the following documentation from drupal.org:

Screencasts (first ones I've done):

  1. Responsive Image Fields
  2. Responsive Images Inline
  3. Multiple Responsive Image Breakpoint groups