Add rel Attribute to Image Links in WordPress Galleries

If you want to use either Fancybox or Lightbox scripts for image galleries, you need to add the rel attribute to all full size image links. Here is how to do it:

add_filter('wp_get_attachment_link', 'add_gallery_id_rel');
function add_gallery_id_rel($link) {
	global $post;
	return str_replace('<a href', '<a rel="gallery-'. $post->ID .'" href', $link);
}

We simply replace <a href with <a rel="gallery-n" href where n is a unique post ID. This filter is applied in /wp-includes/post-template.php.

Use Contact Form 7 to collect business leads and enquiries? I created Storage for Contact Form 7 plugin which stores them safely in WordPress database.

Get it now for only $19 →

24 Comments

  1. Thank, just what I needed for a project I’m working on.

  2. Vince says:

    Very interesting! However I manually included a rel attribute in most of my old posts. Would there be an easy way to check for the existence of a current rel attribute in each tag with an if/else statement so that a double rel doesn’t get added? Yeah, I know, how lazy of me to ask, but I’m still finding my way around PHP…

  3. Kaspars says:

    Yes, Vince. Simply check if rel=" is present, before replacing it:

    function add_gallery_id_rel($link) {
    	global $post;
    	if (strpos($link, ' rel="') == false)
    		return str_replace('<a href', '<a rel="gallery-'. $post->ID .'" href', $link);
    	else
    		return $link;
    }
  4. Vince says:

    Thank you very much! I’m adding this to my list of planned improvements; I’ll have to adapt it to Shadowbox but that shouldn’t be too difficult…

  5. Bassaddicted says:

    Would i add this in my functions.php ? or the mentionned post-template.php ?

  6. Bassaddicted says:

    jQuery(“div.gallery .gallery-icon a”).attr(“rel”, “prettyPhoto[gallery]“); Will Work replace jQuery with ($) if your not en-queuing jQuery

    jQuery(document).ready(function(){
    jQuery(“div.gallery .gallery-icon a”).attr(“rel”, “relAttributeName”);

  7. Vince says:

    Update: First implementation did not work for me because of initially sloppy coding: I have tons of old posts where the order of my link attributes is inconsistent. Title might come first in one, rel in the next, etc.

  8. Excellent approach and thanks!

    Only issue I see is that this adds the rel attribute to both image links and attachment links. Wouldn’t it be better if it only applied this attribute to image links?

  9. Kaspars says:

    That’s correct, Josh. I have since decided that using javascript for adding the rel attributes (before calling the lighbox-type of scripts) is a better way of doing it.

  10. Kaspars says:

    Or you could simply use the if (!is_attachment()) check before doing anything.

  11. I’m gonna paste some code here so hopefully it goes through ok. I used your PHP code with some JavaScript. Might be over kill but I get the expected result…

    [code] // Initialize prettyPhoto
    $(‘.gallery-icon a[href*=”.bmp”], .gallery-icon a[href*=”.gif”], .gallery-icon a[href*=”.jpeg”], .gallery-icon a[href*=”.jpg”], .gallery-icon a[href*=”.png”]’).prettyPhoto({
    theme: ‘pp_default’, /* light_rounded / dark_rounded / light_square / dark_square / facebook */
    deeplinking: false, /* Allow prettyPhoto to update the url to enable deeplinking. */
    social_tools: false
    });[/code]

  12. James Tryon says:

    Thanks SO SO SO SO much, just spent half my Sunday trying to make something like this work.

  13. Kaspars, thank you and to you as well, Vince!

  14. Wow, just spent 4 hours trying to fix this. Thanks so much for sharing… worked like a charm!

  15. Josh says:

    Awesome, worked a treat!! Nice and easy. Thanks.

  16. Charles says:

    Very Nice! Exactly what I needed to get the script loaded by the theme to also work on my native gallery! Thx!

  17. Nat says:

    Thanx for your tip, it works perfectly!

    I have a question:
    My problem is to have multiples galleries on a same post – each galleries must show only their own images (from ids in the shortcode).
    So, do you have any idea to assign to each galleries a different id ?
    I thought about a “while” or “foreach” but honestly i dont know hot to put it in the function file!
    How to create an id per gallery?

    Thanx for helping!

    • Kaspars says:

      Nat, there is no easy way of doing it via PHP, so my suggestion would be to use javascript instead — a script that loops through all galleries and appends the gallery index to rel attribute of each image within that gallery. Something like this should work:

      jQuery('.gallery').each( function(g) {
          $('a', this).attr('rel', function(i, val) { return val + '-' + g; });
      });

      Here is a working example of this idea.

  18. Nat says:

    thanx for the rapid solution do you have!

    it works very well and i learn a little more about jquery with this one ^^

  19. Dan says:

    I’m using a Vanilla Forum, so if I’m out of place by asking this here than please disregard this message. How can I alter this bit of code that adds a rel attribute to image links to fit my forum? I would also need it to be by post ID.

    Thank you much in advance.

  20. Kaspars says:

    I would suggest that you implement a javascript only solution for your Vanilla forum, like the one described in this post, Dan.

  21. Dan says:

    Thank you! Got it all fixed.

  22. Mathieu says:

    You rock, just what i looked for.

Leave a Reply