Archived topic
How to add CSS class on featured images across all blog posts
7 replies · Started by JP on April 29, 2022
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!
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/
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,
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.
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,
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.
Looks like it's working now, thank you for your help.
Glad to hear that
