The Lab PhotoSwipe Masonry

PhotoSwipe Masonry

Dmitry kindly gave us permission to create a WordPress plugin in a similar fashion to our popular PHOTOSPACE gallery.

22.12.14
PhotoSwipe Masonry

PhotoSwipe Masonry is built using PhotoSwipe from Dmitry Semenov along with Masonry to generate the thumbnail grid layout. You can adjust the size of the thumbnails and full-size images in the settings. You may need to rebuild your images using a plugin like Regenerate Thumbnails.

This gallery takes advantage of the built-in gallery features of WordPress. Simply use the WordPress admin to create a standard gallery and insert it in the page.

 

Features

  • Clean popup lightbox
  • Zoom and fullscreen features
  • Easily integrate into existing WooCommerce products
  • Mobile responsive
  • Settings located in Settings > Photoswipe

Note: If using with WordPress 5 you will need to embed the gallery within the classic editor. Alternatively, check out our PhotoSwipe 2.0 post for an optimised version.

 

Using Template Tags

  • If you want to hard code this gallery into a page template you can use the below code to do so.

<?php echo do_shortcode('[gallery]'); ?>

 

Conditionally remove header scripts and styles from a page

  • If you want to use conditional tags to remove any of the plugin styles from a specific page, use the below snippet just before the wp_head() on your chosen page template. Thanks Dario Zadro!

<?php
if (is_page('about')){
remove_action('wp_enqueue_scripts', 'photoswipe_scripts_method');
remove_action('wp_enqueue_scripts', 'photoswipe_scripts_method_history');
remove_action('wp_head', 'photoswipe_wp_headers'); }
?>

 

Shortcode attributes

You can set the following attributes you control your gallery:

  • id – Set the post to read the attached images from such as id=”2″
  • include – Only includes a new list, comma separated attachment IDs such as include=”24,30,43″
  • exclude – Comma separated attachment IDs such as exclude=”24,30,43″

[gallery id="2" exclude="24,30,43"]

 

Using AJAX?

  • You can also call the gallery via jQuery if you have an AJAX based theme.

photoswipe_masonry($);

 

Help! The gallery doesn’t work!

This is usually caused by a Javascript conflict. The easiest way to track down the problem is to remove or disable other scripts. Try the following:

  • Disable other plugins. If this works, re-activate the plugins one by one until you find the problematic plugin(s).
  • Switch to the most recent WordPress base theme to rule out any theme-specific problems.
  • Use a browser debugger to find the error (Chrome is the best). This may help you track down the conflict.
  • ADVANCED! If it’s a theme issue you may have some scripts embedded in your theme that are causing a conflict. To disable these look inside the header.php, footer.php or functions.php files.

 

Wanna try it? View the demo or download.

We are on Github if you want to know more or contribute!
Dean Oakley

Written by Dean Oakley

Dean founded Thrive Digital in 2006 and has worked in the design and development space ever since. He received 1st Class Honours in a Bachelor of IT and oversees all technical aspects of our projects.