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

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

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1816100
    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?

    #1816115
    David
    Staff
    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-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.

    #1817077
    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

    #1817249
    David
    Staff
    Customer Support

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

    #1817260
    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>
    
    #1817404
    David
    Staff
    Customer Support

    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.

    #1817425
    Evenit

    Thank you very much David, it works!

    #1817434
    David
    Staff
    Customer Support

    Awesome – glad to be of help

    #1927503
    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?

    #1927511
    Elvin
    Staff
    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' );
    #1927516
    Almog

    Great. Thanks!

    #1927543
    Elvin
    Staff
    Customer Support

    No problem. 😀

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.