0

When I create featured images, the markup that wordpress produces has inline css. The image tag for the image has width and height parameters.

This is very frustrating: I'd like to control the image style with my own css.

How can I remove the inline style?

4
  • 1
    Take a look to How to Answer[1] of mr Jiang [1]: wordpress.stackexchange.com/a/115717/14536 Oct 10, 2013 at 21:45
  • 2
    Inline height and width attributes can be overridden from a stylesheet.
    – s_ha_dum
    Oct 10, 2013 at 21:52
  • 1
    No they can't. That's not how css works. Inline style overrides stylesheet rules.
    – bob
    Oct 11, 2013 at 1:39
  • Width and height attributes are not an inline style so @s_ha_dum is correct. By default WordPress doesn't put inline styles on images so if there is a style attribute it is added by your theme or plugins. Oct 4, 2016 at 15:44

4 Answers 4

2

You can use wp_get_attachment_image_src which will return the image url using the thumbnail ID

<img src="<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'full'); echo $image[0];?>" />
1
  • out of all the answers on this page, this appears to be the cleanest solution so far.
    – klewis
    Aug 19, 2022 at 13:32
1

You are correct, Inline CSS will always take priority over any CSS in the stylesheet unless you're peppering your CSS with !important's and/or mile-long selectors - which is bad practice. Try checking out this other question which has the solution, Filter to remove image dimension attributes.

Hope that helps!

1

You set the featured image sizes in your functions file:

add_image_size( 'featured-image', 300, 100, TRUE );

Then you can style the featured image from your style.css file.

Or you can over ride the default using CSS.

.wp-post-image { 
 your declarations
 }

Change the class for your featured image to match your theme.

0

There is a filter called post_thumbnail_html which allows you to modify the html of the featured image just before it is returned from get_the_post_thumbnail(). You can simply do a search and replace on this html string to remove unwanted attributes. Like this:

add_filter( 'post_thumbnail_html', 'wpse117447_remove_atts' );

function wpse117447_remove_atts ($html) {
    $html = preg_replace ('/(width|height)="\d+"\s/', "", $html);
    return $html;
}

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.