images, Jetpack CDN & breaking Lightboxes

Our image CDN is not fully compatible with all lightboxes and sliders yet. This is because we do our own re-sizing protocols that sometimes conflict with theirs. The good news is, it’s either an “it works” or “it doesn’t work” case as you’ve run into here.

In this case, I recommend disabling “Speed up image load times” at Jetpack > Settings in your site’s Dashboard.

I honestly don’t see how this is good news, considering it breaks Jetpack’s fantastic new Tiled Gallery Block and still does not open the images in a lightbox!

Our image CDN is not fully compatible with all lightboxes and sliders yet.

Can you please point me to one or two lightboxes that your CDN is compatible with? Right now, I wish I had never updated WP to 5.0.

• This reply was modified 6 years, 1 month ago by Blamedutchie.

Hi there,

Can you please point me to one or two lightboxes that your CDN is compatible with?

We don’t have a list of lightbox plugins that are compatible with Jetpack’s CDN – we provide the API, but it’s up to individual plugin developers whether they want to add support for it to their plugins, and that’s not something we control.

Right now, I wish I had never updated WP to 5.0.

If you’re having trouble with the new block editor, you can go back to the previous editor by installing the Classic Editor plugin:

https://www.ads-software.com/plugins/classic-editor/

If you use a Tiled Gallery Block, even with “Speed up image load times” off, the tiled gallery will still use our CDN just for display of the gallery.

That way, you use a tiled gallery without affecting your lightbox (at least as far as our CDN is concerned).

Hmmm, my previous comment got moderated away? Brave. Really…

It looks like the comment was removed by the moderators here since it was just a rant about Gutenberg.

There are better places to leave feedback on Gutenberg than in a Jetpack support thread, and they generally don’t remove anything as long as it follows the forum guidelines and is left in the right place.

I guess it depends on which definition of rant is being used.

Never mind though, moderators are always right.

Looking at your test post right now, you seem to be using Jetpack’s Carousel feature. This will work well with all types of images and galleries, whether you use the classic editor, a classic block, the gallery block, or the Tiled Gallery block. It will work whether you use Jetpack’s Image CDN feature or not.

You originally mentioned issues with the Lightbox – EverlightBox Gallery plugin. When you use that plugin, could you try to disable Jetpack’s own Carousel feature and try your tests again, since your lightbox plugin seems to offer features similar to Jetpack’s Carousel?

Could you then create a new post, with different types of images?

• A single image inserted via the image block, linking to the image file.
• A single image inserted via the image block, linking to the attachment page.
• A single image inserted via the classic block, linking to the image file.
• A single image inserted via the classic block, linking to the attachment page.

If you run into issues with one or more of those cases, could you then try to deactivate Jetpack’s Image CDN feature and do the same tests again? This should help us better understand the conflict between the 2 plugins.

Let us know what you find!

Thank you.

Thanks for getting on top of this, @jeherve

I switched on that Jetpack carousel to give my visitors at least something that MIGHT work, since I assumed that at the very minimum Jetpack should be compatible with Jetpack. Later tonight I will create a post per your request – right now, the oven requires my fullest attention ??

Hi @jeherve ,

Sorry it took a while. Dinners and life can change our plans.

I’ve created a fresh post as you asked. Editing and such is done with Firefox Developer Edition.

After publishing, I opened the Chrome browser to see what happened. (Not logged in: standard visitor) Only the last image (image, classic block, link to attachment page) opens in the Everlightbox. With image 1 and 3 I can briefly see the Everlightbox prev and next arrows pop up and then the browser moves to the jpg on the CDN.

So, to make the plot thicken a bit more, I’ve added three small galleries:

1. Inserted through default Gutenberg `Add Gallery′ block, images linking to media file;
2. Inserted through Jetpack Tiled Gallery block, images linking to media file;
3. Inserted through Classic Block, Add Media/Gallery, Tiled Mosaic.

None of the galleries show the Everlightbox lightbox.

So, I copied the gallery blocks and set them to link to attachment page. Only the last gallery shows the lightbox, but refuses to show the last image in the gallery.

More plot-thickening:

I opened a Firefox Private Window (while staying logged in in the main Ff window) and:

– all single images linking to media file show in the Everlightbox;
– all single images linking to attachment page go to the attachment page;
– galleries linking to media file show the Everlightbox;
– galleries linking to attachment page show the attachment page, EXCEPT:
– the last one, Classic Block/Tiled Mosaic, linking to attachment page, opens the Everlightbox also…

I purged the caches, logged out of the main Firefox window, closed the private window, opened fresh window, went to the post, cleared the browser cache and:

The only images opening in the Everlightbox are the images/galleries inserted through Classic Block and linking to attachment page. Chrome browser gives same results.

As a last step, I disabled the Site Accelerator and again cleared all caches:

Logged in:

• Single image 1 (image block, linkto image file): lightbox
• Single image 2 (image block, linkto attachment page): no lightbox
• Single image 3 (classic block, linkto image file): lightbox
• Single image 4 (classic block, linkto attachment page): lightbox

• gallery 1: lightbox
• gallery 2: no lightbox
• gallery 3: lightbox (but no Mosaic layout)
• gallery 4: no lightbox
• gallery 5: lightbox
• gallery 6: lightbox

Logged out, all caches purged:

• Single image 1 (image block, linkto image file): no lightbox
• Single image 2 (image block, linkto attachment page): no lightbox
• Single image 3 (classic block, linkto image file): no lightbox
• Single image 4 (classic block, linkto attachment page): lightbox

• gallery 1: no lightbox
• gallery 2: no lightbox
• gallery 3: no lightbox
• gallery 4: no lightbox
• gallery 5: no lightbox
• gallery 6: lightbox

I am starting to see a pattern, with a logic I don’t understand. Hope you guys do. Thanks!

So, just trying to wrap my head around this.

If Everlight box is _off_, everything works as expected in Carousel.

If Everlight box is _on_, things seem to work in Everlight box only half the time, and Carousel never works.

Is that about right?

Ehm, no… I could not Carousel to work either, James.

Everlightbox seems to only work with images that link to the Attachment Page, which is unusual. Also, images/galleries have to be inside a classic block or no go…

I’ve been beating my head against this now for a while and have done just about everything that I can imagine. Disable plugins on the site, disable plugins in my browsers, using different browsers, different operating systems even.

I used to be able to use Jetpack in Devel Mode inside a virtual machine, but that no longer works, so I am pretty much at the end.

Right now, I’m looking at options to change the linkTo values through SQL and then later – when this issue is resolved – changing them back, but my first try on that made all galleries complain about unexpected data.

It’s like somewhere in the process, Attachment Page and Media File get mixed up as targets…

I need a drink ??

• This reply was modified 6 years, 1 month ago by Blamedutchie.
• This reply was modified 6 years, 1 month ago by Blamedutchie.

Okay, I’ve tried to replicate this on my end. I’ve created the same basic setup – Jetpack with site accelerator enabled but gallery carousel disabled, and the Everlightbox plugin active.

=== Gallery blocks ===

New post, with a Core gallery block and a Jetpack tiled gallery block (leaving out the classic block for now to simplify things)

I can replicate your results here:

– galleries linking to media file show the Everlightbox;
– galleries linking to attachment page show the attachment page

However, I cannot replicate this:

The only images opening in the Everlightbox are the images/galleries inserted through Classic Block and linking to attachment page.

I used new image, never-before-uploaded to this site, or any site using Jetpack’s site accelerator/Photon. And I uploaded the images for each gallery from within the block for that gallery. I used different images for each gallery.

One thing I notice is that if I click an image on the first gallery, the Everlightbox carousel cycles through ALL the images I added in both galleries, not just the images in the gallery I clicked, which makes me thing that plugin looks for all images in all galleries in particular post, rather than images added inside a specific gallery. That would be something the author of that plugin needs to fix.

I also edited the galleries and add additional images both already attached to earlier posts, and completely unattached, but that did not affect the way the lightbox worked in any way – the only thing I can find where I get different results is if I set the galleries to link to attachment pages vs media files, and my results are consistent no matter how often I switch between those settings.

The situation on your site where the lightbox briefly flashes and then loads the image file instead I cannot replicate at all.

=== Classic block ===

With a gallery in the classic block I get the exact same results, with the exception that, when set to attachment page, the Everlightbox carousel opens but doesn’t load any images, rather than the attachment pages themselves opening.

Once again, this is with Everlightbox installed, the Jetpack CDN active, and Jetpack carousel disabled.

=== Jetpack carousel ===

Next I switched the Jetpack carousel on, and disabled Everlightbox. On the Core, Classic and Jetpack gallery blocks, the Jetpack carousel works fine for me, and unlike the Everlightbox carousel, it only cycles through the images added to a specific gallery, rather than all images added to the post. It also shows the carousel regardless of whether images are linked to Media file or Attachment page.

So based on this I don’t think what you’re seeing is related to Jetpack. You mentioned that you’ve already tried disabling plugins, but apart from a conflict with another plugin on your site I really can’t think what else could be causing what’s happening on your site.

Thanks for the digging, @kokkieh !

Tomorrow I’ll read your comment more thoroughly, my eyes are burning after post-processing a lot of photos the past two days ??

Plug-in conflicts… I understand what you’re saying, but it seems so unlikely after changing themes, trying different lightboxes and always see the same functionality breaking result.

Again, thanks for digging into this issue!

To be continued…

I didn’t think to check with the same theme as you yesterday, so I just installed Fotografie, and I get the same results there. I notice you’re using a child theme of that theme, though. Can you check just disabling the child theme? If you’re using any caching plugins you might need to disable those/clear the site cache as well.