Envira Gallery Blog
Digital Photography Tips, Tutorials and Resources
Digital Photography Tips, Tutorials and Resources
Last updated on Sep 20, 2022 by Nick Beaupre
Do you want to create a masonry style gallery in WordPress? Sometimes you need to display full-view thumbnails without cropping the height or width. In this tutorial, we will share with you how to create a masonry image gallery in WordPress.
In an image gallery, you may notice that the images are cropped to adjust in columns and rows. However, you can change the view of your image gallery to masonry. Using a plugin like Envira Gallery you can easily create masonry image galleries for your site.
To create a masonry image gallery in WordPress, you’ll need to follow these 6 steps:
Ready to get started? Let’s go!
First thing you need to do is to install and activate Envira Gallery plugin to your WordPress site.
To learn more about installation, you should check out this guide on how to install Envira in WordPress.
Upon activating the plugin, you should go to Envira Gallery » Add New to create your image gallery. Let’s start by adding the title and photos.
You can learn more about the gallery settings on how to create an image gallery with thumbnails in WordPress.
After adding the photos, you can scroll down to Configuration tab. In the Gallery Settings, you need to select our Mason layout option. In this example, we’re going to set the Number of Gallery Columns to Three Columns.
Now you can go down to find new settings in the next step.
You need to scroll down to the Column Gutter Width and Margin Below Each Image settings. Set both the space between images to 10 in both options.
Both these settings aren’t available for the Automatic layout.
By default, Automatic layout will attempt to fill each row and leave no gutter width or margin between images, so you need to change the settings to columns.
Once published, you should copy the shortcode from the Envira Gallery Code widget.
Next you need to go to Pages/Posts » Add New or edit an existing page/post. In the visual editor, simply paste the shortcode.
That’s all. Your masonry image gallery will appear on your site that will look like this image below:
We hope this tutorial has helped you to learn how to create a masonry image gallery in WordPress. You may also want to check out our guide on how to add a polaroid gallery in WordPress.
If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.
Envira Gallery helps photographers create beautiful photo and video galleries in just a few clicks so that they can showcase and sell their work.
I did this but my site is just a normal 3 across grid 🙁
If you selected 3 columns, that’s what will show. However, image size can play a role here. Please contact Envira Support (http://enviragallery.com/contact/) for further assistance.
I don’t see an option for enabling masonry layout on the free version. Is this something that is only available with an upgrade and if so which one?
Hi Jenna!
Thanks so much for your question. For Envira Lite there are 2 layouts. A masonry layout (which uses any column setting) or the Automatic layout. It can be easy to get confused over the difference between a justified layout and a masonry layout. The difference is (just so you know) is that with columns you can obviously control the number of columns that appear in the gallery. With automatic, you can’t. So quite literally – the only way to create a true masonry column is to use any column count for Envira Lite.
I hope that answers your question. If not, feel free to reach out again. Thanks!
Hi there,
I followed your instructions and no matter which ‘number of gallery columns’ I select, the Enable/Disable isotope field does not show. Can you assist?
Same here, the isotope checkbox doesn’t appear.
Same here, where’s the isotope checkbox?
Hi, do you have any tips to create a more elaborate masonry layout that used diff size images to create a true masonry feeling? I bought your premium option but the layout ends up looking more like a staggered 3-column than a true masonry layout with a few feature images blown up for effect. Can’t seem to get even the basic masonry layout that is provided with the free WordPress gallery. I got your theme for the added functionality and just assumed it would be on par with layout options & not just the ‘theme’ of what the border around the image looks like. If there are no further options do you offer a satisfaction guarantee? Thanks.
Hi Bryan 🙂 You could also try using the Automatic layout and playing around with the Row Height to get a more random image size layout. If you need any assistance we’d be happy to help if you’d like to open a ticket up with support!
How can I add more photos at a later date?