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.
J1 Masonry is based on the popular JavaScript library Masonry, enabling the creation of responsive, dynamic grid layouts of groups of content elements. 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 posts ar pages in different sizes.
J1 Masonry 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 Collection
The J1 Masonry module create a collection grid by pulling articles from a specific Jekyll collection. The grid display all articles a collection contains.
masonry::collection_biography[]# ------------------------------------------------------------------------------
# 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: trueAdditionally, 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.
Grid of Posts
J1 Masonry 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[]# ------------------------------------------------------------------------------
# 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: 1
brightness: 0.4The Masonry Javascript module 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.
| The J1 Masonry module supports a series of posts out of the box. If the grid type of |
Grid of Images
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. By using masonry, you can create a gallery that displays images of different sizes in an aesthetically pleasing and functional way.
Bootstrap Cards
Bootstrap cards are a popular component of the Bootstrap front-end framework that provides a flexible and customizable way to display content on a website.
masonry::card_example[]# ------------------------------------------------------------------------------
# Image Cards + Lightbox + Gutters + Captions
#
- grid:
enabled: true
id: card_example
type: card
image_base_path: /assets/images/modules/gallery/mega_cities
image_styles: img-fluid img-object--cover g-height-300
lightbox: true
gutters: true
# ----------------------------------------------------------------------------
# Captions
#
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
...A card is a container for content that can be styled and arranged in various ways to suit the website’s needs.
Base Image Grid
Masonry uses a dynamic grid system to position images to create a visually appealing and balanced layout.
masonry::image_grid_base_example[]# ------------------------------------------------------------------------------
# Image Grid
#
- grid:
enabled: true
id: image_grid_base_example
type: image
image_base_path: /assets/images/modules/gallery/mega_cities
image_styles: img-fluid
lightbox: false
gutters: false
# ----------------------------------------------------------------------------
# Captions
#
caption:
enabled: false
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
...A dynamic grid system means you can display images of different sizes without worrying about them looking out of place or disrupting the overall flow of the gallery.
Full Image Grid
The full grid uses all style elements for a grid layout, including a lightbox. The lightbox supports all images of the grid as a group. Click on the images below to see how a Lightbox manages a group of images in your grid.
masonry::image_grid_full_example[]# ------------------------------------------------------------------------------
# Image Grid + Lightbox + Gutters + Captions
#
- grid:
enabled: true
id: image_grid_full_example
type: image
image_base_path: /assets/images/modules/gallery/mega_cities
image_styles: img-fluid
lightbox: true
gutters: true
# ----------------------------------------------------------------------------
# Captions
#
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
...The Lightbox applied on Masonry Grids is Lightbox V2, the default lightbox used for J1 Template.
Justified Gallery
As an alternative to image grids arranged by J1 Masonry, the module JustifiedGallery can also display photos in a masonry-styled gallery. The module JustifiedGallery is a great module to create responsive justified image galleries.
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.
Find more on how to present video content using JustifiedGallery on the example page Present Videos.