Last updated July 26, 2014. Created on January 31, 2013.
Edited by nicobot, mordaga, ianthomas_uk, Darren Oh. Log in to edit this page.

This article is for Drupal 7.x. For Drupal 8.x see Working with breakpoints in Drupal 8.

The Breakpoints module allows you to group breakpoints together. This way other modules can use these groups. The Picture module, for example, allows you to select a breakpoint group when you select the Picture display formatter for a field. The formatter will determine the size of the image to display based on the breakpoints in the selected group.

Following these steps you can create your own groups:

Navigate to the breakpoints configurations page

Go to Configuration » Media » Breakpoints. You will notice you can add your own breakpoints on this page.

Please read this important warning before creating your first group.

Click on "Add a new group":
Selection_036.png

Configure the breakpoints group

Enter a name for the new breakpoints group and select the breakpoints to include in this group:
Selection_037.png

Save the form and your new group should show up at the top of the page. You should also see the breakpoints selected on the previous step in this group:
Selection_038.png

Warning (check update)

It is incredibly important to order the Breakpoints correctly before creating any Breakpoint groups.

  • Breakpoints need to be arranged from smallest to largest (from top to bottom). E.g. "mobile" at the top and "wide" below it.
  • If you create a Breakpoint group with the Breakpoints in the wrong order, the group becomes "locked" to the order that the Breakpoints were set in at its creation and your responsive images will not render properly.
  • If you find yourself in this situation, you should delete the broken Breakpoint group and re-create it after you've set your Breakpoints to the proper weighted order.

UPDATE: If you're using Picture 7.x-2.0, you have to arrange the breakpoints from largest to smallest.

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

Comments

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

Just a quick thank you for your work. Very nice videos and I think that by using them, I might actually be able to implement the picture and breakpoints modules! Thanks again.

osman’s picture

When I use the Picture 7.x-2.0 and Breakpoints 7.x-1.1, and arrange breakpoints from smallest to largest as suggested, I end up having the smallest breakpoint's image displayed at all screen sizes.

If I rearrange breakpoints from largest to smallest, it starts working as advertised.

I believe this is related with Picturefill.js version 2; and all examples demostrated at http://scottjehl.github.io/picturefill/ also use breakpoints from largest to smallest.

See #2275279: always displays the image for smallest breakpoint

osman