⏳ 🔗 Please allow adding CSS classes to images (not the parent) (Duplicate)

[gregbenz]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

Please allow us to add CSS classes to directly to the when posting individual images. This would make it possible to apply styles to images.

The current implementation is for classes to get added to the DIV wrapper for the IMG element. This strikes me as a bug, as I cannot see much practical value to style parents of individual images, but plenty of reasons to style the image. For example, allowing classes on the IMG would let you add the "skip-lazy" class to direct Jetpack to avoid lazy loading a specific image.

This is a known issue: more details at #21799

Describe the solution you'd like

When you set "CSS Classes" for an image widget, it should be applied to the image, not its parent.

Describe alternatives you've considered

no practical workarounds other than to switch to manual code blocks instead of the image widget

Additional context

No response

[m1ga]

Why don't you use .className img to access the image later on? If you just add it to the image you won't be able to access the div around it.

For example, allowing classes on the IMG would let you add the "skip-lazy" class to direct Jetpack to avoid lazy loading a specific image.

According to their own documentation that feature will be removed soon:

Considering this positive change, Jetpack’s Lazy Loading feature is no longer necessary. You have the option to disable it on your website, and you will immediately begin benefiting from the native lazy loading feature offered by WordPress itself.
To facilitate this transition, Jetpack’s feature will be deprecated and eventually removed from both the Jetpack plugin and the Jetpack Boost plugin in November 2023.

[gregbenz]

@m1ga Thank you for the info, I was unaware of JetPack's plans.

Have you been able to make the WP solution work with Elementor? My general concern is to set a default to use lazy, but to set it to eager in a few specific cases (especially when using anchor links, which do often do not align correctly when lazy loading above the anchor). I have similarly found that data attributes are not applied as directed, so I'm not sure how one could set loading="eager" on an IMG element (https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/). I'm not sure if Elementor would apply this on the IMG or parent DIV and how WP would respond.

As for .className img, that's certainly useful for other scenarios and I appreciate your suggestion.

[m1ga]

for the most image the automatic way (above the fold = eager, below = lazy) works. There is an older plugin https://wordpress.org/plugins/lazy-load-control-for-elementor/ that injects an option to the image widget to remove lazy load: https://plugins.trac.wordpress.org/browser/lazy-load-control-for-elementor/trunk/lazy-load-control-for-elementor.php#L25
that will simply remove the lazy load part when rendering the HTML for the image. Perhaps that could help you. It's very limited (only image widget) but you could build on that and extend it to other widgets if needed.

[gregbenz]

@m1ga Thank you. Mostly I need a way to disable lazy loading on a few pages. It isn't a question of above or below the fold, but rather for proper scroll positioning when using an anchor link (as the anchor would be below many images which are also below the fold and therefore lazy loading causes the anchor link to load a random position on page rather than skipping to the correct location in a long article).

[m1ga]

just saying that Elementor does it automatically by looking at the position

elementor/modules/image-loading-optimization/module.php

Lines 228 to 230 in d51c409

	* Interpret "lazy" as not in viewport. Any other value can be
	* interpreted as in viewport (realistically only "eager" or `false`
	* to force-omit the attribute are other potential values).

and you have to somehow override that or perhaps use JS to collect your images on domready and load them by hand.

The issue with the anchor link is that the target position changes during scrolling as images are loaded. It's a very common issue and in the old jquery days you would update the position during scrolling: https://stackoverflow.com/a/48652859 (not used that in years!).

So as you've said: removing the lazy load part is an option to fix that. If I remember correctly the scroll part is inside Elementor too. So it calculates the scroll position for you and is not updating it during scrolling. This might be the issue to follow #20217

[gregbenz]

Thank you for that info. Is there active work on this issue? I see issue 20217 was initially submitted over a year ago.

…

On Sun, Nov 26, 2023 at 2:54 PM Michael Gangolf ***@***.***> wrote: just saying that Elementor does it automatically by looking at the position https://github.com/elementor/elementor/blob/d51c409536dbe61146701582d76ec0a736467455/modules/image-loading-optimization/module.php#L228-L230 and you have to somehow override that or perhaps use JS to collect your images on domready and load them by hand. The issue with the anchor link is that the target position changes during scrolling as images are loaded. It's a very common issue <https://www.google.com/search?q=anchor+link+click+lazy+loading+images+wrong+target+position> and in the old jquery days you would update the position during scrolling: https://stackoverflow.com/a/48652859 (not used that in years!). So as you've said: removing the lazy load part is an option to fix that. If I remember correctly the scroll part is inside Elementor too. So it calculates the scroll position for you and is not updating it during scrolling. This might be the issue to follow #20217 <#20217> — Reply to this email directly, view it on GitHub <#24410 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APPMU6X6SJVBS6UHTRCPVRLYGOT73AVCNFSM6AAAAAA726R2ECVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TMNZUGY2TS> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[kingma-sbw]

In the backend it is possible to set a class and id on an image. Setting this has no effect. I suggest either:

1. setting the class or id on an image has effect
2. in the backend editor remove to option to set class or id on images.