How to Create a Masonry-Like View in Drupal 8

Masonry is a very popular JavaScript library, that stacks items in columns and rows, like a masonry brick wall.

The items reorder themselves according to their size as the viewport size changes with a nice animation effect. For some examples, take a look at the official Masonry site.

It is possible to create a view in Drupal with this style of layout. Keep reading to learn how!

Step #1. Install the required modules

• Open the Terminal application of your PC and type:

composer require drupal/masonry

composer require drupal/masonry_views

This will download the required modules. Masonry API and Masonry Views. The API provides integration between the Masonry JavaScript libraries and Drupal. Masonry Views defines the style of the view (its layout).

There are two more libraries to install for the proper functioning of the modules:

• Create the /libraries folder in the root of your site
• Inside this folder create two more folders called /masonry and imagesloaded
• Right-click on the masonry library page and select Save As
• Place this file (masonry.pkgd.min.js) inside the /masonry folder
• Do the same with the imagesloaded.pkgd.min.js file.

• Click Extend
• Select Masonry API and Masonry Views
• Click Install.

The system will prompt you to enable also the Libraries module.

• Click Continue.

Step #2. Create the View

For this tutorial, I’ve generated some dummy content with the Devel Generate module.

Use this module only on development stages. I generated 50 articles with their images. These images have different width and height values.

• Click Structure > Views > Add View
• Select Create a block
• Show Content of type Article
• Display format: Masonry of fields
• Items per block: 12
• Click Save and edit

• In the Fields section click Add

• In the Category Content, select the fields Body and Image
• Click Add and configure fields

• Change the Formatter and set a character limit for the text
• Click Apply and continue

• Leave the default image style
• Link the image to the content
• Click Apply.

• In the Fields section click the dropdown and select Rearrange
• Put the image between title and body
• Click Apply.

• Save the view

Step #3. Place the Block

• Click Structure > Block Layout
• Scroll down to the Content section
• Click Place block.

• Search for the block you created in the last step
• Click Place block.

• Hide the title
• Click Save block.

• Rearrange the block above the Main page content
• Scroll down and click Save blocks.

If you used the Devel module to generate content like I did, you will notice that the body text is not trimmed. Apart from that, you will see the content inside the block neatly organized in a mason grid.

Step #4. Theming the Grid

There are two classes you can target in your stylesheet to change the appearance of the container and the items inside it:

• .masonry-layout
• .masonry-item

More on Drupal theming at OSTraining here. I hope you liked this tutorial. Thanks for reading!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.