Modal Zoom on Item View does not load images

Hello,

In the Item view, when users click on the document to Zoom (magnifying glass cursor), the image does not load. This used to work before but we noticed that it is now not working on images. The modal seems to be working because the screen turns black and there is a zoom and close buttons at the top right corner, but the zoomed image does not load. Any idea what I need to check? Thank you. Below are the versions I am using:
Tainacan v. 0.20.3
Tainacan Support for Blocksy v.0.2.0
Blocksy Companion v.1.8.94
Theme: Blocksy v.1.8.94

Hi @Paul_Perez! Welcome to our forum.

I’m sorry to hear about that issue. While I could not emulate it here, it can occur for different reasons. It may be related to how the complete-sized image is stored also. Would you have a link for us to share where I could inspect the html and see which path is set for the image?

Hello Mateus,

Thank you for the reply and thank you also to the whole team, Tainacan is amazing.
Unfortunately, we are working on a private collection behind a login page so there is no public link. But here is what it looks like when I clicked on the zoom, the modal appears but no image:

Ok, no problem @Paul_Perez .

From what I can see, the only unexpected thing there is the fact that it is trying to reference the SVG file source inline. I did some testing with SVG files in my localhost and this behavior is certainly not default. It should find where this image is from a path instead of inline, which is what we do here:

But this WordPress functions tend to have filters that may be accessed and modified by plugins. Would you happen to have any plugin enabled that might be related to image optimization? Could you list your plugins here?

If that is not the case, could you send me the SVG file privately so I can do more tests?

Hi Mateus,

Sorry for the late reply. Yes, we are using the W3 Total Cache plugin and have the Lazy Load for images enabled. I disabled it and now the images are loading just fine.

We initially have it enabled because we read that it will make the website load faster. But now, it seems that the loading time is just fine. So I guess we will keep the Lazy Load of images disabled for now

Thank you!

Ok @Paul_Perez. I’ll do some tests from our end to see if there is something that we can do.

Hey @Paul_Perez I did some research.

The W3 Total Cache plugin does not show the image because it is supposed to lazy load it only when it enters the screen, but our PhotoSwiper zoom gallery already loads the full image only when clicked, so it does not detects when it should trigger the render.

They do have a solution for disabling this lazy loading for certain contexts. You go to “Performance” → “User Experience” → “Lazy loading” and you will se a list of “Exclude words”. These are words that if found in any part of the tag, will remove the lazy loading feature. I did not found yet e less generic expression to disable only inside the zoom gallery, but if you simple add tainacan-items to the list like this:

And save the settings and clear the cache it should solve. Problem is this will also disable it for any image that comes from a Tainacan Item (in the Gutenberg blocks, for example) and this may not be desirable. If I find a better way I’ll let you know. For now you can re enable it if you want and use this settings. :slight_smile:

1 Like

I see, thank you so much, Mateus, for researching this, I really appreciate it!