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 when the theme is 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.png
Selection_035.png

Inline images

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

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.

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.

nattyweb’s picture

Just wanted to say thank you jaylotta for pointing this syntax out; I'd followed the previous (incorrect) media query and missed your correction.

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.

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
tconnell’s picture

I've successfully set up responsive behavior for both field and inline images, works great.

I have an issue I'm struggling with:

I have an image field in a content type (a "top article" image) that is configured to use "Picture" as the display mode in manage display. I have extended the image filetype display with a number of additional fields (captions, credits, rights, etc) which we want to display under the image.

However, when "Picture" is set as the display mode for this field (thus enabling responsive breakpoint behavior) the additional fields that are intended to be displayed disappear entirely.

If we set the display mode as "Rendered file" then the additional image filetype fields display correctly, below the image (but no responsive behavior obviously).

This problem only applies to field images, inline wysywyg images are fine.

What am I doing wrong? How can we achieve responsive image fields AND display additional filetype metadata such as captions/credits etc.? Thanks...

Tom Connell
tconnell@aip.org

dietric@gmail.com’s picture

It's been a while since you posted this, but I was wondering whether you ever resolved this issue?

tconnell’s picture

Hello. No, I was unable to resolve the issue so moved on without responsive images in that context. We're porting the site to 8 anyway so hopefully we can get that up and running there with a minimum of hassle.

jkstermitz’s picture

The documentation indicates: "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"."

This doesn't make sense. I thought the whole point of a breakpoint was to switch from one size to the next, e.g., from Thumbnail to Medium depending on the screen size (more appropriate might be "mobile" "tablet" "desktop" or something like that).

Obviously I have a different style for each of those three (in this example) with appropriate dimensions aligned to the breakpoint pixel size (e.g., 415px, 960, etc.).

Why would I need a different group per breakpoint? Isn't a group a collection that aligns with the breakpoints as defined in my themes' info (or yml) file? I would think I'd have a single group, with all of the various sizes that i'm using, again with each size equivalent/aligned with a specific image style width.

I can't get anything other than mobile to work (I'm using a bootstrap subtheme), using picture 2.0 with breakpoints defined in the info file in the large-to-small order, and a single group.

jkstermitz’s picture

Something I find missing from all the Picture/Breakpoints/Image style documentation and tutorials is there is very little context to address the "why" and "how"...they all seem to focus on "what" to do (i.e., "follow the tutorial steps!"), but I don't know why I'm doing this, nor how the software works under the hood. So there's a lot of gaps in knowledge that make it very difficult to arrive at a coherent solution.

Here's what I would like to know:

1. What do the multipliers do? How do they affect the final image? How does the "upscaling" in the image styles work?

2. Why do only 1.5X and 2X multipliers show up on the form when many devices have device pixel ratio of 3X and 4X)?

3. Do I need all multipliers for every image breakpoint size? With HD laptops, HD 27 inch displays, 6000K TVs, etc., is there a "short" list of the sizes and multipliers which actually match to reality?

3. Are breakpoints driven by viewport width, and if so, how do we optimize for the actual width of the image "slot". In other words, what happens when we have a multicolumn display? I certainly don't want to send a 600px wide image to a 415px wide device for output to a 3-column display.

4. What size image (long edge) should I export from Lightroom (probably the predominant image processing tool), so that the image has maximum quality on all of the various displays and device pixel ratios.

5. Finally, I've been reading a lot about srcset and sizes lately. Should I even be using the Picture module? Given that it is core in D8 I assume it is the future-proof solution, as much as anything can be?

Hoping someone can fill in the blanks, here.