add a class to the featured image of all the single posts on my site

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-image class 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 again

Ok 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-class in 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?

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. :D