Hello,
Can you please assist me in solving the following 2 problems?
[Issue #1]
The images in my gallery can’t be displayed on all/any posts of my website, carvibz.com, as you can see here: https://imgur.com/a/FXPoinW
Example post: https://www.carvibz.com/muscle-cars/viper-powered-1969-dodge-charger-6-speed-has-lwb-secret/
I have no technical expertise, but had somebody look into the problem. This is what they said:
A Newspaper feature (General Modal Image ON, I believe) converts image links into modal galleries, and adds the A hrefs automatically. So, when it reads the code, it gets the incorrect link from the lazyloaded image. Instead of the link, it gets the placeholder image WP Rocket uses for Lazyload.
That feature converts image links into modal galleries, and adds the A hrefs automatically. So, when it reads the code, it gets the incorrect link from the lazyloaded image. Instead of the link, it gets the placeholder image WP Rocket uses for Lazyload
So, this feature is not compatible with Lazyloaded images.
This is the code WP Rocket Lazyload creates: https://i.imgur.com/YhQwmZR.png
And this is what happens after the conversion to modal gallery: https://i.imgur.com/m0rhXzo.png
So, the generated HTML is incorrect and causes the problem.
It happens here, at the Newspaper Javascript:
https://www.carvibz.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tagdiv_theme.min.js?ver=12.3
[Issue #2]
When bypassing WP Rocket (https://www.carvibz.com/custom-cars/mid-engined-vw-caddy-pickup-with-audi-4-2l-v8-has-lm-race-car-wheels-and-rabbit-face/?nowprocket)
or disabling WP Rocket Lazyload altogether
(simply excluding these in WP Rocket Lazyload does not work: div class=”tdb-featured-image-bg”
.td-modal-image img
.td-modal-image)
the images in the gallery work. However, as opposded to in the past, when clicking the images, these show up at the medium resolution I selected to increase page speed, which results in poor user experience, as can be seen here: https://imgur.com/a/c6aShhr
Previously, my TagDiv Gallery gave me a “link to media file” option that still loaded medium-sized images (page speed), but showed large-sized images when clicking (positive user experience).
Is this part of the error at #1? I don’t believe so, given the disappearance of the “link to media file”. How can I change this? Editing each post manually for the gallery to show Large Size wouldn’t work, since I have 2,000 posts. Besides, I believe this would affect page speed.
PS: I checked outher posts on similar topics as my #1 (1, 2, 3), but couldn’t find a fix.
Thank you
Hello,
1. This situation can be resolve by excluding from lazyload those classes:
td-modal-image
wp-image-
-> https://docs.wp-rocket.me/article/15-disable-lazy-load-on-specific-images
2. This is not related to first problem. If you want to have the tagDiv gallery, then you can create it like this – https://forum.tagdiv.com/gallery-2/ also is possible to have set the images using a different method so it can be something else.
Thank you!
Hi Calin and thank you for the reply.
1)I added the Lazyload exclusions you suggested and the gallery now works.
2)I used to add galleries using the [add block>gallery], and there used to be a “link to media file” item that’s now gone from the editor, as can be seen in the video below. I didn’t use any plugins, the only change that happened is the website migrating to Hostinger.
https://drive.google.com/file/d/1PLPdMc-xVkpDqyGSjkvZQo0e1ESbNhY1/view?usp=sharing
And, as stated, my 2,000 posts now show galleries with medium-sized images (performance) that, when clicked, only display the image in the center rather than on the whole screen-I believe they show the medium-sized image instead of the media file. This leads to poor user experience and changing something would mean manually going through 2,000 posts.
I never used the method shown in the link you provided and tested this in the post here https://www.carvibz.com/custom-cars/mid-engined-vw-caddy-pickup-with-audi-4-2l-v8-has-lm-race-car-wheels-and-rabbit-face/, as I show in the video below:
The said test post show 3 types of galleries, from top to bottom:
1 what you suggested in Default mode [V] could use this, but what of the 2,000 posts?]
2 same but in Tagiv slide gallery (images get stretched in preview) [X] can’t use]
3 my old gallery (shows even images, but is now broken and displays medium images when clicked) [X] can’t use]
https://drive.google.com/file/d/12X_jV2J4YRiFa13Lg9xkPqu95D34_tfb/view?usp=sharing
Can you help me find a solution?
Thank you!
Hi,
1. I’m glad that the problem has been resolved.
2. I just tested using a default theme from wordspress and without any plugins and the settings are the same there is no option for selecting the “link to media file” option. Also, using the same steps as you did in the video provided the images should be open in popup in full width – https://i.imgur.com/j9ykgqG.png – https://i.imgur.com/Rp5bFsS.png – https://i.imgur.com/5s5JXwL.jpeg so I believe in your case is from a plugin that was interfering on images to optimize the images and make the website faster.
Thank you!