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 image enlarged in a lightbox? Here's how you can do it.

Open Featured Images in a Lightbox using PHP

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

add_action('wp_footer', 'dbc_open_featured_image_in_lightbox');
add_action('wp_enqueue_scripts', 'dbc_featured_image_in_lightbox_register_magnific_popup', 11); // Load Magnfic Popup (priority > 10 to avoid triggering Divi's child theme detection)

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(){
				var img_url = $(this).attr('src');
				<?php if (apply_filters('dbc_open_featured_image_in_lightbox_use_fullsize_image', false)) { ?>
					img_url = img_url.replace(/-\d+x\d+(?=\.(png|jpe?g|gif|bmp|webp))/i, '');
				<?php } ?>
				$(this).parent().attr('href', img_url);
			});
		});
		</script>
		<?php
	}
}
            
function dbc_featured_image_in_lightbox_register_magnific_popup() {
	if (!defined('ET_BUILDER_URI') || !defined('ET_CORE_VERSION') || version_compare(ET_CORE_VERSION, '4.10', '<')) { return; }
	wp_enqueue_style('dbc-featured-image-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/css/magnific_popup.css', array(), ET_CORE_VERSION);
	wp_enqueue_script('dbc-featured-image-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/js/magnific-popup.js', array( 'jquery' ), ET_CORE_VERSION, true);
}

When Divi displays the featured image, it typically uses a cropped, resized version of the original image. The code given above will display this cropped version of the image in the lightbox. 

Displaying the Full-Size Image in the Lightbox

If you'd like to display the full-size version of the image in the lightbox, you can add the following PHP code, in addition to the code given above:

add_filter('dbc_open_featured_image_in_lightbox_use_fullsize_image', '__return_true');

Note that the built-in Divi lightbox functionality, which this post makes use of, initially displays the lightbox image at the size of the original cropped feature image and then animates it up to its final display size. This is intended to give the effect of the non-lightbox version of the image smoothly expanding into the lightbox. However, if the aspect ratio of the cropped image differs significantly from the full-size image then there may be a visible stretching / squashing of the image as it expands into the lightbox. As such, using the full-size image in the lightbox is probably best suited to situations where the cropped / resized version of the featured image has a similar aspect ratio to the final image.

If you do need to display the final image, but are experiencing image distortion, let me know in the comments and I'll try to figure out a way to resolve it.

Adding an Overlay Icon to the Clickable Featured Image

You may wish to add an overlay icon hover effect to your feature images, making it more obvious to your users that they can now click the featured images, e.g.

Normal
Hovered

You can use the following CSS code to add the overlay icon hover effect to your feature images: 

/* === Add a hover icon to the clickable featured images === */
/* Src: https://divibooster.com/open-featured-images-in-a-lightbox/ */

/* featured image hover overlay configuration */
:root {
  --featured-image-hover-brightness: 70%;
  --featured-image-hover-icon-color: white;
  --featured-image-hover-icon-font-size: 30pt;
}

/* Add a hover icon to the featured images in posts */
body.single-post .et_post_meta_wrapper a.et_pb_lightbox_image:hover:before {
    content: "\55";
    font-family: ETmodules;
    color: var(--featured-image-hover-icon-color);
    font-size: var(--featured-image-hover-icon-font-size);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
    position: absolute;
    top:50%; 
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
body.single-post .et_post_meta_wrapper {
    position: relative;
}

/* Reduce the featured image brightness on hover */
body.single-post .et_post_meta_wrapper a.et_pb_lightbox_image img:hover {
    filter: brightness(var(--featured-image-hover-brightness));
    transition: all 1s ease;
}

/* === End: add a hover icon to the clickable featured images === */

Set Minimum Width for the Featured Imaged in Lightbox Mode

If you happen to be using small images for your featured images, then they will appear small in when opened in the lightbox. One way to address this is to set a minimum width for the images in the lightbox, with CSS like this:

@media only screen and (min-width: 981px) {
	.single-post .mfp-wrap img.mfp-img {
		min-width: 800px !important;
	}
}

Note that this will preserve the aspect ratio of the image up to a point. If the scaled up image ends up being too tall for the browser window / lightbox area, it will be squashed vertically. It's recommendable, therefore, to choose a min-width which is low enough that your featured images can comfortably fit vertically on standard screen sizes.

12 Comments

  1. I just bought a bundle and I am trying Booster. I applied this code to functions.php but I am not getting the result I expected. I want to keep the images the way and size they originally showed (before adding the code), as in here: https://prnt.sc/1gUHO2bQw13N and make them clickable (achieved with the code.

    With the code they are showing a full size image, which it’s not what I am looking for: https://prnt.sc/OiWNvkfWiyWt

    Reply
    • Hey Jo, ​I've just rewritten the code in the post above to address this.

      Replace the code you added previously with the code in the post and ​It should now leave the dimensions of the (unclicked) featured image untouched.

      ​If you just add the first main block of code then the image displayed in the popup should just be an expanded version of what is shown on the page.

      ​If you add the additional line of code in the "full-size" section then the popup will shown the full-size version of the image. As I note in the post, however, there is the potential for a stretched / squashed effect if the aspect ratios of the two versions of the image differ significantly. If this causes you any trouble, let me know.

      I hope that helps!

      Reply
      • Hi Dan,

        You can’t imagine how much I thank you for this, it works!! Can I ask you for a favour? I started this blog in 2000, so LONG time ago, and a lot of images are small in size. I understand that little by little I will have to replace them with better ones, but in the meantime, could we add a minimum width of at least 1080 to the full size image that opens in the Light Box?

        Reply
        • You're very welcome, Jo. I'm glad I could help!

          For the minimum width, ​I've just updated the post with a section on setting a min-width on the lightbox images. As I note in it, if you set the min-width too high you may find the images squashed vertically. If that happens, either reduce the min-width (if practical) or let me know and I'll try to come up with a solution that handles this better.

          Thanks!

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

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

      Reply
  3. 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
  4. 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
  5. 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.