Dmitry kindly gave us permission to create a WordPress plugin in a similar fashion to our popular PHOTOSPACE gallery.
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.
- 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!
remove_action('wp_head', 'photoswipe_wp_headers'); }
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"]
- You can also call the gallery via jQuery if you have an AJAX based theme.
Help! The gallery doesn’t work!
- 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.
We are on Github if you want to know more or contribute!
Join the conversation
We think you may like these
Free SVG QR Code Generator
No need to need to sign up, give away your email, or even pay just to download your QR code in a usable format like SVG.
Gravity Forms IP Location Add-On
We’ve created a simple plugin called Gravity Forms IP Location Add-On. It helps you find out the source country of anyone who fills out your forms.