Add PrettyPhoto rel= to tiled gallery

Hello all

I worked it out on me own and here’s how:

click on the plugin editor in your wordpress back end, find the file titled “tiled-gallery.php” down the right handside.

on line 253 you will find this:

$output .= '<div class="tiled-gallery-item tiled-gallery-item-' . esc_attr( $size ) . '"><a href="' . esc_url( $link ) . '"><img ' . $this->generate_carousel_image_args( $image ) . ' src="' . esc_url( $img_src['url'] ) . '" width="' . esc_attr( $image->width ) . '" height="' . esc_attr( $image->height ) . '" align="left" title="' . esc_attr( $image_title ) . '" /></a>';

add this rel="prettyPhoto"

after this: <a href="' . esc_url( $link ) . '"

so that it looks like this: <a href="' . esc_url( $link ) . '" rel="prettyPhoto" >

Then bobs your uncle, you have pretty photo lightbox working with a tiled mosaic gallery.

p.s. don’t forget you need to have both plugins installed, and also remember to untick “Display images in full-size carousel slideshow.” in settings/media

You really don’t want to do that. When a plugin update comes out you’ll lose all of your changes.

That carousel output is filterable, meaning the output can get that rel="prettyPhoto" added to image links without modifying the plugin.

I’ll poke at it tonight and reply here. Filters is my favorite WordPress feature. ??

Ah yeah valid point Jan, hadn’t thought of that. Still haven’t got my head around filters. I look forward to hearing how you get on.

Cheers

All the best

Rook

I got tied up last night but tonight I’ll post a solution. ??

It took me a little longer than I wanted but this plugin may get you what you are looking for.

I filtered the_content and looked for this match from the gallery output.

<a href="https://..."><img data-attachment-id=

And inserts a rel="prettyPhoto" inside the end of that <a href="...">

Which I think accomplishes what you wanted to do. If I put the new rel= in the wrong place then please let me know in this topic.

Using a plain text editor (notepad, notepad++, or TextWrangler are good) and take the below PHP code and paste it into wp-content/plugins/add-prettyphoto.php on your WordPress installation.

Once that’s done visit your WordPress dashboard plugin menu and activate the PrettyPhoto for galleries plugin.

If anything goes wrong then just delete that one new file wp-content/plugins/add-prettyphoto.php you created and that will fix it.

https://pastebin.com/F5VRWFPH

<?php
/*
Plugin Name: PrettyPhoto for galleries
Description: This plugin adds rel="prettyPhoto" for galleries
Author: Jan Dembowski
*/

add_filter( 'the_content', 'mh_add_prettyphoto' , 15 );

function mh_add_prettyphoto( $text ) {

        // RegEx to find the right <a href=...><img data-attachment-id=... and put that into an array
        $mh_regex = "/<a href=\"(http|https):\/\/[a-zA-Z0-9-.\/\?=]+\"><img\ data-attachment-id=/";

        // Use that RegEx and populate the hits into an array
        preg_match_all( $mh_regex , $text , $mh_matches );

        // If there's any hits then loop though those and replace those hits
        for ( $mh_count = 0; $mh_count < count( $mh_matches[0] ); $mh_count++ )
                {
                        $mh_old = $mh_matches[0][$mh_count];
                        $mh_new = str_replace( '><img data' , ' rel="prettyPhoto"><img data' , $mh_old );
                        $text = str_replace( $mh_old  , $mh_new , $text );
                }
        // Return any substitutions
        return $text;
}

Wow thanks Jan

That’s a great approach, it worked initially, but I then deleted all the images off my site and re uploaded bigger versions, now for some reason only some of the images open in prettyPhoto and the rest don’t. I know its a tall order, but can you think of any reason this might happen?

thanks loads for the plugin though, its great. You should adjust it so that anyone can easily change what rel is added to the gallery, for other lightboxes and situations.

thank you so much

All the best

Harry

It may be that the lightbox plugin doesn’t work with large images. Which one are you using?

You should adjust it so that anyone can easily change what rel is added to the gallery

That part is easy. ??

Just modify this line and replace the rel="prettyPhoto" with whatever you like.

$mh_new = str_replace( '><img data' , ' rel="prettyPhoto"><img data' , $mh_old );

I tried to make the regex as specific as I can for that gallery but for adding that to any img tag you’d have to change that regex as well.

Hi Jan

Yeah it does work with large images normally(well it has in the past), I’m using prettyPhoto media.

Ah yeah I worked out how to change the rel myself I meant for someone who doesn’t understand code, cause there is no plugin to perform this that ive found out there(although I now have yours).

Would it be possible to stop it functioning on mobile devices?