How to change the default lightbox in Post Gallery
Post Gallery plugin comes built-in with Swipebox as its light-box solution; we have chosen this solution because it looks solid and supports all the features we believe a modern light-box should include, but we are aware that it might not be the case for some of our users. Post Gallery includes several WordPress hooks for users to customize it and change the default light-box for the one of their choice.
Side note: We have plans to include a customizable light-box in a future version of Post Gallery PRO, I suggest to check if this feature was added already by the time you read this post.
Below, I will describe step by step (tutorial) how to achieve this by using and adding the hooks and templates in your theme. For learning purposes, all these steps will be added on a child theme of the Twenty Seventeen theme, which we are sharing on this Github repository.
Step 1: Picking a light-box solution
Pick the light-box solution you would to use in replace of the default (Swipebox). For example, here is a list of cool alternatives: Light-box alternatives.
For this tutorial we will use lightGallery.
Step 2: Select how you will include the light-box
There are 2 ways of including the light-box of your choice. You can either download it to the theme or plan to use an available CDN (which is a website that hosts these files for you).
For this tutorial I will download it using node.
Step 3: Enqueue
There are 2 things that need to happen in this step. The default lightbox needs to be dequeued so it no longer gets loaded in by your wordpress and the new lightbox needs to be enqueued so it is loaded by your wordpress.
Dequeue default lightbox
Simply head to the plugin’s settings and un-check the “Enqueue assets” option, as shown in the image below.
Enqueue new lightbox
Use the hook “post_gallery_enqueue” in your theme’s functions.php file to enqueue the assets the new lightbox. As shown in the code sample below.
Step 4: Customize gallery HTML template
To customize the gallery HTML markup, all templates are located at [wordpress]/wp-content/plugins/simple-post-gallery/assets/views/, copy the template plugins/post-gallery/gallery.php and paste it inside your theme, at the folder[theme]/views/plugins/post-gallery/.
Post Gallery PRO: If you are using our PRO version, copy the templates located at [wordpress]/wp-content/plugins/simple-post-gallery-pro/assets/views/ instead.
Once copied, you can modify the file located at your theme, this customizations will override the version located at the plugin.
The HTML markup from Swipebox is similar to lightGallery (except for the data-poster attribute for videos). So for this tutorial, this step can be skipped.
Then make sure to enqueue the new file as well, add the following code in the hook we used at Step 3. As shown in the code below.
After following the customization steps, your site and Post Gallery plugin will be running and using the lightbox solution of your choice. Do you have any feedback or suggestion in this regards, let us now in the comments below.