Adding class to image adds class to tag wrapping image?

  • Resolved Will Stocks

    (@willstockstech)


    6 years, 3 months ago

    Maybe a basic question that has already been answered, however, I noticed the other day when I started trying to use Gutenberg that if I inserted an image block and added an “additional class” to that image (in my case: lazyload – as my current theme isn’t fully Gutenberg compatible yet, so I manually declared the class), it didn’t add it to the image tag, it added it to the block tag? Is there any way to specify a class on the image itself, as opposed to the block?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    No, because that additional CSS class applies to the block as a whole, and is available for every block.

    However, you shouldn’t need an extra class directly on the image. You can directly reference it using the wrapper class, with something like .example-class img.

    Thread Starter Will Stocks

    (@willstockstech)

    OK, thanks for confirming, thought it was worth an ask – In that case I might have to rejig/reconfigure the lazyload library I’m using (https://github.com/aFarkas/lazysizes which is set up currently to look for “lazyload” as an image class) to look for an alternate class and take it from there?!

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    Or just add something like jQuery('.example-class img').addClass('lazyload'); in your theme to add that class to the images.

    I’d suggest testing, I kinda doubt that that JS code actually speeds up anything in a general sense, although such things might be useful in specific situations.

    Thread Starter Will Stocks

    (@willstockstech)

    Yeah, good idea actually!
    Cheers!! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding class to image adds class to tag wrapping image?’ is closed to new replies.