- This topic has 11 replies, 4 voices, and was last updated 4 years ago by
.
-
Posts
-
hello I have read many threads you have responded to on issues similar to mine but none fit my case perfectly.
I need to add a class to the featured image of all the single posts on my site.
This way I can disable lazy load only for the featured image using A3 lazy load plugin (it allows me to exclude images from lazy loading only through classes).
Currently, the featured image. of the post has the class “attachment-full size-full”, which is the same class as the images in the sidebar or in the related posts section at the end of the post.
Can you please help me?Customer Support
Hi there,
add this PHP Snippet to your site:
// Add first-featured-image ( or any class ) to featured image of latest post function skip_lazy_class_first_featured_image($attr) { global $wp_query; if ( 0 == $wp_query->current_post ) { $attr['class'] .= ' first-featured-image'; } return $attr; } add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );This will add the
first-featured-imageclass to the single post featured images and the very first post in your blog/archives as this will generally be towards the top of the page on mobile devices.If that doesn’t work – share a link to the site where the code has been added and ill take a look.
Hi David, thanks for your quick reply. Anyway, this is not the solution for me.
I don’t need to assign a class to the first image of an archive, I would need to assign a class to the featured image in the article template. Here is an example:https://www.viaggi-usa.it/itinerario-route-66/
I would like to add a class to the first image of this page.
Thanks againOk so that image is being output inside a header element – what code did you use to display the Image inside that element ?
( by default Header Element images are displayed as a background image ).Hi David, featured image is disabled in options, this is the code:
<h1>{{post_title}}</h1> <div class="mypageherometa"> <span class="updated">[modified_date]</span> / {{post_author}} </div> <div id="sfondoimghero"> {{custom_field._thumbnail_id}} </div>Theres no filter for this template tag
{{custom_field._thumbnail_id}}so can’t add a class to it.
Instead you could create a shortcode by adding this PHP Snippet to your site:add_shortcode('featured_image', function(){ $id = get_post_thumbnail_id(); $image = wp_get_attachment_image( $id, 'full', "", ["class" => "attachment-full size-full my-custom-class"]); if ( $image ) return $image; });Change the
my-custom-classin the code for whatever class you require.Then replace the
{{custom_field._thumbnail_id}}with the[featured_image]shortcode.Thank you very much David, it works!
Awesome – glad to be of help
hey,
can you please make me a filter like the one in this topic:// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( 0 == $wp_query->current_post ) {
$attr[‘class’] .= ‘ first-featured-image’;
}
return $attr;
}
add_filter(‘wp_get_attachment_image_attributes’, ‘skip_lazy_class_first_featured_image’ );that targets also the second image in every archive page?
Customer Support
Hi Almog,
Try this:
// Add first-featured-image ( or any class ) to featured image of latest post function skip_lazy_class_first_featured_image($attr) { global $wp_query; if ( 1 >= $wp_query->current_post ) { $attr['class'] .= ' first-featured-image'; } return $attr; } add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );Great. Thanks!
No problem. 😀
- You must be logged in to reply to this topic.
