# Add rel=”lightbox” to WordPress Images

Now a WordPress Plugin, see the most recent version releses: Category > add-rel-lightbox

I really like the pop-up display style of lightbox and slimbox, and WordPress has a really nice integration for adding pictures, but the two don’t talk to each other automatically. Getting images insterted from the WordPress media dialogue has a few requirements:

• Automatically add the rel="lightbox" to a link that wraps an image, but only when the link points to the original image
• Be able to identify that the inserted image and link is the format inserted from the WordPress media library
• Add a caption to the lightbox that is correctly formatted to include any html characters. If you have to manually enter lightbox captions for the same picture on every page, then that’s much worse than only entering them once in the media library
• should fail gracefully if lightbox or slimbox is removed/deactivated
• Ignore link-wrapped-images that already have lighbox attributes set

What I’ve got in the form of a basic plugin is shown below.

When a page is loaded, the content is checked for standard link-wrapped-images that are produced from the “Add an Image” tool where they are linked to an original image. Where there is a match, the image caption is retrieved from the database, html characters are escaped and the rel=”lighbox” and caption are added to the link.

<?php
/*
Description: Add rel="lightbox[this_page]" to &lt;a&gt; wrapped image links in the content, and include captions for lightbox/slimbox
Version: 0.1
Author: Patrick Fenner (Def-Proc.co.uk)
Author URI: http://www.deferredprocrastination.co.uk/
*/

function add_rel_lightbox($content) { /* Find internal links */ //Check the page for link images direct to image (no trailing attributes)$string = '/<a href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"><img(.*?)class="(.*?)wp-image-(.*?)" \/><\/a>/i';
preg_match_all( $string,$content, $matches, PREG_SET_ORDER); //Check which attachment is referenced foreach ($matches as $val) {$slimbox_caption = '';

$post = get_post($val[5]);
$slimbox_caption = esc_attr($post->post_content );

//Replace the instance with the lightbox and title(caption) references. Won't fail if caption is empty.
$string = '<a href="' .$val[1] . '.' . $val[2] . '"><img' .$val[3] . 'class="' . $val[4] . 'wp-image-' .$val[5] . '" /></a>';
$replace = '<a href="' .$val[1] . '.' . $val[2] . '" rel="lightbox[this_page]" title="' .$slimbox_caption . '"><img' . $val[3] . 'class="' .$val[4] . 'wp-image-' . $val[5] . '" /></a>';$content = str_replace( $string,$replace, $content); } return$content;
}

/* Filter Hook */

?>


Now a WordPress Plugin, see the most recent version releses: Category > add-rel-lightbox

This entry was posted in add-rel-lightbox, Wordpress.
Follow any comments here with the RSS feed for this post.
The short url for this post is: http://def-proc.co.uk/b/matgf

1. Gerda
18th May 2011 at 11:31 am

Hi! This works great!
Well at first it didn’t, then i removed [this_page] from rel=”lightbox[this_page]” and it worked fine.

So i was wondering what the [this_page] is actually for?
(I’m still a beginner in coding…)

Gerda

• Patrick Fenner
19th May 2011 at 12:19 am

I’m actually using slimbox, so it could be the different options, I’m using the code as-is, and I have the Slimbox Plugin.

The suffix to lightbox lets you have several “flick-through” galleries on one page. i.e. if you have two galleries of images on one page all the pictures marked rel="lightbox[gallery1]" can be navigated through with the next, previous buttons, after you click on an image from gallery1, but a second gallery of images (marked rel="lightbox[gallery_2]") will only appear in their own set.

I can’t remember off the top of my head if just having rel="lightbox" keeps all the images as individuals though..

2. dalle
28th May 2011 at 4:42 am

hi, patrick….

where i must place this script

thanks.

• Patrick Fenner
31st May 2011 at 12:17 pm

Ah, I should really have mentioned that!

Copy the code into a file named add_rel_lightbox.php and place in the new folder: wp-content/plugins/add-rel-lightbox.

The file and folder name are not important, but it’s nice to know what you’ve got and where.

This has been getting a bit of interest recently, so I’m thinking about adding it to the WordPress plugins database, so it can be installed automatically.

3. Vanessa Simpson
22nd July 2011 at 12:05 am

Hi,

Thank you so much for the plugin. It is working great on my POST pages but unfortunately not on my regular PAGES. How can I get it to work here as well?

• Patrick Fenner
25th July 2011 at 3:38 pm

add_rel_lightbox makes no distinction between post or page (it’s called
whenever “the_content” is generated. However, it’s quite specific in the
form of the links it parses (so as not to match too widely).

Do you have any other plugins active that change the page content? It’s
possible that the plugin may not be seeing the links as you expect them
if another plugin changes them first.

Any changes you make to line 29 will just change the output form of the
link, but you have to make sure that the regular expression on line 16,
and the string on line 28 match each other if you’ve made changes to
either.

4. Jason Spatola
20th September 2011 at 6:10 am

Is there a way to hook this into the standard WordPress gallery? I set this up to also work with the_excerpt, and would like to know if there’s something similar to filter the gallery images.

5. hainigen
14th November 2011 at 6:52 pm

hey! nice job!
can i use img caption to lightbox title?
like this

• Patrick Fenner
16th November 2011 at 12:23 pm

It will automatically add the image description to the link, if it is set in the Media Library by adding changing the title attribute in the link. Is this what you mean?

<a href=”/url/to/image.jpg” ref=”lightbox[post]” title=”html escaped description”><img… ></a>