Skip to main content
drupalreleases

Use direct release data with your AI assistant.

Learn more

Masonry API

Security covered Under active development 11,551 sites

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

Installation

  1. Download and enable the required modules listed above
  2. Update jQuery (see 'jQuery Compatibility' above)
  3. Download the Masonry plugin :
    • v2 with branch 2.x. Rename the file to be located at : /sites/.../libraries/masonry/jquery.masonry.min.js
    • v3 with branch 3.x. Rename the file to be located at :
      /sites/.../libraries/masonry/masonry.pkgd.min.js
  4. 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
  5. Download and enable Masonry API (and optionally any sub-modules, see above)
  6. Check /admin/reports/status to ensure the Masonry plugin was properly detected
Drupal 8–11

Ask your assistant about Masonry API

Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works

Depends on

Dependencies of the latest stable release

No dependencies recorded for this project.

Required by

1 tracked project depends on this one

Activity

Tracked releases
6
Tracked since
Apr 2023
Latest release
1 year ago
Releases (12 mo)
0 ▼ from 1
Maintenance
Slowing

Release Timeline

Releases

Version Type Core PHP Release date
4.1.0 Stable 8–11 Aug 5, 2025
4.0.0 Stable 8–10 Jul 22, 2023
4.x-dev Dev 8–11 Jul 21, 2023
3.0.0 Stable 8–10 Jul 21, 2023
2.0.1 Stable 8–10 Jul 21, 2023
2.0.0 Stable 8–10 Apr 20, 2023