Masonry Gallery
- Matthew Gary Page
- Scott Worthington
The Masonry Gallery is a JavaScript grid layout that allows you to display a collection of images. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You can also click on each image to view each image separately or altogether in a modal carousel.
Video Demo
Masonry Gallery Grid Order
Adding a Masonry Gallery
See examples of a Masonry Gallery
From the paragraph builder select the button labeled Add Masonry Gallery
Enter the heading for this Masonry Gallery in the Masonry Gallery Title field.
Under Title Options select whether the Masonry Gallery Title should be aligned left or centered. The default is visually hidden.
Enter a number in the Gap field to change the column padding.
Select the Gallery Page Captions checkbox if you want to display captions beneath the image on the Gallery page in addition to the modal.
Be sure to Upload your images first and click Save before adding your Captions, if needed.
Under Horizontal Border, choose whether you want to add a Horizontal Border to the top, bottom or both top and bottom of this text block area. The default is none (ie. no border).
Adding an Image to your Masonry Gallery
Under Image, choose an image from your computer and Upload
For the best results, size and crop your image before uploading.
5 MB upload limit.
After Uploading your images, then add an Alternative text, click Save. If you have captions add them at this point.