Yesterday I’ve posted in my Lithuanian blog about Street Music Day in Vilnius. With three photos attached I thought to try out WordPress galleries functionality. Yes, I’ve never used it before 
Regular 150×150 thumbnails were outputted but for some reason lightbox functionality didn’t work. On my blog I use Lightbox Plus Colorbox plugin which perfectly does single image lightboxing, however, failed with galleries. Anyway, the beauty of opensource is that I can debug and fix it myself. Here’s how I fixed it.
After quick googling around found couple reports on this issue – at WordPress forum there was 2 years old topic about issues with gallery lightboxing after upgrading to WordPress 3.5. Well current WordPress version is 4.2.2 so thread is really old. Anyway, there was reply by 23Systems (creators of Lightbox Plus Colorbox plugin) refering to FAQ which explains options needed to enable for galleries to work with lightbox:
Does Lightbox Plus work with WordPress’ built in gallery
Yes it does. There are few simple requirements however. You must set Link thumbnails to: Image File or use [gallery link=”file” for the gallery options. You must check Use For WP Gallery box under Other Lightbox Plus Settings
Unfortunately option Use For WordPress Galleries was already enabled on my site and it didn’t help – gallery images were opening direct link to photo in new browser tab without popping-up nice lightbox. After reading a bit through WordPress documentation and taking a look to Lightbox Plus Colorbox code I was suspecting my theme.
As you might easily discover on my blog I use Avada theme. It has so many features and functionalities that it my suspicion was well reasoned – theme probably alters gallery shortcode before it is outputted and if not mistaken, with version 3.8.3 some advanced commercial-grade lightbox was added to theme. Let’s trace what happens under the hood of Avada.
First of all I needed to discover which WordPress filter is related so that I could start digging into theme functions. As gallery image is nothing but attachment, lightbox can be tied to it through link element (<a>) which for attachment is returned by wp_get_attachment_link. We now know what to look for inside theme files, but first let’s see what exactly causes lightbox not showing up.
Single images are outputted by such HTML:
<a class="cboxElement" title="Gatvės muzikos diena 2015 Vilniuje" rel="lightbox⌈1819⌉" href="https://blog.gyt.is/wp-content/uploads/2015/05/gatves-muzikos-diena-2015-vilnius-1.jpg"> <img class="alignnone size-thumbnail wp-image-1820" width="150" height="150" alt="Gatvės muzikos diena 2015 Vilniuje: styginių kvartetas" src="https://blog.gyt.is/wp-content/uploads/2015/05/gatves-muzikos-diena-2015-vilnius-1-150x150.jpg"> </a>
Please note: in above source I replaced square brackets in rel attribute value with ceilings because WordPress parses square brackets as shortcodes with high priority, so there is trouble to display them in code highlighting block. Attribute physically looks like this: rel=”lightbox[1819]”.
Such image is nicely lightboxed:
Usage of WordPress gallery is very straightforward – in Text editor mode you would not see any HTML – it’s just shortcode like this with image IDs listed:
[gallery link="file" ids="1820,1822,1824"]
And only when looking to rendered post version you would see following HTML code:
<a class="cboxElement" title="Gatvės muzikos diena 2015 Vilniuje" href="https://blog.gyt.is/wp-content/uploads/2015/05/gatves-muzikos-diena-2015-vilnius-1.jpg" rel="prettyPhoto⌈postimages⌉" data-caption="Gatvės muzikos diena 2015 Vilniuje" data-title="Gatvės muzikos diena 2015 Vilniuje> <img class="attachment-thumbnail" width="150" height="150" alt="Gatvės muzikos diena 2015 Vilniuje: styginių kvartetas" src="https://blog.gyt.is/wp-content/uploads/2015/05/gatves-muzikos-diena-2015-vilnius-1-150x150.jpg"> </a>
Notice rel element value: rel=”prettyPhoto[postimages]” – that is the reason my lightbox doesn’t capture images – rel attributes are overwritten to support prettyPhoto which is nothing but different jQuery lightboxing clone. Avada documentation has a topic describing how to turn prettyPhoto off, but it does not stop rel attributes being overwritten since that is done by following function in functions.php file from Avada theme root directory:
add_filter('wp_get_attachment_link', 'avada_pretty');
function avada_pretty($content) {
$content = preg_replace("/<a/","<a rel=\"prettyPhoto[postimages]\"",$content,1);
return $content;
}
Wasn’t difficult to find that we are interested in avada_pretty function as it hooked to wp_get_attachment_link filter.
There are no cases or exceptions based on “Disable Lightbox” option from theme settings, so to avoid rel attribute rewriting, we have to comment highlighted line out.
After this small change gallery images has proper rel element – rel=”lightbox[1819-1]” – which is then handled by Lightbox Plus Colorbox like this:
My preference would be to override function declaration in child theme’s functions (wp-content\themes\Avada-Child-Theme\functions.php) like this:
if( ! function_exists( 'avada_pretty' ) ) {
function avada_pretty($content) {
return $content;
}
}
In such case I wouldn’t need to touch main functions file (wp-content\themes\Avada\functions.php) and preserve change accross updates, but the problem is in avada_pretty function declaration – if it is declared in child theme, child’s functions.php is executed first and when it comes to parent theme’s functions.php it returns error complaining that function is already declared. To fix this problem theme creators should wrap avada_pretty function with additional if:
if( ! function_exists( 'avada_pretty' ) ) {
function avada_pretty($content) {
$content = preg_replace("/<a/","<a rel=\"prettyPhoto[postimages]\"",$content,1);
return $content;
}
}
I was very happy to receive feedback from Theme Fusion after posting about Avada breadcrumb trail fix, so I hope functions.php will receive this small change in the next theme version – in that case Avada would be perfectly compatible with Lightbox Plus Colorbox which is my favourite lightbox plugin because of so many customization options 🙂
Update (July 18th)
Attention! Above code changes applies to Avada theme version 3.8.4. If you have recently updated to latest version like I did, please read further.
Since Avada version 3.8.5 (see changelog here) function avada_pretty does not exist on functions.php anymore. Adding of rel=”prettyPhoto” has been moved to includes/class-avada-images.php under new function pretty_links:
/**
* Adds rel="prettyPhoto" to links
*/
public function pretty_links( $content ) {
$content = preg_replace( "/<a/", "<a rel=\"prettyPhoto[postimages]\"" ,$content, 1 );
return $content;
}
There you have to comment or delete line 15 to make Lightbox Plus Colorbox work again.
Update (August 4th)
Issue is solved with Avada version 3.8.6 – see changelog:
– improved usability with light box plus color box
What ThemeFusion did (see their reply to my tweet) was adding extra check in class-avada-images.php:
if ( ! $smof_data['status_lightbox'] ) {
add_filter( 'wp_get_attachment_link', array( $this, 'pretty_links' ) );
}
So now if you switch off Avada’s Lightbox, pretty_links function will not be hooked therefore you don’t need to edit Avada’s files.
Nice that theme creators value feedback and suggestions!
Leave A Comment