Add attribute to section

silviotiago · November 15

Hi,

The support team asked me to add the attribute "skip-lazy" to all images inside products.

This one: https://www.dropbox.com/s/3chgnjjmpsfoffw/Captura%20de%20ecr%C3%A3%202024-11-15%2C%20%C3%A0s%2008.05.23.png?dl=0

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/

Phil · November 15

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

silviotiago · November 15

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."

Phil · November 16

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

silviotiago · November 20

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.

Phil · November 21

Please send us the WordPress dashboard and FTP access privately through the contact form, which is on the right side at https://themeforest.net/user/muffingroup#contact and we will add an option to enable "skip-lazy" for product image.

Notice!

Please attach a link to this forum discussion.

Sending incorrect or incomplete data will result in a longer response time.

Therefore, please ensure that the data you send are complete and correct.

Thanks

silviotiago · November 22

Done

Phil · November 22

I received your private message, but it does not have FTP access.

Please send another message with it.

Thanks

silviotiago · November 22

That's weird.

I was pretty sure I have sent it!

Anyway just sent it now on your contact form.

Phil · November 22

Thank you. Actually, you were right, and FTP access was there; I just overlooked that.

We are working on it now.

Best regards

Phil · November 25

Done. Please add class "skip-lazy" to your product images:

For the Column Text use <img class="skip-lazy" .../>

Best regards

Add attribute to section

Comments