4 comments

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

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.

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 } ?>
   

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.

Comments are closed.