How to use prettyPhoto in WordPress Galleries

Print Friendly, PDF & Email

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:

Tags: ,

30 Responses to “How to use prettyPhoto in WordPress Galleries”

  1. David January 13, 2015 at 9:20 pm #

    Work to 100%. Great great Work!!!

  2. Frank Puschmann September 10, 2013 at 7:46 am #

    this works great thanks.

    But i have an issue, when i work with several tabs in one article and on these are more than one gallery and when i open one gallery i see the pictures from both.

  3. zlogukni September 3, 2013 at 12:21 pm #

    It works great, but only for post template pages. Any idea how to make it work on page templates as well?

    Thanks!

  4. Tovar August 3, 2013 at 11:53 am #

    Thank you very much!, works fine.

  5. HuxburyQuinn October 29, 2012 at 1:26 pm #

    I ran into the same problem with ThemeFuse Frame work.
    It has a shortcode setup for a imagegallery with prettyPhoto
    http://themefuse.com/demo/wp/qlassik/lightbox/
    however it requires knowing both the URL to the image and thee URL to the Thumbnail

    So I went looking for a more elegant solution for my client

    I though I would share this plugin.

    http://wordpress.org/extend/plugins/prettyphoto-media/

    http://binaryhideout.com/prettyphoto-media-wordpress-plugin/

    cheers ; )

  6. Andrew Hudson September 12, 2012 at 12:49 pm #

    Do you know how it is possible to remove the title=”” attribute from the link that is around the img?

  7. Michael June 3, 2012 at 2:28 pm #

    Nice one – only problem is: prettyPhoto does not work with WP 3.3.2

    Actually all code is placed nicely and looks good, filters apply but nothing happens. images still come ‘pure’ in the main browserwindow.

    If anyone found a workaround for whatever problem WP 3.3.2 causes, i would be eternal (well almost) thankful if you could post it here 🙂

    • Steve June 3, 2012 at 2:38 pm #

      Erm.. it does – this site is using 3.3.2 at the moment. I think it may be that you are not using tyhe latest build of prettyPhoto? The one that ships with a few plugins I have seen won’t run with later versions of jQuery bundled with WP.

  8. Daniel Gutiérrez May 16, 2012 at 10:03 pm #

    (IMHO, you should have a “like” facebook button ;))

  9. Daniel Gutiérrez May 16, 2012 at 10:03 pm #

    This is exactly what I needed, thx a lot!

  10. larsbars April 29, 2012 at 4:09 am #

    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.

  11. Matt January 26, 2012 at 4:21 am #

    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

    • steve January 26, 2012 at 9:13 am #

      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?

  12. Sintl December 13, 2011 at 2:18 pm #

    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

  13. Sintl December 13, 2011 at 3:18 am #

    In above wp hook, How can I exclude Page Id (not post).

  14. kev November 28, 2011 at 4:56 pm #

    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.

    • steve November 28, 2011 at 5:03 pm #

      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.

    • kev November 28, 2011 at 8:20 pm #

      ok, its working now. simple change – when inserting gallery i didn’t link the thumbnails to image file. doh!

  15. Nina October 6, 2011 at 5:51 am #

    I second Michael’s post — you nailed it!
    Exactly what I needed.

    THX

  16. Tim August 25, 2011 at 5:20 am #

    Umm, your prettyPhoto demo images do not work.

    • steve August 25, 2011 at 7:10 am #

      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 🙂

  17. Arpit August 3, 2011 at 8:43 am #

    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

  18. Ranjan Rajgopaul July 27, 2011 at 8:23 pm #

    absolutely amazing…thanks!

  19. Jürgen June 16, 2011 at 9:32 am #

    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

    • zlogukni September 3, 2013 at 12:08 pm #

      Jürgen, Would you be so kind to share code for pages?

  20. Ivan Novak June 6, 2011 at 12:28 am #

    Works perfectly, thanks!

  21. rickyboy March 17, 2011 at 2:28 pm #

    Amazing! Thanks a lot.

  22. Dominic Allkins February 21, 2011 at 4:01 pm #

    Prefect. Adding the function makes it so easy to do 🙂

  23. Michael Lovelock September 28, 2010 at 11:09 pm #

    Excellent work, thanks – this is *exactly* what I was looking for!

Trackbacks/Pingbacks

  1. Using prettyPhoto develop code to work with Wordpress gallery • PHP Help Coding Programming - April 15, 2014

    […] http://www.sant-media.co.uk/2010/07/how-to-use-prettyphoto-in-wordpress-galleries/ […]

Leave a Reply

Bot test * Time limit is exhausted. Please reload the CAPTCHA.