Add attribute to section
Hi,
The support team asked me to add the attribute "skip-lazy" to all images inside products.
How can I do it without having to go one by one?
They told me that I could ask theme support to see if I could insert inside a section that would apply to all product pages.
So that you understand deeper, this is build as a model / template/ layout on betheme ( not sure exact english term as I have translated to portuguese) and using this "column text" to insert the images: https://www.dropbox.com/s/uj5evw0s764u83j/Captura%20de%20ecr%C3%A3%202024-11-15%2C%20%C3%A0s%2008.07.48.png?dl=0
This product example is:
https://www.jogodigital.com/produto/ea-sports-fc-25-premium-ps4/
Comments
Hi,
Can you tell me what you need to achieve, please?
The "skip-lazy" attribute is needed to prevent CLS when the image does not have dimensions. Anyway, the product image has them:
Can you explain why you need this attribute there, please?
Thanks
It's because on safari engine on iOs (according to WP ROCKET) this happens: https://www.dropbox.com/scl/fi/rq0xajz04pgy9glmw4gwm/A81A3AC2-80C2-4C78-BD96-FC7265174A23.PNG?rlkey=s1500vczc0trla5yip16pbbd2&dl=0
(huge margin)
Product: https://www.jogodigital.com/produto/ea-sports-fc-25-premium-ps4/
I will resume what they said about that:
"For some reason, Safari is having issues to render your site with an above the fold image lazyloaded.
The best solution here is to exclude those images from Lazyload. Those images are above the fold, and they shouldn't be lazyloaded.
As soon as WP Rocket generates the Critical Images data for all products, the issue will be fixed on all of them.
But if you want to fix this without waiting for WP Rocket to do this automatically, you can add the attribute "skip-lazy" to these images, and WP Rocket will ignore them and won't lazyload them.
My recommendation here is to ask your theme support.
Here you can see the code that injects your product image: https://prnt.sc/5t0v5oTt17Jh
This is what you need to do: https://prnt.sc/aqR3AKOdeqmG
Adding skip-lazy to the "img" tag will make WP Rocket's Lazyload to ignore it."
Thank you for the clarification.
I must contact the dev team regarding this. I will get back to you as soon as possible.
Best regards
Not sure if this helps, but I have those images inside this section: LINK 1
And inside of that section this is the code: LINK 2
But if I try to add "skip-lazy" to that URL, and save it, it won't save it. Disappears.