Adding class to featured image

Question

I have specified a loop to show featured images for my custom post type and wish to add a img-responsive class from bootstrap to my featured image.

How can I do this?

Thanks!

Code:

<div class="home-featured-img">
    <?php 
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail(); // show featured image
    } 
    ?>
</div>

Answer 1

You can add custom class to post thumbnails. the_post_thumbnail accepts array of attribute $attr where you can specify image class.

So your code will be.

<div class="home-featured-img">
    <?php
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail( 'full', array( 'class'  => 'responsive-class' ) ); // show featured image
        } 
    ?>
</div>

In above code, responsive-class is the custom class I have added, you can change it as you require.

Answer 2

The second argument of the_post_thumbnail is $attr, which you can add classes to. One note is that you will be overriding the default classes, so you will need to add them in as well. The default is attachment-$size, which is why I added attachment-post-thumbnail in my example.

the_post_thumbnail( 'post-thumbnail', array(
    'class' => 'attachment-post-thumbnail my-custom-class'
) );