Summary
Views Blocksit style plugin. Create dynamic grid layouts using the Blocksit JS jQuery plugin and Views. This module supports setting up breakpoints to change the number of columns as required. Blocksit JS provides a cascading grid layout, similar to that of the Masonry JS library and can be used as an alternative in many cases.
A demo of the library is available here.
Installation
- Download and extract the module sites/all/modules
- Download the Blocksit JS library and put either blocksit.js or blocksit.min.js in the sites/all/libraries/blocksit folder.
A note about breakpoints
If required, breakpoints can be set up for the number of columns to change at a set container width. To do this, the "Breakpoints" setting needs to be configured using the following format and having the breakpoints ordered from largest width to lowest width.
[container_width_in_px, number_of_columns] [container_width, number_of_columns]
For Example:
[1200, 5] [1000, 4] [800, 3] [600, 2] [400, 1]
All whitespace is striped, so spacing is not important, however the commas and square brackets are required. Please also note that the breakpoint width is the container width, not the page width. Javascript is used to change the number of columns so it is advised to only have the number of breakpoints that you need for optimal performance, particularly on mobile.
How to Use
- Edit the required view.
- Under "Format" set the view to "Blocksit".
- Configure the settings as required, listing any breakpoints needed (as per above).
Project information
- 51 sites report using this module
- Created by Eric115 on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Development version: 7.x-1.x-dev updated 18 Jun 2015 at 01:38 UTC