The WordPress gallery is a powerful feature that easily allows us to add image galleries to posts, pages and any other post type. You can set multiple columns of images quite simply, but to make a masonry gallery that will display vertical imagines without cropping can seem like a challenge. In this ‘How To’ guide I will explain how you can simply make your gallery into a masonry layout without any plugins or JS.

What it looks like adamhaworth.com/stills/landscape

How will it work? Making masonry layouts used to be a really pain and you had to rely on various external JS libraries such as ‘Masonry’. Don’t get me wrong there is nothing wrong with using JS to achieve a masonry layout but in this case, it is overkill that will just add more resources for your visitors to load, slowing your site down unnecessarily.

We will use the latest CCS3 column-count property to create a masonry layout and inject it into your WordPress site using the JetPacks CSS module. The only downside to this method is that you will have to set the number of columns via CSS rather than in the gallery options, you can have different column numbers for different galleries if you wish. You can also set the masonry effect on just a single gallery or on all galleries.

How to do it? All you will need is JetPack with CSS module active or alternatively, you can add the CSS directly to your own theme or child theme. I will be using the Chrome web inspector in the screenshots but most major browsers can be used.

If you are applying the masonry effect to all your galleries then you can simply use the gallery class identifier ‘.gallery’, if you want to just add a masonry effect to a single gallery you will need the gallery ID.

To find the gallery ID simply open your web inspector, tap ‘alt + cmd + i’ on a Mac or ‘alt + ctrl + i’ on Windows to open the inspector tools. Select the gallery on your page or post, you will need to do this on the frontend, if you haven’t published your post yet just preview it.

WordPress Gallery ID

You need to look for the line of code similar to below, it will start with ID.

<div id="gallery-1" class="gallery gallery-columns-2 gallery-size-large">

Now we can add the CSS to the gallery that will control the number of columns and form the masonry layout. If you are adding the masonry effect to a single gallery then you need to replace the identifier ‘.gallery’ with your gallery ID, this applies to all CSS snippets below. Below also removes all the line breaks added by WordPress, we have also included a function to remove these if you need it.

.gallery {
// Change column number to your desired value
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

// Change gap number to your desired value
-moz-column-gap: 4px;
-webkit-column-gap: 4px;
column-gap: 4px;
}

.gallery br {
display: none !important;
}

Function to remove <br> line breaks completely, please use carefully. If you are unsure just ignore this and use the CSS method above to hide the line breaks.

add_filter( 'the_content', 'remove_br_gallery', 11, 2);
function remove_br_gallery($output) {
return preg_replace('/\&amp;lt;br[^\&amp;gt;]*\&amp;gt;/','',$output);
}

The CSS above will use a column-count property to make the seamless masonry stacking of the images, below we will add some additional styles to make the images appear correctly.

The following style will adjust the gaps and reset any widths set my the default WordPress gallery styling.

.gallery .gallery-item {
// The margin and padding should be equal to your column gap minus 1px. The margin should be set as a negative value.
margin: -3px 0 !important;
padding: 3px 0 !important;
float: none !important;
width: 100% !important;
}

Finally, this will make the vertical images match the width of the column and also removes any borders set by WordPress or your theme.

.gallery .gallery-item img {
display: block;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border: none !important;
width: 100%;
}

 

All the styles Below are all the styles together as needed for the masonry layout.

.gallery {
// Change column number to your desired value
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;

// Change gap number to your desired value
-moz-column-gap: 4px;
-webkit-column-gap: 4px;
column-gap: 4px;
}

.gallery br {
display: none !important;
}

.gallery .gallery-item {
// The margin and padding should be equal to your column gap minus 1px. The margin should be set as a negative value.
margin: -3px 0 !important;
padding: 3px 0 !important;
float: none !important;
width: 100% !important;
}

.gallery .gallery-item img {
width: 100%;
height: auto;
}

 

Conclusion You should now have a functioning masonry gallery, remember you can adjust the column count to the number you desire. If you have any questions or problems please leave your comments below.

Pin It on Pinterest