[Support request] How to add CSS class on featured images across all blog posts

Home Forums Support [Support request] How to add CSS class on featured images across all blog posts

Home Forums Support How to add CSS class on featured images across all blog posts

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2204466
    JP

    Hey there,

    I’m trying to add a css class (name = ‘featured-img-primary’) on featured images across all blog pages (here’s an example blog page – https://www.trendsandtactics.com/how-to-make-money-dancing). Can the team please advise how to accomplish this?

    Thank you!

    #2204508
    Leo
    Staff
    Customer Support
    #2204725
    JP

    Hey,

    I applied that code and it did not work. I think the blog post I linked might need a custom adjustment. It should also be noted there’s a picture tag and img tag for the featured image (I’d like the php to target the “img” tag not the picture tag).

    *** overall request goal: once there’s a unique css class on the featured img tag, we’ll be able to target that image and exclude lazy loading (to help with page speed).

    Best,

    #2204942
    David
    Staff
    Customer Support

    Hi there,

    that snippet Leo linked to will apply to the <img> element.
    Problem you may have is whatever plugin/service you’re using to create the webP versions is rewriting the Featured Image HTML.

    If you can disable the webP on a single post and clear any caches you can check to see if that snippet is working.

    #2205084
    JP

    Hey David,

    Thank you for helping me look into this!

    I checked the plugin that’s creating Webp versions (Imagify), and there’s no way to disable on a single post. With that in mind, are there any other possible solutions?

    Best,

    #2205357
    David
    Staff
    Customer Support

    Reading some of Imagifys support topics it looks like there is an option in settings: Use Rewrite Rules for webP generation. And i think that keeps the original <img> and therefore presumably the classes we add using the above snippet intact. But it cannot be used on sites running a CDN.

    If thats not an option then you will need to speak to Imagify and ask them how to add a class to the HTML that their plugin is outputting.

    #2205717
    JP

    Looks like it’s working now, thank you for your help.

    #2206178
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.