1

I am trying to show post thumbnail with the_post_thumbnail() function but the function automatically set image size inline CSS that why my CSS is not working properly.

3
  • 1
    the_post_thumbnail() does not add inline CSS (style=""), but it might add width="" and height="" attributes. These are normal, and your CSS needs to account for them. If you want more help than that, you'll need to share your CSS, and the HTML that's being output for the thumbnail. Feb 14, 2020 at 16:10
  • @JacobPeattie Unfortunately the twentytwentyone theme does in fact add in inline css
    – daamsie
    Nov 30, 2021 at 2:16
  • In that instance it's the theme adding the inline CSS, not the the_post_thumbnail() function on its own. Nov 30, 2021 at 3:29

2 Answers 2

0

the_post_thumbnail() allows you to set the size of the image you want to use, the default is thumbnail but you can override it to use any of the defined sizes or a custom size e.g.

the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail('full');
the_post_thumbnail( array(980, 450) );

Images generated by WP use srcset to give image dimensions based on device width, you can disable this by using this answer

0

The twentytwentyone theme annoyingly adds these inline styles to images

I did the following to avoid the problem

function remove_inline_style_from_image( $attr ) {
    unset( $attr['style'] );
    return $attr;
}

add_filter( 'wp_get_attachment_image_attributes', 'remove_inline_style_from_image', 10, 1 );

$thumbnail = get_the_post_thumbnail( $id );

remove_filter( 'wp_get_attachment_image_attributes', 'remove_inline_style_from_image' );

If you want to remove the inline style from all subsequent images, just leave off the remove_filter line at the end.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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