WordPress.org

1. anseltaft
   Member
   Posted 2 years ago #

   Hi All,

   Is there a way to manipulate a gallery's shortcode for the REL tag? I use prettyphoto in my template and it would be really, really (really really really!) handy to be able to change the REL tag, so they all read REL="prettyphoto".

   Any ideas how to go about this??

   Thanks!

   Ansel

2. TM3909
   Member
   Posted 2 years ago #

   You can do that, but it would require modifying the core (which I have been told is a no no).

   No Core Mod:
   Add this to your functions.php file in your theme:
   

   add_filter('gallery_style', create_function('$a', 'return "
   <div class=\'gallery\'>";'));
   
   add_filter( 'wp_get_attachment_link' , 'add_lighbox_rel' );
   function add_lighbox_rel( $attachment_link ) {
   	if( strpos( $attachment_link , 'a href') != false && strpos( $attachment_link , 'img src') != false )
   		$attachment_link = str_replace( 'a href' , 'a rel="lightbox" href' , $attachment_link );
   	return $attachment_link;
   }

   and for good measure use the following jquery:
   

   $(".gallery a, .lightbox, .gallery a[rel^='prettyPhoto'], a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});

   I use several different classes and attributes to cover all basis.

   Core mod: go to your-wordpress-folder/wp-includes/post-template.php
   Line 941 - Make it look like this:
   return apply_filters( 'wp_get_attachment_link', "<a href='$url' rel='prettyPhoto[g]' title='$post_title'>$link_text</a>", $id, $size, $permalink, $icon, $text );

   The [g] is to allow for the "gallery" function to activate.

   Hope this helps!

3. anseltaft
   Member
   Posted 2 years ago #

   Hi TM,

   I will try the non-core method with a little bit more help. Where do I insert the jQuery code?

   That was the only place you lost me. :)

   Thanks!

   -Ansel

4. anseltaft
   Member
   Posted 2 years ago #

   Hmmm... I added the code to the functions tag, surrounded it with

   <?php
   ?>

   and received the following error:

   Warning: Cannot modify header information - headers already sent by (output started at /my/server/directory/structure/themes/liquid-magazine/functions.php:176) in /my/server/directory/structure/wp-includes/pluggable.php on line 868

   Any idea what went wrong? Is there a particular spot in functions.php that I need to drop it?

   Thanks,

   Ansel

5. TM3909
   Member
   Posted 2 years ago #

   Post your functions.php theme on pastie.org and link it here and I'll take a look.

   A simple way to add the jquery is to the header.php just before the ending /head tag. Where are you activating prettyphoto?

6. Jeremy Clark
   Moderator
   Posted 2 years ago #

   Copy and paste the contents of your functions.php file here -> http://wordpress.pastebin.ca/
   Then paste the link here.

7. anseltaft
   Member
   Posted 2 years ago #

   I pasted it as private. I've never used the site before, so I don't know if that would bar you from access or not. (Very cool site, though!)

   http://pastie.org/854177

8. TM3909
   Member
   Posted 2 years ago #

   This may be redundant, but I added the code to your pastie and pasted it here: http://pastie.org/855648 - Try that as your functions.php file.

   If that doesn't work, then you may be able to forget about adding the function all together and just use the jQuery to tell the standard gallery markup to lightbox. As I said, you would paste this into your header, just before </head>

   <script src="text/javascript">
   jQuery(document).ready(function($) {
   $(".gallery a, .lightbox, .gallery a[rel^='prettyPhoto'], a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
   });
   </script>

   Try that out and see what happens.

9. anseltaft
   Member
   Posted 2 years ago #

   I tried both and they wouldn't work.

   Personally, I am leaning toward the jQuery solution.

   Here's the page in question:

   http://www.anseltaft.com/general/expertzoo-com-scam-or-legitimate-business/4/

   Any ideas how to get it to work?

   Thanks,

   Ansel

10. anseltaft
    Member
    Posted 2 years ago #

    /bump

    Any other ideas how to go about auto-filling in rel="prettyphoto" into gallery tags?

    Thanks

    Ansel

11. anseltaft
    Member
    Posted 2 years ago #

    Oops. I meant <a> tags. :p

12. simplethemes
    Member
    Posted 2 years ago #

    I use this in my themes. This automatically adds a rel="prettyPhoto" attribute within all <a> tags that link to an image. You can obviously change the attribute. The code is simple and self explanatory.

    // Adapted and Modified from http://wordpress.org/extend/plugins/add-lightbox/
    // Adds a rel="prettyPhoto" tag to all linked image files
    
    add_filter('the_content', 'addlightboxrel_replace', 12);
    add_filter('get_comment_text', 'addlightboxrel_replace');
    function addlightboxrel_replace ($content)
    {   global $post;
    	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
        $replacement = '<a$1href=$2$3.$4$5 rel="prettyPhoto['.$post->ID.']"$6>$7</a>';
        $content = preg_replace($pattern, $replacement, $content);
        return $content;
    }

13. amp343
    Member
    Posted 1 year ago #

    Is there an advantage of actually printing out the explicit "rel" value for each of your image links, vs. setting prettyPhoto with jQuery?

    Just off the top of my head, I would think it would be pretty easy to just say,

    $(document).ready(function(){
    
       $(".gallery a").prettyPhoto();
    
    });

    ... or something of the like? to make all <a> tags inside elements with the .gallery class receive the prettyPhoto behavior.

14. simplethemes
    Member
    Posted 1 year ago #

    @amp343 That's definitely a much simpler and more efficient solution. Thanks, I'll give that a try as well.

Topic Closed

This topic has been closed to new replies.