Create a masonry-style WordPress gallery using CSS only

Masonry is a JavaScript library that repositions elements on the page so that they lay out neatly. It’s particularly good for groups of images where all the images are different sizes so don’t fit perfectly into a grid. A typical example of this style of layout is Pinterest with its columns of different sized images.

It’s possible to replicate this layout style without the need for JavaScript (though the Masonry JS library will give you lots of additional options) in CSS using column-count. This will split your layout into the specified number of columns and by applying display: inline-block to the elements within your layout, you’ll achieve a masonry look.

In this post, we look at how to quickly create a masonry-style gallery with optional lightbox effect.

WordPress uses pre-defined CSS classes when building a gallery. You can define some simple rules to change the gallery layout to CSS only masonry. Just add the following CSS to your theme’s style.css stylesheet:

.gallery-columns-2 {
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
}
.gallery-columns-3 {
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
}
.gallery-columns-4 {
 -webkit-column-count: 4;
 -moz-column-count: 4;
 column-count: 4;
}
.gallery-columns-5 {
 -webkit-column-count: 5;
 -moz-column-count: 5;
 column-count: 5;
}
.gallery-columns-6 {
 -webkit-column-count: 6;
 -moz-column-count: 6;
 column-count: 6;
}
.gallery-columns-7 {
 -webkit-column-count: 7;
 -moz-column-count: 7;
 column-count: 7;
}
.gallery-columns-8 {
 -webkit-column-count: 8;
 -moz-column-count: 8;
 column-count: 8;
}
.gallery-columns-9 {
 -webkit-column-count: 9;
 -moz-column-count: 9;
 column-count: 9;
}
.gallery-item {
 display: inline-block;
 text-align: center;
 vertical-align: top;
 width: 100%;
 margin: 0 0 0.5em;
}

You can take this a stage further and make gallery creation simpler by defining some defaults. In your functions.php you can add the following:

function mytheme_gallery_defaults ( $settings ) {
 $settings['galleryDefaults']['link'] = 'file'; // Change this to 'none' to disable links on images
 $settings['galleryDefaults']['columns'] = '5'; // Change this value to set the number of columns
 return $settings;
}
add_filter ( 'media_view_settings', 'mytheme_gallery_defaults' );

This uses the media_view_settings filter to change default settings when you create a new gallery. In the example above, we set the images within the gallery to link to the original media files. If you’d like to remove the link from your gallery images altogether, set the value to ‘none’. We also set the default number of columns to 5.

Change the default image size

Unfortunately, the current version of WordPress, 4.4, won’t let us change the default gallery image size using the method above so we add an additional filter to change the default image size from thumbnail to medium. Place the following snippet in your functions.php file:

add_filter( 'shortcode_atts_gallery',
 function( $out ){
  $out['size'] = 'medium';
  return $out;
 }
);

This will set the default size of the image to medium. It would be possible to force all the default settings in this way but we have used the media_view_settings filter where possible to allow the user to override our new defaults if they wish.

Finally, you can add a lightbox effect to your gallery that allows users to click on each image to view a larger version. We used the Magnific Popup jquery library which you can download here. Upload the CSS and JS files to a suitable location within your theme files and enqueue them using the following code in your functions.php file:

function mytheme_enqueue_scripts() {

 wp_enqueue_style ( 'mode-theme-bootstrap', get_template_directory_uri() . '/css/magnific-popup.css' );
 wp_enqueue_script ( 'magnific', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array ( 'jquery' ), '1.0.0', true );
 
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

Note that you might need to update this code depending on the exact location of the Magnific CSS and JS files.

To initialize the lightbox on your gallery, add this snippet to functions.php:

function mytheme_footer_js() { ?>
 <script>
   jQuery(document).ready(function($){
   // Instantiate Magnific Lightbox
     $('.gallery-item a').magnificPopup({
       type:'image',
       image: {
         verticalFit: true
       },
       gallery: {
        enabled: true
       }
     });
   });
 </script>
<?php }
add_action ( 'wp_footer', 'mytheme_footer_js' );

This will run on every page where you have a gallery.

One comment

  1. Hi there,

    Initially I couldn’t get this to work, until I noticed that initialization string called the class gallery-item a – whereas my gallery had the class .blocks-gallery-item a. Once I changed the class it worked like a charm.

    I’m guessing this is the difference between the 2016 version of Wordpress and the 2019 version (go figure right?) – that being said, it still works with that one change – and – I’m extremely grateful for this write up.

    Thought you might like to know.

    Thanks

    Steve

Leave a Reply

Your email address will not be published. All fields are required.