Just a quick hack I thought I would document to help anyone else out there wondering how to do this.
WordPress now has a simple gallery shortcode, to enable the inclusion of a gallery of all images associated with your post. By default, you just get a grid of images that either link to another page containing the image, or a link directly to the image. Either way, it’s not terribly pretty, and it seems tantalisingly close to something that would look half decent if only something like prettyPhoto (a lightbox clone) could be leveraged. It can!
The gallery shortcode goes something like this:
[gallery link="file"]It is fully documented here. Basically, this uses the function wp_get_attachment_link inside the /wp-includes/post-template.php file. You could either hack the core function (line 970 on WP3.0) changing:
return apply_filters( 'wp_get_attachment_link', "<a href='$url' title='$post_title'>$link_text</a>", $id, $size, $permalink, $icon, $text );to
return apply_filters( 'wp_get_attachment_link', "<a href='$url' title='$post_title' rel='prettyPhoto[slides]'>$link_text</a>", $id, $size, $permalink, $icon, $text );A better solution
After a bit of reading (thanks to ThemeShaper), I figured out how to use the hooks system, to build a simple function, and filter to modify the output of wp_get_attachment_link. Just pop this code into your template’s functions.php file:
add_filter( 'wp_get_attachment_link', 'sant_prettyadd');
function sant_prettyadd ($content) {
$content = preg_replace("/<a/","<a rel=\"prettyPhoto[slides]\"",$content,1);
return $content;
}Obviously, you could alter the regex above to do just about anything you like to the output of wp_get_attachment_link, but this does what I set out to do.
PrettyPhoto installation
Obviously, this requires prettyPhoto to be installed and activated on the page for the effect to work. prettyPhoto is available as a WP Plugin – much easier than hacking it into your theme manually. Here’s a sample of how it works:
Steve I have it dialed in and it’s been working seamlessly, BUT… How do I enlarge the initial thumbnails on the page? I don’t mean in photoshop, but if I want an image to go from 212px to 300px in the gallery, do I edit the css or code in the main page? I installed in 2009 and haven’t done any heavy editing in 2 years. Using Golive CS2 – T.I.A.
This is exactly what I need, but I must be an idiot because I can’t get it to work. Not 100% sure where to add the code to my template’s functions.php file. Each time I do it I get an error.
Does it matter that I am putting the modified functions.php file in my template-child folder?
PrettyPhoto came with my theme.
Thanks in advance
Hi Matt, Should work fine – I just tested it on 3.3.1 and it caused no error. You just put this in functions.php either in your main template theme, or childtheme directory. Perhaps the function name conflicts with your theme. What error are you seeing?
Hi,
In above hook, is there way to indicate exclusion of page id’s and only considers post id’s.
Gallery short code allows exclusion but my design is not picking up exclusion of page id so thought if there is a way to hard code that in hook
Thnx
In above wp hook, How can I exclude Page Id (not post).
hey
i’m using prettyPhoto within a theme on a localhost using WAMP.
it seems to be loading up the lightbox but can’t find the image. would there be anything in the code that would conflict with using localhost? i’m no expert btw.
Nothing that I know of, Kev… does it work without Pretty Photo? i.e. do you see the picture? If so, then it may be a compatibility issue between PPhoto and the version of qjuery being used. You shoud upgrade the Prettyphoto files to the latest release, and try again.
ok, its working now. simple change – when inserting gallery i didn’t link the thumbnails to image file. doh!
I second Michael’s post — you nailed it!
Exactly what I needed.
THX
Umm, your prettyPhoto demo images do not work.
Thanks Tim! Looks like jquery may have been updated recently in WP, breaking the old prettyPhoto that was embedded in the theme on my site (Woo Optmize). I just replaced it with the latest version of prettyPhoto and we’re back in business
I wanted to hack it rather than using wp plugin. please help me integrating it to my theme
wp plugin is outdated and no longer works
absolutely amazing…thanks!
Hey, your code blog saved my day.
I already had a custom tailored theme with prettyPhoto integrated. But it only worked with posts, not with pages.
Thanks to you small addfilter hook I was able to use it with pages’ galleries as well.
Thanks
Works perfectly, thanks!
Amazing! Thanks a lot.
Prefect. Adding the function makes it so easy to do
Excellent work, thanks – this is *exactly* what I was looking for!