cool tech graphics

Drupal 7 Tutorial: Using Breakpoint Panels

This tutorial is obsolete for the new version of Breakpoint Panels - New tutorial to come

Breakpoint Panels is a new module just released that allows you to specify which panels show in which breakpoints. It integrates with the Breakpoint module, Panels, and specifically the Panels In-Place Editor. In this post, we'll walk through how to use it.

1. Requirements

There are a few Drupal requirements to get it going, including Breakpoints, Panels, Panels In-Place Editor (Included with Panels), and Libraries. Once those are in place, download the JavaScript libraries enquire.js and mediaMatch.js and put them in your libraries folder. Enquire.js allows JavaScript to use breakpoints and react when they are activated via a resize. MediaMatch.js is a polyfill to make this work on IE. For a bonus, use the font-awesome library.

2. Breakpoints

Once everything has been installed and enabled, it's time to set up your breakpoints. For this example I've chosen 4 breakpoints and named them Mobile, Tablet, Desktop, and Big Screen. I chose to explicitly specify the end and beginning for the middle two.

3. Select the Breakpoint Panel Style

Now that the breakpoints are set up, go to one of our panel pages and select "Customize this page" to open the in-place editor and change the style to Breakpoint Panel.

4. Choose Your Breakpionts

Select which breakpoints you want the panel to show on. They're all checked by default. You'll see in the second image that it has added a label that says "Hidden from Mobile" and "Hidden From Tablet".

5. Configure your options

Breakpoint Panels has three configuration options:

Load Hidden For Admins (Recommended)
This forces the loading of all content, although it still may be hidden by CSS. This is recommended so that admins can play with the responsiveness without having to reload each page at every breakpoint.

Load Hidden
This forces the loading of all content, although it still may be hidden by CSS. This setting is good if you need to show off your responsiveness while not logged in or only have a few hidden panels that won't affect performance too much.

Auto Reload
This forces a reload of the page any time a breakpoint is reached to ensure that the proper content is shown. This is a better alternative to Load Hidden if your site has many hidden panels.

6. Toggle Responsive

By default, when you open the In-Place Editor it shows all content, regardless of breakpoints. Breakpoint Panels adds a button to the In-Place Editor named "Toggle Responsive". When this is clicked, it hides the panels that would normally be hidden at those breakpoints. This allows you to toggle between seeing all content and the content for the particular breakpoint. While toggled, resizing the browser will hide and show the content depending on the breakpoints.


If you install the font-awesome font library, the button will have a cool eye icon (eyecon?).

That's all you need to have different content at different breakpoints. If you have any questions, please leave a comment. If you find any bugs, please report it on the module issue page.

Date posted: December 21, 2012


Is this functionality similar to what will be included in Drupal 8 - and will there be an upgrade path for D8, when it arrives?

I really hope that D8 has this kind of flexibility in its layouts, but I think that it may be too early to tell. As far as upgrade path, Breakpoints is being moved to core, so that part will be easy enough, but we'll likely have to wait for a stable Panels D8 version before we could fully release a D8 version of Breakpoint Panels.

I opened a feature request but thought I'd also post it here...

I've been considering something along these lines for a project I'm about to start so thought I would jump in here to see if there can be any synergy.

One of the limitations with the current approach is that if you lose the ability to use other pane styles simply to set breakpoints for show/hide. What about making this module apply breakpoint settings to all existing pane (and region) styles? That would allow contributors to choose any style they want and still have the breakpoint settings.

What I've done is extended this module to add a new style that has more options, but this would be a much better approach. I'll look into it!

can breakpoint panel cover whole page

This looks a great module, however... I keep hearing/reading that panels are essentially obsolete as of D7 - any comments?

I keep hearing that, too. Three thoughts on that:

1) I built this using the Breakpoint module that will be going into core in 8. This will hopefully give me a big head start on upgrading the module for Drupal 8, modified of course for whatever replaces panels.

2) Drupal 8 is a ways out still and even when it drops, we'll need a few months for contrib to catch up before 8 will really be usable. That leaves us with a whole lot of sites to build in the meantime.

3) We don't tend to do many straight major version upgrades. Usually they involve some sort of change to whatever layout tools we use to keep up to date. With that said, I'm not sure if I'll be planning an upgrade path from 7.x to 8.x. BUT - This is a something I'd be willing to work on if enough people need it.

What I see is every distribution under the sun integrating Panopoly so Panels certainly isn't obsolete in D7.

I assumed he meant D8 :)

We are actually hard at work on a new distribution that also uses Panopoly. I doubt that there's ever something that beats Panels and Panopoly in D7.

Hi, this module only hides the panels? or panels are not loaded for the breakpoints?

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?