The technical term masonry is used in web development to refer to a grid layout system for arranging elements on a webpage. The masonry layout, also known as the Pinterest-style layout, is a popular choice for displaying images of varying sizes.
Masonry Grid-layouts for the J1 Template system is based on the popular JavaScript library Masonry, enabling the creation of responsive, dynamic grid layouts to manage groups of image-based content. It uses a unique algorithm to arrange elements vertically, then horizontally in a grid. The result is a visually appealing layout that works well with images and other content like articles or posts in different sizes.
The Masonry module is easy to use and can be added to a webpage with just a few lines of configuration. The module provides a flexible configuration to enabling developers to customize the layout, adjust the column width, gutter size, and add animations.
15-30 Minutes to read
Grid of Collections
The Masonry module for J1 Template creates a collection grid by pulling articles from a specific Jekyll collection. The grid display all articles a collection contains.
masonry::collection_biography[]Additionally, the article title and the first tag of an article are displayed. Masonry grids for the J1 Template can be easily customized in various ways, such as speed and other options.
# ------------------------------------------------------------------------------
# Collection Biography
#
- grid:
enabled: true
id: collection_biography
type: collection
collection: biography
image_styles: img-fluid
image_height: 470px
image_width: 400px
preview: false
gutters: false
# ----------------------------------------------------------------------------
# Masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: trueGrid of Posts
The Masonry module posts grid pulls content from a specific category of posts. All grids display the post category, the title, the author and date. All grids for the J1 Template can be easily customized in various ways, such as changing the number of posts displayed, the speed, and other options.
masonry::post_series_example[]The Javascript module Masonry has become a go-to library for web developers who need to create dynamic grid layouts, especially for websites that showcase many images or other visual content like post series for example.
# ------------------------------------------------------------------------------
# Post Series
#
- grid:
enabled: true
id: post_series_example
type: post
group: Jekyll
image_styles: img-fluid
image_height: 400px
gutters: true
# ----------------------------------------------------------------------------
# Masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: true
# ----------------------------------------------------------------------------
# CSS filter options
#
filters:
enabled: true
grayscale: 0
brightness: 0.4| The Masonry module supports a series of posts out of the box. If the grid type of |
Grid of Images
Masonry is a great tool to create dynamic image galleries. Image galleries are popular on many websites, and masonry can be a useful tool for creating dynamic and visually appealing galleries. By using masonry, you can create a gallery that displays images of different sizes in an aesthetically pleasing and functional way.
| Change the size of your current browser width to see the tool Masonry in action. |
Fixed Height
Pictures you’ve made are typically not even in size. Images may have the same resolution, but some are orientated landscapes, and others may be portrait. Using the height parameter on images image_height, all images can be displayed at the same height.
masonry::image_fixed_height_lb[]# ------------------------------------------------------------------------------
# Images + Fixed Height + Gutters + Captions + Lightbox
#
- grid:
enabled: true
id: image_fixed_height_lb
type: image
gutters: 3
image_base_path: /assets/image/modules/gallery/mega_cities
image_styles: img-fluid
image_height: 300px
# ----------------------------------------------------------------------------
# Lightbox settings
# ----------------------------------------------------------------------------
#
lightbox:
enabled: true
type: lb
options:
# ----------------------------------------------------------------------------
# Caption options
#
caption:
enabled: true
position: bottom
# ----------------------------------------------------------------------------
# Masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: true
# ----------------------------------------------------------------------------
# Images
#
images:
- image:
file: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...Variable Height
Using a Masonry-based grid, images can be arranged in their original sizes quite easy. The module creates elegant image galleries that manages the various sizes and aspect ratio of images.
Lightbox V2
The default lightbox supports all images of a grid as a group. Click on the images in the grid below to see how the lightbox manages your images.
masonry::image_variable_height_lb[]# ------------------------------------------------------------------------------
# Image Grid + Variable Height + Gutters + Captions + Lightbox
#
- grid:
enabled: true
id: image_grid_example_lb
type: image
gutters: 3
image_base_path: /assets/image/modules/gallery/mega_cities
image_styles: img-fluid
# ----------------------------------------------------------------------------
# Lightbox options
# ----------------------------------------------------------------------------
#
lightbox:
enabled: true
type: lb
# ----------------------------------------------------------------------------
# Caption options
#
caption:
enabled: true
position: bottom
# ----------------------------------------------------------------------------
# Masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: true
# ----------------------------------------------------------------------------
# Images
#
images:
- image:
file: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...lightGallery
Using lightGallery for the lightbox on a Masonry-based grid compared to the default lightbox, more options are available to manage images. Click on the the grid elements below to see how lightGallery manages your image content.
masonry::image_variable_height_lg[]# ------------------------------------------------------------------------------
# Images + Variable Height + Gutters + Captions + lightGallery
- grid:
enabled: true
id: image_variable_height_lg
type: image
gutters: 3
image_base_path: /assets/image/modules/gallery/mega_cities
image_styles: img-fluid
image_height: 300px
# ----------------------------------------------------------------------------
# Lightbox settings
# ----------------------------------------------------------------------------
#
lightbox:
enabled: true
type: lg
options:
lightGallery:
plugins: lgFullscreen, lgRotate, lgThumbnail
options:
download: false
alignThumbnails: left
# ----------------------------------------------------------------------------
# Caption options
#
caption:
enabled: true
position: bottom
# ----------------------------------------------------------------------------
# Masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: true
# ----------------------------------------------------------------------------
# Images
#
images:
- image:
file: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...Grid of Videos
J1 Masonry is a great tool to create dynamic image galleries. Image galleries are popular on many websites, and masonry can be a useful tool for creating dynamic and visually appealing galleries.
masonry::mixed_video_example[]# --------------------------------------------------------------------------
# Video + Variable Height + Gutters + Captions + lightGallery
- grid:
enabled: true
id: masonry_video_example
type: video
gutters: 2
# ------------------------------------------------------------------------
# Bootstrap responsive options
#
responsive:
xs: 12
sm: 12
md: 6
lg: 6
xl: 6
# ------------------------------------------------------------------------
# VideoJS settings
# ------------------------------------------------------------------------
#
theme:
name: uno
# ------------------------------------------------------------------------
# lightbox settings
# ------------------------------------------------------------------------
#
lightbox:
enabled: true
type: lb
lightGallery:
plugins: lgFullscreen, lgThumbnail, lgVideo
download: false
alignThumbnails: left
attributes:
preload: false
controls: true
playsinline: false
# ------------------------------------------------------------------------
# caption options
#
caption:
enabled: true
position: bottom
# ------------------------------------------------------------------------
# masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: true
# ------------------------------------------------------------------------
# html5 video settings
# ------------------------------------------------------------------------
#
html5:
video_base_path: /assets/video/gallery/html5
poster_base_path: /assets/video/gallery/html5
# ------------------------------------------------------------------------
# videos
#
videos:
# video 1 (Online)
- video:
name: Planet Earth II
type: youtube
size: "1280-720"
source: "https://youtu.be/IUN664s7N-c"
pinterest_prefix: Pin video
tweet_prefix: Try video
description: >
<h4>
Visual Soundscapes - Mountains | Planet Earth II | BBC America
</h4>
<p>
On the heels of Planet Earth II’s record-breaking
Emmy nominations, BBC America presents stunning visual
soundscapes from the series' amazing habitats.
</p>
poster:
style: img-responsive
source: "https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg"
caption:
position: bottom
text: "YouTube · Visual Soundscapes - Mountains | BBC America"
...
# video 4 (HTML5|VideoJS)
- video:
name: Peck Pocketed
type: html5
size: "1280-720"
source: video1.mp4
pinterest_prefix: Pin video
tweet_prefix: Try video
description: >
<h4>
Peck Pocketed by Kevin Herron | Disney Favorite
</h4>
poster:
style: img-responsive
source: video1-poster.jpg
caption:
position: bottom
text: "MP4 Video · Student Academy Award winning cartoon clip"J1 Gallery
As an alternative to grids created by Masonry, the J1 Gallery module can also display photos in a masonry-styled gallery. The module is based on Justified Gallery is a great module to create responsive justified image galleries.
gallery::jg_mega_cities[]Digital image content, pictures or videos, are easy to make. Today, every mobile has a camera. Presenting a bunch of photos or videos is done very easily by using Justified Gallery. Videos created by a digicam or a mobile can be played by J1 Template using the HTML5 Video support. Present videos you have made at it’s best.
| Justified Gallery is using lightGallery for default. |
Find more on how to present video content using Justified Gallery on the example page Video Player.