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