The recnical 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 aesthetically pleasingly.
J1 Masonry is based on the popular JavaScript library Masonry, which enables the creation of responsive, dynamic grid layouts of large groups of content. It uses a unique algorithm to arrange elements vertically, then horizontally in the grid. The result is a visually appealing layout that works well with images and other content of varying sizes.
J1 Masonry is easy to use and can be added to a webpage with just a few lines. The module provides a flexible configuration that allows developers to customize the layout, adjust the column width and gutter size, and add animations and other effects.
Responsive Carousel
A carousel may be an alternative for a masonry-styled grid to display groups of posts, articles, or images in quite a compact way. The negative aspect of using sliders on larger groups of elements is the limited number of elements displayed on a slideshow. Sliders are typically used for so-called featured content to show specific elements the website visitors should find on a most top position of your homepage as an eye-catcher.
Grid on Collections
The J1 Masonry collections grid pulls content from a specific collection. All grids for collections display the articles a collection contains. Additionally, the article title and the (first) tag of an article are shown. All Masonry grids for the J1 Theme can be easily customized in various ways, such as changing the number of posts displayed, the masonry speed, and other options.
masonry::collection_biography[role="mb-4"]A biography is a written account of a person’s life, typically focusing on major achievements, events, and experiences. It can be a detailed record of a person’s life, covering everything from their birth and childhood to their personal and professional accomplishments and even their death.
Biographies can be written by someone or someone else and found in various formats, including books, articles, and online sources. A biography aims to provide insight into a person’s life, personality, and achievements and to inspire and inform readers about their accomplishments and contributions to society.
# ------------------------------------------------------------------------------
# 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: truemasonry::collection_fantasy[role="mb-4"]# ------------------------------------------------------------------------------
# Collection Biography
#
- grid:
enabled: true
id: collection_fantasy
type: collection
collection: fantasy
image_styles: img-fluid
image_height: 470px
image_width: 400px
preview: true
gutters: true
# ----------------------------------------------------------------------------
# Masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: trueGrid on Posts
J1 Masonry posts grid pull content from a specific category. All Grids for posts display the post category, the post title, the author and date. All Masonry grids for the J1 Theme can be easily customized in various ways, such as changing the number of posts displayed, the masonry speed, and other options.
masonry::post_series_example[role="mb-4"]# ------------------------------------------------------------------------------
# Post Series
#
- grid:
enabled: true
id: post_series_example
type: post
group: Life
image_styles: img-fluid
image_height: 300px
gutters: true
# ----------------------------------------------------------------------------
# Masonry options
#
options:
originTop: true
originLeft: true
initLayout: true
percentPosition: true The J1 Masonry module supports a series of posts out of the box. If the grid type of post-series is given, all posts of a group (series) are generated automatically as Bootstrap Cards of type post. |
The 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.
Grid on 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. A card is a container for content that can be styled and arranged in various ways to suit the website’s needs.
masonry::card_example[role="mb-4"]# ------------------------------------------------------------------------------
# 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: # image 1
file: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...Images
Using an image gallery to display images of different sizes can be challenging, resulting in an uneven or unbalanced layout. However, this is where masonry can be particularly useful.
Base Grid
Masonry uses a dynamic grid system to position images to create a visually appealing and balanced layout. 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.
masonry::image_grid_base_example[role="mb-4"]# ------------------------------------------------------------------------------
# Image Grid + No Lightbox + No Gutters + No Captions
#
- 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: # image 1
file: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...Full Grid
A Lightbox is, in general, a helper which displays enlarged, almost screen-filling versions of images (or videos) while dimming the remainder of the page. The technique, introduced by Lightbox V2, gained widespread popularity thanks to its simple style. The term lightbox has been employed since then for Javascript libraries to support such functionality.
masonry::image_grid_full_example[role="mb-4"]A lightbox supports image groups (image sets). Click on the images below to see how a Lightbox manages a group of images shown in your grid.
# ------------------------------------------------------------------------------
# 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: # image 1
file: denys-nevozhai-1_b.jpg
caption: Man posing at the rooftop of Jin Mao Tower Shanghai - China
...| The lightbox for Masonry Grids is Lightbox V2, the classic lightbox widely used on the Internet. |
Justified Gallery
As an alternative to grids on image contents arranged by Masonry, the module JustifiedGallery can be used to display photos in a masonry-styled image gallery. JustifiedGallery is a great jQuery Plugin to create responsive, infinite, and high-quality 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 Theme 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. |