Skip to content

Instantly share code, notes, and snippets.

@CoachBirgit
Last active January 19, 2022 06:33
Show Gist options
  • Save CoachBirgit/b0bed7679b9965a4ca51 to your computer and use it in GitHub Desktop.
Save CoachBirgit/b0bed7679b9965a4ca51 to your computer and use it in GitHub Desktop.
DIVI: add lightbox to regular content images
/* --- DEPRECATED --- */
/* add .et_pb_lightbox_image clss to content images */
add_filter('the_content', 'divi_add_lightbox');
function divi_add_lightbox($content) {
global $post;
$pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
$replacement = '<a$1href=$2$3.$4$5 class="et_pb_lightbox_image" title="'.$post->post_title.'"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
@cweinert
Copy link

Very cool, thanks so much!

Is there a way that I can have the image caption in the title field, and not the post title?

Thanks in advance,
Chris

@jfacemyer
Copy link

Ok, I found an issue with this. If you have an image which is linked to something other than an image, and they are both on the same line, it will add the lightbox class to the link, and when you click it, there will be a message saying the image couldn't be loaded (since the link is actually not to an image). e.g. a blurb's html outputs both image and link without a line break causing this headache.

The fix is simple - add an exclusion for any other tag opener before the image suffix thusly:

$pattern ="/<a(.*?)href=('|\")(.[^<]*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";

You'll see in the 3rd parenthetical reference I added:

[^<]

Seems to do the job without breaking anything.

@cweinert
Copy link

@jfacemyer: Thanks for the fix! Is there any chance you know a solution to my question above?

@Garconis
Copy link

Garconis commented Jul 11, 2017

It seems to throw errors, and not open the lightbox, if the lightbox was recently opened. E.g., if I click/open IMAGE1, and then close it. Then open IMAGE2. Then close that. IMAGE1 link won't open if I click on it.

It's adding this to the console:

Uncaught TypeError: Cannot read property 'top' of undefined at o._getOffset (jquery.magnific-popup.js?ver=3.0.62:26) at jquery.magnific-popup.js?ver=3.0.62:26

@OvidiuZeicu
Copy link

This works great for me, I've been using it on several websites with great success. However... there are a couple of things I would like to improve, but I don't have the necessary knowledge for that, so I tried a lot of Google search results with no success.
In the current form, the lightbox title of the image is the post/page title, so what I want to achieve is to make it display the image's title or alt text. Furthermore, it would be awesome to have all the lightbox-enabled images on a page as slides instead of be needed to close one to open another. I know that there are plugins that does pretty much the same thing, but usually also much more than that, and my goal is to keep it as simple as possible, with as few plugins as possible. It would be great to be able to have those simple things into functions.php and get everything sorted fast and simple. Thank you.

@mitchmenghi
Copy link

Works in latest divi stil, wondering why ET have not made this a default checkbox option for content images in the Divi Options panels ?

@danmossop
Copy link

I was getting the same error as @Garconis. I was able to fix it by invoking Magnific Popup on the link directly (using jQuery), instead of adding the "et_pb_lightbox_image" class as above. Details here:

Open Image Links within Posts in a Lightbox

@unostar
Copy link

unostar commented Mar 6, 2018

For those having problems with Uncaught TypeError: Cannot read property 'top' of undefined see the example code of a dirty hack:

<a class="et_pb_lightbox_image" href="{image_link}" target="_blank">{link_title}<img src="{image_link}" alt="" style="width: 0;"></a>

@EldarAgalarov
Copy link

EldarAgalarov commented Jul 11, 2018

But what if link points to an image but doesn't have img tag inside?
For example <a href="image.jpg"> will be wrapped with lightbox too!

My variant is most robust and correct. It wraps with lightbox only img's which have href's to images:

add_filter('the_content', 'divi_add_lightbox');
function divi_add_lightbox($content) {
    global $post;
    $pattern ='#(<a.*href=".*\.(?:bmp|gif|jpeg|jpg|png)")(.*>.*<img.*>.*</a>)#i';
    $replacement = '$1 class="et_pb_lightbox_image" title="' . $post->post_title . '"$2';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

@oldrup
Copy link

oldrup commented Jul 13, 2018

Thank you @EldarAgalarov - your snippet works on my Divi 3.9 development site.

@jfacemyer
Copy link

jfacemyer commented Feb 5, 2019

@EldarAgalarov, your code doesn't seem to work on the current versions of Divi and WP gallery (they don't trigger the lightbox) while the original does. I couldn't tell why.

I used the Gutenberg gallery block (though I think the code output is the same as the classic gallery).

@phirebase
Copy link

nice one :-)

@mahdiar
Copy link

mahdiar commented Nov 5, 2021

It doesn't work anymore!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment