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.

Comments

frost’s picture

frost commented

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

www.indytech.ie
A Pint of Drupal

BeachsidePaul’s picture

BeachsidePaul commented

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

osman
Location San Francisco, CA
commented

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

jkstermitz’s picture

jkstermitz commented

I did what the documentation says not to do: loaded a breakpoint set with the order smallest to largest (I found out later that 2.0 requires largest to smallest). This was loaded by my theme .info file. The documentation says if you do it wrong it gets "locked" in....and you must delete it.

However, I cannot delete the theme-loaded group (there is no "delete" link at the bottom as appears in the above screen grab). If I manually create a group I can delete that.

Has anyone a remedy for deleting a theme-loaded group?