Open Featured Images in a Lightbox


The Divi Theme can display a featured image at the top of posts. By default this is a static, non-clickable image. But what if you want to be able to click on the featured image and view the original (full-size) image in a lightbox? Here's how you can do it.

Open Featured Images in a Lightbox using PHP

There are two problems to be addressed when trying to open featured images in a lightbox.

The first is that that we need something to click to trigger opening the image in the lightbox. We'll take care of this by wrapping the featured image in a link, and setting the link URL to the same as the image source. We also add a lightbox class so that Divi will open the image in a lightbox, rather than letting the browser open it as a new page.

The second problem is that Divi replaces the original image with a scaled down version (assuming the original image is larger than the displayed size of the featured image. Opening the image in a lightbox is probably a bit pointless if we aren't going to see a larger version of the image. To address this, we prevent Divi from using a scaled down version of the image. Divi will resize the original to fit the featured image area, but now when we open it a lightbox we'll see a larger version.

Here's the PHP code to make these changes and allow Divi featured images to be opened in a lightbox:

add_action('wp_footer', 'dbc_open_featured_image_in_lightbox');
add_filter('et_pb_index_blog_image_width', 'dbc_set_featured_image_max_width');
add_filter('et_pb_index_blog_image_height', 'dbc_set_featured_image_max_height');

if (!function_exists('dbc_open_featured_image_in_lightbox')) {
	function dbc_open_featured_image_in_lightbox() {
			$featured_img = $('body.single .et_post_meta_wrapper > img');
			$featured_img.wrap('<a class="et_pb_lightbox_image"></a>');
				$(this).parent().attr('href', $(this).attr('src'));

if (!function_exists('dbc_set_featured_image_max_width')) {
	function dbc_set_featured_image_max_width($width) {
		return max($width, 9999);

if (!function_exists('dbc_set_featured_image_max_height')) {
	function dbc_set_featured_image_max_height($height) {
		return max($height, 9999);

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin


  1. Hi Dan,
    i've tried on most recent version of Divi and it was not working, any idea?
    Is it still working for you?

    • Hey Max, it's still working for me with the latest version of Divi (currently 4.11.1). If you haven't already, try clearing any caches on your site. If that doesn't help, is there any chance you're able to send through a link to the page you're working on so that I can take a look? Thanks!

  2. This isn't working with the Divi 4.0 new Theme Builder templates.

    • Hi Daniel, thanks for letting me know. ‚ÄčI've just released an update (Divi Booster 3.1.0) which should get the open images in lightbox feature working with Divi 4 templates. Hope it helps.

  3. Featured Image? Mean the post featured Image? I think "yes". As the Product images has already this functionality. I really like Divi, I will try to integrate this code to my website annd check that there.

    • Hi Raseduzzaman. Yes, it's the post featured image that is being referred to in the post. Best of luck with the code and let me know if you have any trouble getting it to work. Thanks!

  4. Yay for this… It works beautifully, and including that it forces Divi to use the original image in the post itself, an additional perfection in regards to what I have been trying for overall…

    Thanks Dan for making this possible…

    Warm regards…

    • You're very welcome, John :)


Submit a Comment

Your email address will not be published. Required fields are marked *