Masonry API
This module provides an API to integrate the Masonry JavaScript library with Drupal. It allows for flexible grid layouts by arranging content elements optimally based on available space, similar to how a mason lays stones. Additional sub-modules can be used to apply this functionality to specific parts of your site, such as fields or views, but you will need to provide your own CSS for styling.
Provides an API for integrating the jQuery Masonry plugin with Drupal.
From desandro.github.io/masonry:
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
As this is an API module, you will likely want to download some of the sub-modules below that implement this API to provide Masonry functionality to various parts of your site.
Additionally, no styling is provided by this API module or any of the sub-modules. You will need to add your own CSS as described here.
Sub-Modules
Drupal 8/9 indications:
Install and manage dependencies - option 1
Check documentation on how to handle external dependencies here: https://www.drupal.org/docs/develop/using-composer/manage-dependencies#t...
Install and manage dependencies via composer - option 2
1. Install the module itself :
composer require drupal/masonry
2. Install wikimedia/composer-merge-plugin :
composer require wikimedia/composer-merge-plugin
3. Edit your "merge-plugin" section under "extra" in your *root* composer.json so it looks like:
"extra": {
"merge-plugin": {
"include": [
"modules/contrib/masonry/composer.libraries.json"
]
}
}Beware to change the path to your contrib module folder if under web or docroot for instance
4. Run a locked update, or a module update:
composer update --lock
composer update drupal/masonry
Install and manage dependencies manually - option 3
1. Download and unzip masonry module from https://www.drupal.org/project/masonry
and place it into /modules/contrib folder.
2. Download and unzip masonry from http://masonry.desandro.com/
and place it into /libraries folder so the following path exists
/libraries/masonry/dist/masonry.pkgd.min.js
3. Download and unzip imagesloaded from http://imagesloaded.desandro.com/
and place it into /libraries folder so the following path exists:
/libraries/imagesloaded/imagesloaded.pkgd.min.js
Drupal 7 indications:
jQuery Compatibility
The Masonry plugin requires jQuery v1.6 or greater.
As Drupal 7 only ships with jQuery v1.4.4, you'll need to upgrade jQuery to a later version. You can do this by installing one of the following modules:
Required Modules
- Libraries (2.x)
Installation
- Download and enable the required modules listed above
- Update jQuery (see 'jQuery Compatibility' above)
- Download the Masonry plugin :
- Branch 3.x only: you need to create a directory for imagesloaded in the libraries directory and then download the imagesloaded library from http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js. Rename it to be located at :
/sites/.../libraries/imagesloaded/imagesloaded.pkgd.min.js - Download and enable Masonry API (and optionally any sub-modules, see above)
- Check /admin/reports/status to ensure the Masonry plugin was properly detected