29 May 2018

How to change the default lightbox in Post Gallery

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.

post-gallery-tuto1

 

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

Each lightbox requires its own way to be initialized, this is done usually via HTML and Javascript. The lightbox will require you to set up the HTML markup in a certain way as well as to call to its very own javascript functions to set things going.

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.

 

Step 5: Initialize Javascript

As explained in Step 4, each lightbox will require a specific Javascript way to be initialized. To do this, I will create a new file in my theme located and named [theme]/js/lightbox-init.js. As shown in the code below.

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.

 

Any comments

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.