Jekyll One

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.

Asciidoc configuration
masonry::collection_biography[]
Configuration settings
# ------------------------------------------------------------------------------
# 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:                true

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 Grid + Gutters

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.

Asciidoc configuration
masonry::post_series_example[]
Configuration settings
# ------------------------------------------------------------------------------
# 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.4

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.

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.

Posts Grid + Gutters

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.

Asciidoc configuration
masonry::card_example[]
Configuration settings
# ------------------------------------------------------------------------------
# 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.

Image Cards + Lightbox + Gutters + Captions

Base Image Grid

Masonry uses a dynamic grid system to position images to create a visually appealing and balanced layout.

Asciidoc configuration
masonry::image_grid_base_example[]
Configuration settings
# ------------------------------------------------------------------------------
# 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.

Base Image Grid

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.

Asciidoc configuration
masonry::image_grid_full_example[]
Configuration settings
# ------------------------------------------------------------------------------
# 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.

Image Grid + Gutters + Captions + Lightbox

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.

Masonry Layout of JustifiedGallery

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.