2

I have used thumbnail like this in my wordpress theme's one template →

<?php the_post_thumbnail( 'medium' ); ?>

In the browser it is rendering like this →

<img 
    width="300" 
    height="220" 
    src="http://example.com/image-300x220.jpg" 
    class="attachment-medium size-medium wp-post-image" 
    alt="" 
    srcset="
        http://example.com/image-300x220.jpg 300w, 
        http://example.com/image.jpg 640w" 
    sizes="(max-width: 300px) 100vw, 300px"
>

My first question is how to put height = auto is there any function that can help us to achieve this? such as responsive-img

In short, I am asking should I control the width through the CSS or WordPress gives some function to do this?

1

If you want to remove the height value from your img URL, you can use this function:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_height', 10, 5 );
function remove_thumbnail_height( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $html = preg_replace( '/height=\"\d*\"/', "", $html );
    return $html;
}

This will replace the height with an empty value. Note that you can't use Auto as a value for the height property. It won't be validated by w3 validator. However, you can set the height to auto in your CSS:

.wp-post-image {
    height: auto;
}
  • 1
    @TheWPNovice You're welcome. You can always try the answer and accept it ONLY if it solved your problem. – Jack Johansson Jun 10 '17 at 11:42
  • 1
    My atom(editor) is hanged I need to restart the machine(desktop). I will get back to you ASAP. thanks for your help sir. Thanks for editing the question correctly. You are a very knowledgeable person. – The WP Intermediate Jun 10 '17 at 11:49
  • 1
    @TheWPNovice You are welcome. Just sharing what i know, which isn't much. take your time. – Jack Johansson Jun 10 '17 at 11:50
  • 1
    @TheWPNovice You are welcome, as always. – Jack Johansson Jun 10 '17 at 15:31
1

You can use something like this,

you can use second parameter as an array of attributes as

the_post_thumbnail('medium', ['class' => 'img-responsive', 'alt' => get_the_title()]);

If you are not using bootstrap framework, in style sheet put

.img-responsive{
   width: 100%;
}
  • 1
    Please note, this will drop the srcset, which will remove the responsiveness from the image. – Jack Johansson Jun 10 '17 at 11:41
  • 1
    Thanks for pointing out the issue. I changed the code it should work fine what do you say. – Bikash Waiba Jun 10 '17 at 12:28

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.