WordPress Masonry Gallery

FooGallery – The #1 Gallery for Developers, Freelancers & Website Owners

FooGallery allows you to create a great looking masonry gallery from your WordPress media library in under a minute. A WordPress Masonry gallery is a popular grid layout that uses optimal space to place images without the need to crop them. No matter what orientation your images, the masonry gallery template in FooGallery makes your images look great. See a demo of the masonry gallery template below:

Images courtesy of Pixabay

Customize Your Masonry Gallery

There are endless ways to customize your WordPress masonry gallery to make it look perfect for your brand or company website. You can select the number of columns or leave the gallery to choose the best number for you, given the set width, the number of photos and the space required.

Below are the different settings you can customize:

  • Thumb width
  • Masonry layout (fixed, 2 – 5 columns)
  • Gutter width
  • Alignment
  • Lightbox
  • Theme (dark, light or custom)
  • Border Size (none, thin, medium, thick)
  • Rounded Corners (none, small, medium, large, full)
  • Drop Shadow (none, outline, small, medium, large)
  • Inner Shadow (none, small, medium, large)
  • Loading Icon (6 options, or none)
  • Loaded Effect (fade-in or none)
  • Hover Effect – Theme (dark or light)
  • Hover Effect – Color Effect (none, colorize, greyscale)
  • Hover Effect – Scaling Effect (none, scaled, zoomed)
  • Hover Effect – Caption Visibility (none, on hover, always visible, or below thumbnail)
  • Hover Effect – Transition (instant, fade, slide, push)
  • Hover Effect – Icon (7 options or none)

Below is the same gallery but with a light theme, different hover effects, and the captions are no longer below the thumbnails, but are shown on hover.

What Is a Masonry Grid Layout?

If you’ve been looking for an ideal way to display images on your website, you might have come across different types of layouts, such as mosaic, carousel, or masonry. However, we will focus now on the last of these elements. In short, if you choose a masonry layout, all the images are going to fit next to one another without any space between them. 

However, what’s important is that the height of each image can be different, and if it is, it won’t be automatically resized. As a result, the masonry layout makes perfect use of the available space, reduces the need to scroll down to see more elements, but also, creates a more interesting viewing experience.

Why Is Masonry Grid Layout Popular?

As you might have noticed, a masonry grid layout has become more popular in recent years. One of the largest platforms that adopted this way of displaying images on its website is Pinterest. Why is not using fixed height rows such a big deal? 

One of the primary reasons why masonry grid layout has gained such popularity is because it shortens the height of the page, as more elements can fit into the same space. As the internet speed is becoming faster and faster all across the globe, more and more focus is placed on the convenience of browsing the internet, even if by fitting more images into the same area, a page takes slightly more to load. 

Being able to present a larger number of images to internet users at once is an advantage, and that’s what a masonry grid layout allows you to do. At the same time, it doesn’t crop the images, which ensures that they retain their original quality. Now, the effect is going to be the best if the images included in the gallery vary in their dimensions. 

At the same time, it would be great if their number was considerable. If there are only enough images to fill one or two rows, this design might look unnecessarily chaotic. However, if you need to display a huge number of images on your website, then a masonry gallery plugin can be extremely helpful.

What Are the Benefits and Disadvantages of a Masonry Layout? 

We have previously mentioned that a masonry layout might be an interesting option for your website as it allows you to fit more photos on the page without having to crop or resize them. However, that’s not the only reason why you should consider installing a gallery plugin that comes with this feature. 

If you intend to display images of different orientation, both portrait and landscape, next to each other, other types of layouts could prove to be a little problematic. Either one of the images would have to be cropped or resized, or the image would have gaps between them. 

The former could have a negative impact on the quality of the photos, whereas the latter would be a waste of space on your website. That’s why, in this situation, the masonry layout would be the best choice.

Although it doesn’t make it a perfect fit for every type of website, a masonry layout can help you keep things interesting, and attract the attention of internet users.

Apart from that, it is also worth mentioning that the masonry layout works great on smaller screens just as well. It’s fairly simple – on mobile devices, where the width of the screen is smaller, the number of columns in each row is lower as well, so that the elements don’t lose their quality.

However, there are also some downsides of a masonry layout as well. Even though it certainly looks more interesting than other layouts where the height of all the photos is the same, it might also look a bit cluttered. Because of that, it could be a bit too playful for certain types of websites.

If the sequencing of the images is important, a masonry layout could lead to a bad user experience, as, at times, it might not be entirely clear which photo should be viewed next. That’s why it is best to use a masonry layout when it doesn’t matter in what order the images are viewed by the audience.

You can find out more about the WordPress Masonry gallery settings in the documentation.

The masonry template is included in FooGallery Free, which includes the captions Below Thumbnail feature.

Want to see more demos? Click here.