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.

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' );

About Liam Alexander Colman

Liam Alexander Colman has been working with GeneratePress for over two years and has built countless WordPress websites using it. In his personal setting, Liam maintains six websites. While not a developer, he has created innumerable GeneratePress Elements and is well versed in customizing the theme to his liking. Visit this link for more information and a showcase of his work.

1 thought on “How to open a GeneratePress featured image in a lightbox”

  1. Liam, thank you a hundred times. after much searching and puzzling and troubleshooting around, I came back to your series here, and implemented the steps (albeit I used CPTUI & ACF, rather than Pods), and voilá!
    the featured image on my CPT single now will lightbox. I’m thrilled.
    I agree that the ‘Featured image URL copy/paste’ part is not awesome for the user. If you discover an alternative for this step in the future, I would really love to hear it. (It keeps me from using this method on other images brought in via ACF, using GPP dynamic image and post-meta).
    Thanks again for such a thorough article about this solution.


Leave a comment