Masonry is the name web designers give to a special kind of grid layout used on web pages. It is also known as the Pinterest-style layout, and it is great for showing pictures of different sizes side by side.
The Masonry tool in the J1 Template comes from a well-known free JavaScript tool also called Masonry. It helps you make grids that look great and adjust to any screen size. It can show groups of pictures, articles, or other items. The tool uses a clever method to place items first top to bottom, then side to side, so they fit together neatly. The result looks nice and works well with photos, articles, or posts of different sizes.
The Masonry tool is easy to use. You can add it to a web page with just a few setting lines. You can also change how it looks: pick the width of the columns, the space between items (called gutters), and even add motion effects.
15-30 Minutes to read
Grid of Images
Masonry is also a great tool for making picture galleries that adjust to the screen. Many websites use picture galleries, and Masonry helps you build one that looks good and works well. With Masonry, you can put pictures of different sizes together in a layout that is both nice to look at and easy to use.
| Try changing the size of your browser window to see Masonry rearrange the pictures as you go. |
Fixed Height
The photos you take are usually not all the same shape. They might have the same number of pixels, but some are wide (landscape) and others are tall (portrait). If you set the height option image_height, every picture will be shown 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/module/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
With a Masonry grid, you can show your photos in their original sizes quite easily. The tool makes nice picture galleries that handle different sizes and shapes (aspect ratios) for you.
Lightbox V2
The default lightbox (pop-up image viewer) groups all pictures in a grid together. Click any picture in the grid below to see how the lightbox opens them.
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/module/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
Instead of the default lightbox, you can use lightGallery on a Masonry grid. lightGallery gives you more ways to manage pictures. Click any item in the grid below to see how lightGallery shows your photos.
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/module/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 also great for making picture galleries that adjust to any screen. Many websites use these kinds of galleries, and Masonry is a helpful tool for making them look good.
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"