X

Add rel=”lightbox” to All Images Embedded in a Post

Snippets by IsItWP

Are you looking for a way to add lightbox attribute to all the images embedded in your posts? While there’s probably a plugin for this, we have created a quick code snippet that you can use to add rel=”lightbox” to all images embedded in a post and also add the post title as the title attribute of the image anchor tag in WordPress.

Instructions:

All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:

add_filter('the_content', 'my_addlightboxrel');
function my_addlightboxrel($content) {
       global $post;
       $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}

Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.

If you liked this code snippet, please consider checking out our other articles on the site like: How to transfer WordPress from local server to a live site and 7 best WordPress lead generation plugins.

Comments   Leave a Reply

  1. If there’s a custom link or a link to the attachment page this adds the data attributes to the image instead which breaks the link. It also breaks srcset images.

  2. ???????! ????????!

  3. How would i go about changing the title attribute to display the images caption intstead? I’ve tried replacing .$post->post_title. with .$attachment->post_excerpt but doesn’t work. Any idea what I’m doing wrong?

  4. well. that’s what makes me happy today.. thanks ))

  5. Hi all! It’s sounds great, but is there any exact place in the function.php where to put the code?

  6. Thanks. Perfect.

  7. How to use it for video? WordPress autoembed feature is great, but I hate it that if I want to show the video in lightbox, I’ve to add some class etc to the video. It’d great it there’s workaround to autoadd the rel=lightbox to video too 😀

  8. Thank you for this!

  9. Worked beautifully! Thanks!

    1. Cool glad to hear you like the snippet.

  10. Thank you for this!

    1. No problem glad you like the snippet, be sure to follow wpsnipp or like us for new snippets! Enjoy.

  11. Wordpress : How to add rel=”lightbox” to all images embedded in a post « Wordpress « Cms « Codes php – Share your php snippets October 14, 2011 at 5:41 am

    […] WPsnipp [!] Report this snippet Processing your request, Please wait…. […]

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!