Add a breakpoint group through the UI | Drupal.

org

6/8/2014

Add a breakpoint group through the UI

Last updated May 23, 2014. Created by Jelle_S on January 31, 2013.
Edited by mordaga, ianthomas_uk, Darren Oh, attiks. 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":

Configure the breakpoints group

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

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:

https://drupal.org/node/1904690#warning

1/3

Add a breakpoint group through the UI | Drupal.org

6/8/2014

Warning
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.
Picture

up

Add picture groups to views

Looking for support? Visit the Drupal.org forums , or join #drupal-support in IRC.
Log in or register to post comments

Comments
Screencasts
frost commented 2 months ago
I did up a few screencasts based on this page as well as the following documentation from drupal.org:
Picture module docs
inline image instructions
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
Log in or register to post
comments

Changes in Picturefill Version 2.0.0

osman commented 10 days ago
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
Log in or register to post
https://drupal.org/node/1904690#warning

2/3

Add a breakpoint group through the UI | Drupal.org

6/8/2014

comments

https://drupal.org/node/1904690#warning

3/3