Digital Photography Tips, Tutorials and Resources
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 how to create a masonry image gallery in WordPress.
In 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. You should use a plugin like Envira Gallery to create masonry image gallery at your site.
To create a masonry image gallery in WordPress, you’ll need to follow these 6 steps:
- Step 1. Install and activate Envira Gallery plugin
- Step 2. Create an image gallery in WordPress
- Step 3. Go to config settings and change number of gallery columns
- Step 4. Set the column gutter width and margin below images
- Step 5. Enable isotope/masonry image gallery layout
- Step 6. Add the masonry image gallery to your site
At the end of this tutorial, you’ll get the masonry image gallery that will look like as shown in this demo below:
Ready to get started? Let’s go!
Step 1: Install and Activate Envira Gallery Plugin
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.
Step 2: Create an Image Gallery 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.
Step 3: Go to Config Settings and Change Number of Gallery Columns
After adding the photos, you can scroll down to Config tab. In the Gallery Settings, you need to change the Number of Gallery Columns from Automatic to any other columns setting. In our example, we selected the Three Columns (3) setting.
Now you can go down to find new settings in the next step.
Step 4: Set the Column Gutter Width and Margin Below Images
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.
Step 5: Enable Isotope/Masonry Image Gallery Layout
Last setting in Config tab is to enable the isotope/masonry layout support for image gallery.
Next you should click on the Publish button and masonry image gallery is ready to display on your site.
Step 6: Add the Masonry Image Gallery to Your Site
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.