Masonry Template

The Masonry Template is similar to the Responsive template in that it adjusts to the width of the container element that it is in. The difference though is that it adds a nice animation to fill that area as it does it. The strengths of Masonry are that it is simple, elegant, and eye-catching immediately. It also is a great way to highlight your full images of any size and proportion while maintaining a clean and organized look.

Just the Basics

Masonry is designed to be the simplest, most convenient template in your arsenal. That’s why it has the fewest amount of settings available. Set it and forget it!

Thumbnail Width – In contrast to the Responsive template, Masonry does not crop the images at all. Instead it fits them into the grid according to their width alone. This allows you to have a variety of both landscape and portrait oriented images all in the same gallery. That means the only size Masonry is concerned with is the width of the images. This will line the images up next to each other until there is no more space. So, if you have 730px of space to fill, you could set the width at these lengths:

1 image per row = 730px
2 images per row = 360px
3 images per row = 243px
4 images per row = 182px

Gutter Width – This adds space between the images, both to the right and below each image. This will affect how much pixel space you have available to fit your images. Taking the Thumbnail Width settings from above, remembering that we have 730px of content space available, and applying 10px of “Gutter Space” to them, we now have the following.

1 image per row, Gutter width = 10px, Thumbnail width = 720px
2 images per row, Gutter width = 10px times 2, Thumbnail width = 355px
3 images per row, Gutter width = 10px times 3, Thumbnail width = 233px
4 images per row, Gutter width = 10px times 4, Thumbnail width = 172px

Thumbnail Link – This affects the behavior of what happens when a user clicks on an image. You can have the image link to the “Full Size Image” (necessary if you use a lightbox, see below), link to the image’s respective “Image Attachment Page”, or no chose for your images to be “Not linked” at all.

Lightbox – If you have a lightbox extension activated, you can choose it from here. Notice that you’ll have to have the “Thumbnail Link” set to “Full Size Image” in order for your lightbox to show the image correctly.

Example Masonry Galleries

The only trick in setting your Masonry Galleries is watching out for the total available pixel width to fit what you have available. Once you understand that, it’s simple as pie.

Masonry Gallery that Fits

You’ll see that this gallery fits well in the available content space and has no gutter. It fits 3 images per row nicely. Here’s the settings:

Masonry Gallery that Doesn’t Fit

This gallery, on the other hand, is identical to the one above, it’s set at 243px width, but it also has 10px of Gutter Width, which means there’s not enough room for 3 images per row anymore.