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?

  • 1
    Take a look to How to Answer[1] of mr Jiang [1]: wordpress.stackexchange.com/a/115717/14536 – Butuzov Oct 10 '13 at 21:45
  • 2
    Inline height and width attributes can be overridden from a stylesheet. – s_ha_dum Oct 10 '13 at 21:52
  • No they can't. That's not how css works. Inline style overrides stylesheet rules. – bob Oct 11 '13 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. – Andy Macaulay-Brook Oct 4 '16 at 15:44
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.

1

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];?>" />
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, privacy policy and cookie policy

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