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

[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!

[Leo]

Hi there,

This should help:
https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/

[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,

[David]

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.

[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,

[David]

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.

[JP]

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

[David]

Glad to hear that

[Author]

Posts