Provides 'Masonry' style layouts as an option for rendering the contents of panel panes.
Masonry rendering will re-pack panes in your panel to minimize vertical space and provide column-like appearance while the items are still in natural (horizontal) order on the page.

With "Responsive" layouts happening everywhere, the Panels approach of locking everything into a grid can provide a bit of a dilemma, because your column count is pretty static. But the Panels approach of letting an editor drop elements into a page in certain zones still works well in some cases.
Using this module, you may be able to get the best of both worlds.

Masonry in effect at different screen sizes on a 'Panels' page

Usage

  • Using Panels pages or Panels nodes, choose a layout that has a large central content zone.
  • Place your page elements into it, eg a dozen node teasers, just one after the other.
  • Enable the Masonry Panels module, and set up its dependencies
  • Edit the Panel content, and choose 'Masonry' as a display option for the region.
  • Edit the regions settings to give your content items a fixed width appropriate to your design OR work out your responsive CSS and breakpoints to define appropriate widths for these panel panes.

Result: your blocks should now 'Pack' into that panel region nicely.

Requirements

This builds on the Masonry API module that provides Drupal Library support for the Jquery Masonry library.
As at 2014-11, you must either

(note, if swapping between these two different options, you need to flush your cache hard to empty the libraries paths)

See the Masonry API project for updates and further instructions. Remember to check your Drupal "status report" after installing to ensure your requirements are right.

Background

See also teckilah's sandbox: Panels Masonry - an earlier version of this task, that used masonry v1.0.02, but did not use Drupal libraries for managing this, so wasn't suitable to build on. Some code structure was yoinked from there though.

Other code credits go to Masonry Views (by BWPanda) where I found the bits needed to plug in to the library properly.

Supporting organizations: 
Developed and funded as part of a larger job

Project information

Releases