Add rel="lightbox" to Wordpress Images | Deferred Procrastination

_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.

<code style="overflow:auto; max-width:91%;" class="block"><?php
/*
Plugin Name: add_rel_lightbox
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 */

add_filter('the_content', 'add_rel_lightbox', 2);

?>
</code>

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

Post meta

Taggged:

Browse posts

Comments

Gerda wrote, “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 wrote, “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..”

dalle wrote, “hi, patrick.... where i must place this script please reply in my email. thanks.”

Patrick Fenner wrote, “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.”

Vanessa Simpson wrote, “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 wrote, “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. ”

Jason Spatola wrote, “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.”

Patrick Fenner wrote, “What did you have to do to make it work with the_excerpt? I'm sure the main driving force for open source software is just that the problem is interesting! I've had a bash at including the gallery, although it means replacing the whole of the [gallery] shortcode code to do so. Code is up at github.com/DefProc/add-rel-lighbox, commit be081ea if you'd like to test it?”

Patrick Fenner wrote, “Done, tested and updated to version 0.2. github.com/DefProc/add-rel-lightbox/ or: wordpress.org/extend/plugins/add-rel-lightbox/ see also the new post: add-rel-lightbox version 0.2”

hainigen wrote, “hey! nice job! can i use img caption to lightbox title? like this ”

Patrick Fenner wrote, “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? See the most recent version: category > add-rel-lightbox”

Anita wrote, “Thank you very much for this plugin. Works really well.”

Patrick Fenner wrote, “Glad you like it, thanks!”

Patt wrote, “Hello Patrick, I was searching for this plugin for months! Bad for me because I'm not a developer. Thanks very much, Patt.”

Blog comments are closed, please get in touch with us.