Mason
This module provides a Views style plugin and field formatters to create a gapless grid of elements. It uses the Mason library to fill in empty spaces, ensuring a perfectly filled layout.
Provides Mason integration to create a perfect gapless grid of elements.
This is not Masonry, or Isotope or Gridalicious. Mason fills in those ugly gaps, and creates a perfectly filled space.
The module provides a Views style plugin and few field formatters to return results as a Mason grid.
Installation
Install the module as usual, more info can be found on:
https://drupal.org/node/1897420
Configuration
- Visit admin/structure/mason to build a Mason grid.
- Visit admin/structure/views, and create a new page or block with Mason style.
- Use the provided samples to begin with, be sure to read its README.
Requirements
- Blazy (2.x) since RC1
- Views module.
- Mason library:
- Download Mason archive from https://github.com/DrewDahlman/Mason
- Extract it as is, rename "Mason-master" to "mason", so the assets are available at:
/libraries/mason/dist/mason.min.js
How does it work?
Mason works by flowing a grid of floated elements as a normal CSS layout, then measuring the dimensions of the blocks and total grid area. It then detects where gaps are and fills them.
It uses fillers to fill in gaps. Fillers are elements that you can define or it will reuse elements within the grid. If fillers are ugly, use Promoted option with proper calculation and most likely a couple of trials and errors. Be sure the amount of visible mason boxes are matching the amount of Promoted items.
Tips
- The key is: "floated elements as a normal CSS layout". Failing in understanding this will make it a PITA.
- Do not rely on random sizes, use proper calculation, or a simple math.
- Having hard time with trial and errors? Try using Fillers option at Views UI to automatically fill empty gaps, especially for small devices. Be sure designated items are available for fillers.