How to open a GeneratePress featured image in a lightbox

On my photography website, I created a gallery using the GeneratePress Content Template Block Element. In a previous guide, I showed you how to open a post’s featured image, instead of the post itself. Now all that is needed is a lightbox for the featured image to appear in. The lightbox plugin I will be using for my photography gallery is called Lightbox for the Default Gallery & Image Block (Simple, Lightweight & No Lock In).

Previously, I recommended the WP Featherlight lightbox plugin. That is no longer the case. WP Featherlight remains a fantastic and fast option, but it is reliant on jQuery. Since digging in deeper into how WordPress and GeneratePress work, I’ve been trying to minimize the dependencies on jQuery my sites have. The Lightbox for the Default Gallery & Image Block plugin is the perfect, lightweight, and pure JavaScript alternative to WP Featherlight.

This plugin doesn’t have any settings to configure or even a block to insert in to the editor. As the name suggests, it works with the default blocks included in the WordPress editor. All you have to do is link an image to the media file itself, and it will be opened in the lightbox. If the plugin breaks, or you prefer not to use it any more, you can simply uninstall it and your site will keep working. Your galleries and images won’t be affected.

How to use Lightbox for the Default Gallery & Image Block everywhere

For the setup on my photography website, one further plugin is needed and that one is called Code Snippets. This plugin is needed because the lightbox plugin will only work in posts with image or gallery blocks, and not in archives. As mentioned previously, my galleries are essentially category archives. This isn’t a bug but a feature because usually, you won’t want the plugin running on your whole site. For example, a contact form doesn’t need to load this plugin’s JavaScript.

To remedy this issue, a short Snippet will be added that will run the plugin’s script everywhere on the WordPress site. This Snippet only needs to run on the front end, so we are going to select the option and then activate it.

function my_theme_enqueue_baguettebox_assets() {
	wp_enqueue_script( 'baguettebox' );
	wp_enqueue_style( 'baguettebox-css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_baguettebox_assets' );