Add class name to post thumbnail

I’m using post thumbnails to link to a page.

Is it possible to add a class name to the post thumbnail image.

<li><a href="<?php the_permalink(); ?>" rel="nofollow noreferrer noopener" ><?php the_post_thumbnail(); ?></a></li>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Yep – you can pass the class you want to use to the_post_thumbnail() as part of the attributes argument, for example <?php the_post_thumbnail('thumbnail', array('class' => 'your-class-name')); ?>

Ref: http://codex.wordpress.org/Function_Reference/the_post_thumbnail#Styling_Post_Thumbnails

Method 2

You can filter those classes.

function alter_attr_wpse_102158($attr) {
  remove_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
  $attr['class'] .= ' new-class';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');

Add the filter just before you call the_post_thumbnail. The filter will remove itself automatically.

It is a bit of trek to get there but the_post_thumbnail uses get_the_post_thumbnail which uses wp_get_attachment_image which applies that filter.

Method 3

For most images in my websites I add a figure element around the images like below. That way I keep everything intact and still get to call the element with a class in the CSS.

<?php if ( has_post_thumbnail() ) { ?>
    <figure class="your-class">
        <?php echo get_the_post_thumbnail(); ?>
    </figure>
<?php } ?>

Method 4

May 2021

Tested and Working on WordPress 5.7 ✔

Default

Default the_post_thumbnail() will output all the required attributes from WordPress.

<?php the_post_thumbnail(); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
    alt=""
    loading="lazy" 
    srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w" 
    sizes="(max-width: 1500px) 100vw, 1500px" 
    width="1500" 
    height="800"
    >

Using class array attrib.

Using the class without $size parameter or the $size as thumbnail will remove the srcset attribute completely. Because why do your need responsive here when you size is only 150 x 150.

<?php the_post_thumbnail(array('class' => 'classname')); ?>
<?php the_post_thumbnail('thumbnail' array('class' => 'classname')); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-150x150.jpg"
    class="classname wp-post-image"
    alt="" 
    loading="lazy"
    width="150"
    height="150"
    >

srcset will be available other than thumbnail. The available sizes are thumbnail, medium, large, full. Sizes can be adjusted in your WordPress ‘Dashboard > Settings > Media’

thumbnail:  150px
medium:     300px
large:      1024px
full:       Your original uploaded size

Using the medium as size.

<?php the_post_thumbnail('medium' array('class' => 'classname')); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg" 
    class="classname img-fluid wp-post-image" 
    alt=""
    loading="lazy" 
    srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w" 
    sizes="(max-width: 300px) 100vw, 300px"
    width="300"
    height="160"
    >

Using the function

You can use function to include the class to the posts (function provided by @s_ha_dum). Iam adding bootstrap img-fluid here. Watchout! Read completely

// using function to add class to `the_post_thumbnail()`
function alter_attr_wpse_102158($attr) {
    remove_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
    $attr['class'] .= ' img-fluid';
    return $attr;
}
add_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');

Notice the bootstrap class img-fluid is added to the class attribute.

<?php the_post_thumbnail(); ?>

<!-- DOM -->
<img 
    src="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg" 
    class="attachment-post-thumbnail size-post-thumbnail img-fluid wp-post-image" 
    alt="" 
    loading="lazy" 
    srcset="http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1.jpg 1500w,
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-300x160.jpg 300w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-1024x546.jpg 1024w, 
    http://example.com/wp-content/uploads/2021/04/your-image-1500x800-1-768x410.jpg 768w" 
    sizes="(max-width: 1500px) 100vw, 1500px" 
    width="1500" 
    height="800"
    >

function class disappeared on the 2nd post

When using function, the class works only on the first post and it disappeared on the second one.
Use the class directly on the the_post_thumbnail()

<?php the_post_thumbnail('full' array('class' => 'img-fluid')); ?>

Remember the srcset attribute is useless for the thumbnail.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0