23

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(); ?>" ><?php the_post_thumbnail(); ?></a></li>
54

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

4
  • 5
    But this will remove the class attachment-$size. – fuxia Jun 6 '13 at 20:21
  • 1
    But can you add the class "attachment-$size my-class-name" – Simon Cooper Jun 7 '13 at 5:45
  • @SimonCooper I did and the class now has attachment- without the size. – Zhianc Apr 27 '15 at 10:33
  • This is generally bad and non-generic solution. Even hardcoding attachment-$size, erases all possible future class injections. – Fusion Feb 18 '19 at 11:18
10

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.

5
  • Does the function name 'alter_attr_wpse_102158' have a particular meaning could this function be called myClass - function myClass($attr) { – Simon Cooper Jun 7 '13 at 15:17
  • The name is somewhat descriptive and the suffix references this question. Otherwise, no particular meaning. From inside a class instance-- say a plugin class-- you can use array($this,'methodname') and you can use static classes with filters by using array('ClassName','methodname') – s_ha_dum Jun 7 '13 at 15:23
  • 1
    Why are you adding a filter that removes itself? – AlxVallejo Sep 29 '13 at 12:36
  • 2
    @AlxVallejo : So that it only runs once in the particular circumstance that that you want it to run. – s_ha_dum Sep 29 '13 at 14:11
0

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.

3
  • Calling something like the_post_thumbnail(array('class' => 'classname')); will actually output a bunch of PHP Warnings. If the first parameter is an array it expects width and height parameters. It also still outputs srcset values if the image has other sizes. – Howdy_McGee May 4 at 5:24
  • As on wp 5.7.1 it will not. Also the $size parameter is optional - (developer.wordpress.org/reference/functions/the_post_thumbnail/…) – Dexter May 4 at 5:50
  • I've tried this on 5.7.1 and got srcsets as expected. The $size parameter may be optional but that doesn't mean you can just skip it and move onto the next parameter. If you follow the documentation through the_post_thumbnail() -> get_the_post_thumbnail() -> wp_get_attachment_image() it passes that array as $size all the way down since it's the first parameter given. Feel free to join The Loop Chat for a broader discussion than can happen in the comments here. – Howdy_McGee May 4 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.