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.

Updating the WordPress gallery

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;
}

Define default settings for the gallery

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.

Add a lightbox to your gallery

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.

The post Create a masonry-style WordPress gallery using CSS only appeared first on Plugin Republic.