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
/*
Plugin Name: add_rel_lightbox
Description: Add rel="lightbox[this_page]" to <a> 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);
?>
Now a WordPress Plugin, see the most recent version releses: Category > add-rel-lightbox
13 Comments
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
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..
hi, patrick….
where i must place this script
please reply in my email.
thanks.
Ah, I should really have mentioned that!
Copy the code into a file named
add_rel_lightbox.phpand 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.
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?
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.
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.
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?
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
hey! nice job!
can i use img caption to lightbox title?
like this
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>
See the most recent version: category > add-rel-lightbox
Thank you very much for this plugin. Works really well.
Glad you like it, thanks!