Add lightbox effect doesn't work with gallery shortcode

[rsmith4321]

I have a gallery shortcode inserted with the shortcode block like [gallery ..... link="file"] so each image should be linked to its source image. And without any amp settings selected it works correctly. However, if in the AMP settings in the shortcode block editor sidebar I have selected to "Add lightbox effect", then the the links to the source images disappear and the lightbox doesn’t work. It’s is the same as if link=”file” is not in the shortcode.

Originally https://wordpress.org/support/topic/amp-carousel-doesnt-have-alt-tags/

[rsmith4321]

This isn't a "Help Request" I'm reporting a bug. Has anyone tested a standard wordpress gallery shortcode with the "add lightbox effect" option selected but the "display as carousel" option not selected?

The lightbox doesn't work. Can someone please test this, unless it something specific to my site but I don't think it is? Thanks!

[westonruter]

I can confirm this is a bug. If carousel is not enabled, then no lightbox is applied.

[westonruter]

I believe the problem is rooted in this code:

amp-wp/includes/embeds/class-amp-gallery-embed.php

Lines 165 to 176 in 1b8afd9

	public function maybe_override_gallery( $html, $attributes ) {
	$is_lightbox = isset( $attributes['amp-lightbox'] ) && true === filter_var( $attributes['amp-lightbox'], FILTER_VALIDATE_BOOLEAN );
	if ( isset( $attributes['amp-carousel'] ) && false === filter_var( $attributes['amp-carousel'], FILTER_VALIDATE_BOOLEAN ) ) {
	if ( true === $is_lightbox ) {
	remove_filter( 'post_gallery', [ $this, 'maybe_override_gallery' ], 10 );
	$attributes['link'] = 'none';
	$html = '<ul class="amp-lightbox">' . gallery_shortcode( $attributes ) . '</ul>';
	add_filter( 'post_gallery', [ $this, 'maybe_override_gallery' ], 10, 2 );
	}
	return $html;
	}

[rsmith4321]

Thanks, I was actually looking though that code as well but I don't know enough to fix it myself. It's adding a class="amp-lightbox" to the ul which I don't think does anything. It needs to just add lightbox attribute to the end of each <amp-img> tag, then even better it could use figcaption or alt for description as described here https://amp.dev/documentation/components/amp-lightbox-gallery/?format=websites

[rsmith4321]

Has anyone had a chance to look at this bug?

[westonruter]

I don't believe so, but we have it prioritized in the project board we are currently working through: https://github.com/ampproject/amp-wp/projects/13

[kienstra]

Steps To Test

Hi @csossi,
Sorry for the delay. Here are some steps to test this on the staging site:

1. Create a new post
2. Add a Shortcode block
3. Paste this in the block:

[gallery ids="3079, 2376, 1714"]

4. Select 'Add lightbox effect'
5. Save the page, and go to the AMP URL on the front-end
6. Expected: on clicking an image, the lightbox appears
7. Go back to the block editor, and paste this in the same Shortcode block:

[gallery ids="3079, 2376, 1714" link="file"]

8. Save the page, and go to the AMP URL on the front-end
9. Expected: just like in step 6, clicking on an image causes the lightbox to appear

[csossi]

• not seeing Lightbox effect here. on clicking image, user is redirected to page containing the image

[schlessera]

Hi @csossi,
I was just able to test this on the staging site as well after getting access.
What I'm seeing is that it works as expected, but the site is configured in such a way that you need to switch to the AMP version of the post first. On the non-AMP version, this has no effect.

Can you recheck and confirm that you are testing on the AMP version of the page?

https://cl.ly/d89f5f783617

[csossi]

Ugh! Right you are @schlessera - wasn't checking the AMP URL - all good here

[csossi]

Verified in QA

[rsmith4321]

I just tested the latest version of the amp plugin. I have the lightbox option set on the gallery shortcode but the images still do not open in the lightbox. You can check out an example here https://www.ryansmithphotography.com/blog/2019/09/30/bridal-portraits-on-the-conway-river-and-new-garden-walks-with-the-nikon-d850/

[westonruter]

@kienstra Would you please double-check this?

[kienstra]

Sure, Weston!

[kienstra]

Question About Caching

Hi @rsmith4321,
Thanks for letting us know. I also see the issue on the link you shared, where the gallery shortcode with 'Add lightbox effect' checked doesn't actually open a lightbox on clicking it:

[gallery ids="3762, 3470, 3327, 2877" link="file"]  // Only example IDs, of course.

Is there anything you could do to clear the cache on that URL, if that applies?

It looks like it's using WP Rocket:

<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1570044620 -->

Though not to cast blame. It's showing the latest version of the AMP plugin, so it could still be a bug with the plugin:

<meta name="generator" content="AMP Plugin v1.3.0; mode=standard; experiences=website">

Locally, I couldn't reproduce the issue using the 1.3.0-built tag.

The expected behavior with the latest (v1.3.0) is that when link="file" and 'Lightbox', the <amp-img> tags aren't wrapped in <a> tags:

The fact that they're wrapped in <a> tags suggests that something is wrong. Maybe with caching, maybe with the plugin:

[rsmith4321]

The issue seems to be in my custom filter in functions.php. Instead of using attributes in the shortcode itself I had the following filter. However if I remove this and add link="file" directly in the shortcode it works. Do you know how I could correct this filter so it would work?

add_filter( 'shortcode_atts_gallery', function( $atts ) { $atts['size'] = 'large'; $atts['columns'] = 1; $atts['link'] = 'file'; return $atts; } ); add_filter( 'use_default_gallery_style', '__return_false' );

[kienstra]

Ah, thanks for sharing that filter. I can reproduce the issue with that. I'll look at this and get back to you.

[rsmith4321]

Great I appreciate it, using a filter is much better for me than editing each gallery shortcode.

[kienstra]

Question About Workaround

Hi @rsmith4321,
Sure, it sounds like using the filter is easier for your workflow than editing the individual shortcodes.

But as a workaround, would it be possible to remove $atts['link'] = 'file'; from the filter? Unless that filter is also needed on non-AMP URLs.

For AMP, it shouldn't be necessary to add link="file" to the shortcode string, as the plugin overwrites it.

[gallery ids="3762, 3470, 3327, 2877" size="large"]

It looks like your site is using Standard mode, which is great! If there happen to be non-AMP URLs with the gallery shortcode, the link="file" string would be needed.

Thanks, Ryan!

[rsmith4321]

Your right, without that link="file" it seems to work correctly and the lightbox is great with the slideshow function and captions! One other question, instead of going to each gallery shortcode in the editor and clicking the add lightbox effect checkbox. Would there be any kind of filter I could add to my functions.php that would default to on the add lightbox effect on all gallery shortcodes?

[rsmith4321]

One other thing I've noticed, with add lightbox effect disabled the original image size will be linked too which is what I want. However with the lightbox effect on it seems to just load the large thumbnail size in the lightbox. Is it possible for the lightbox to display the original image file?

[kienstra]

One other question, instead of going to each gallery shortcode in the editor and clicking the add lightbox effect checkbox. Would there be any kind of filter I could add to my functions.php that would default to on the add lightbox effect on all gallery shortcodes?

That'd be useful 😄 But unfortunately, I couldn't find a way to do that.

The method that adds the lightbox runs as a filter of post_gallery, and there unfortunately isn't a way that I can find to add the lightbox before it runs.

[kienstra]

Hi Ryan,

One other thing I've noticed, with add lightbox effect disabled the original image size will be linked too which is what I want. However with the lightbox effect on it seems to just load the large thumbnail size in the lightbox. Is it possible for the lightbox to display the original image file?

Hm, interesting.

Could you please share a link with that issue, and an image where it exists (if it's a different link from the one you shared)?

In the link you shared above, it looks like the images in the lightbox are generally 1500 x 1000.

For example, here's the 2nd image in the gallery:

[kienstra]

Hi Ryan,
Sorry, I forgot to mention that $atts['link'] = 'file'; would be necessary in that filter if there are galleries that that you don't want to be lightboxes, but you still want to link to the files.

[rsmith4321]

Yes the 1500x1000px image is the large thumbnail size. The original image size would be a 2048px image. Here is a link to the full size original file, this is what a typical lightbox would link to. This would also be what would be linked to with just link="file" setting with no lightbox. https://www.ryansmithphotography.com/wp-content/uploads/2019/09/bride-standing-on-train-tracks-conway-river-walk-2019.jpg. The large size thumbnail is probably fine anyway but this isn't typical lightbox behavior. Thanks for the help with this.

[westonruter]

@rsmith4321 Would you please test #3439?

[kienstra]

Yes the 1500x1000px image is the large thumbnail size. The original image size would be a 2048px image.

Good point, it would make sense to have a bigger image in a lightbox. I'll look at this more. It might be more of an issue with AMP in general.

[kienstra]

With #3439, this should allow the previous filter, even setting $attr['link'] = 'file';

[kienstra]

Better Lightbox Images

Hi @rsmith4321,

Here is a link to the full size original file, this is what a typical lightbox would link to.

Yeah, that makes sense to want a bigger image size for the lightbox.

I think this might have to come from the AMP project, though. Here are some slightly related issues:
ampproject/amphtml#21736
ampproject/amphtml#14900

Though unfortunately, I haven't noticed any issue that looks like it's close to being fixed.

I'll let you know if anything else comes to mind.

[rsmith4321]

Thanks, I'll keep an eye on this to see if it's ever resolved but it's not a huge deal. There is something strange going on because sometimes it does put the original size in the lightbox and sometimes the thumbnail. It's strange I would assume that the html would be generated by php in wordpress selecting the full size image and not something in amp.

I also tested the latest update and it seems to fix the issue with $attr['link'] = 'file';. I've added that back into my functions.php and the lightbox is working, thanks.

[kienstra]

Hi @rsmith4321,

There is something strange going on because sometimes it does put the original size in the lightbox and sometimes the thumbnail. It's strange I would assume that the html would be generated by php in wordpress selecting the full size image and not something in amp.

Ah, interesting.

Is there an example image you can point to that does that?

It looks like at least some portrait images are 1365 x 2048:

...but maybe that's not the 'full size image' that you referred to.

[rsmith4321]

Yes that is the original full size. Basically if the file name has image dimensions at the end of the file name such as 1500x1000.jpg, that is a wordpress generated thumbnail. If it doesn't have this it'a an original upload size image. In the wordpress php that would be like full, large, medium, and thumbnail. Why some images in the lightbox show the full size and some the large size I have no idea, they should all be the same.