Gallery Shortcode for REL tag?

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!

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

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

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?

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

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!)

https://pastie.org/854177

This may be redundant, but I added the code to your pastie and pasted it here: https://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.

I tried both and they wouldn’t work.

Personally, I am leaning toward the jQuery solution.

Here’s the page in question:

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

Any ideas how to get it to work?

Thanks,

Ansel

/bump

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

Thanks

Ansel

Oops. I meant <a> tags. :p

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 https://www.ads-software.com/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;
}

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.

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