[Support request] add a class to the featured image of all the single posts on my site

[Evenit]

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?

[David]

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.

[Evenit]

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

[David]

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 ).

[Evenit]

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>

[David]

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.

[Evenit]

Thank you very much David, it works!

[David]

Awesome – glad to be of help

[Almog]

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?

[Elvin]

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' );

[Almog]

Great. Thanks!

[Elvin]

No problem. 😀

[Author]

Posts