Open Featured Images in a Lightbox

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

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() {
		?>
		<script>
		jQuery(function($){
			$featured_img = $('body.single article.post .et_post_meta_wrapper > img');
			$featured_img.wrap('<a class="et_pb_lightbox_image"></a>');
			$featured_img.each(function(){
				$(this).parent().attr('href', $(this).attr('src'));
			});
		});
		</script>
		<?php
	}
}

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

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

6 Comments

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

    Reply
    • 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.

      Reply
  2. 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.

    Reply
    • 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!

      Reply
  3. 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…

    Reply
    • You're very welcome, John 🙂

      Reply

Submit a Comment

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