[Resolved] I need to remove lazy load from Toolset images

[Author]

Posts

[hernanL]

Hello,

I am optimizing a site built with toolset. Google recommends removing lazy loading for images that are in the first field of view, but toolset images come by default with loading="lazy". Could you help me remove that attribute?

I have tried the common wordpress filters but it doesn't work. I think it shouldn't be difficult knowing the correct filter

Thanks greetings

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Toolset plugins use the lazy load feature from WordPress core introduced in WordPress 5.4.

Have you tried creating an image tag HTML directly using the Types Fields API shortcode?
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/#image )

regards,
Waqar

[hernanL]

Thanks, I confirm that working with shortcode there is no wordpress lazy loading

The only problem I have is that for some reason it doesn't work for me to set the width and height of the image. I have tried every possible way, with px, without px. All manual or all with the wizard (taking care not to set size so that it does not override the property)

[types field='imagen-de-portada' title='%%TITLE%%' alt='%%ALT%%' class='no-lazy-load' width='435px' height='600px' align='center'][/types]

[hernanL]

By the way, my goal would be width: 435px height: 600px

Unfortunately not all images are exactly the same size, so I would like to address any distortions with objet-fit: cover

I would greatly appreciate if you could help me.

[Waqar]

Thanks for writing back.

Can you test the shortcode like this?

[types field='imagen-de-portada' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='435' height='600' resize='crop' class='no-lazy-load' align='center'][/types]

Note: I've included the size='custom' & resize='crop' attributes and removed 'px' from the width and height values.
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

[hernanL]

No, still without explicit width or height

I also need the "full" size. I use an optimization plugin that recognizes the url of the image and shows a lighter webp version (litespeed plugin)

But in any case it doesn't work, with that code I don't have explicit width and height

[hernanL]

I just noticed that for Google it is enough to set height and width by CSS (I thought it was mandatory in html)

Then inserting the image as a shortcode is enough to eliminate the lazy load and in CSS I can insert the necessary dimensions

Maybe you could consider removing the lazy attribute from images in the future. Default image block no longer contains lazy attribute

In any case thanks for the support