When you upload an image through the WordPress media uploader and then insert it into the editor, it comes with width and height attributes. These are normally desirable, as it assists the browser in making the appropriate room for the image during layout. But if you want to remove the insert action from adding these attributes, you can add this code to your functions.php
file or a functionality plugin of your own making:
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
Update: this is almost certainly a bad idea nowdays, since width
and height
help reserve space for the image while loading, even in fluid-width situations.
For me, this also seems to strip out the caption when I go to insert an image into a post. That happen for anyone else?
Yes, unfortunately I experience the same issue.
I ended up remove the suggested code above and switching to the CSS solution recommended here: http://wordpress.stackexchange.com/a/37768/17599
Drew you saved my life, thank you
Many thanks for this good sir!
Hey guys, this is similar to what I need but I need to remove the attributes from images shown in the Featured Image box, how can I change this to suit that? Here’s what I posted over at the WordPress Forums – http://wordpress.org/support/topic/editing-featured-image-size-in-the-editor?replies=5#post-3109119
I was using this but then realised then when editing an image (adding a caption) to an image from within the post itself (as opposed to within the Media Uploader) WordPress was re-applying the widths and heights. Found a fix here by adding a filter to ‘the_content’:
https://snipt.net/dnnsldr/remove-image-height-and-width-for-responsive-design-in-wp/
This came in very handy while working with Twitter Bootstrap, where it needed images to dynamically resize for the carousel.
Thanks Chris!
Thanks for this! Exactly what I was looking for, but I still needed the shortcode for the captions to work. I found by changing the priority from 10 to something larger than 20 allowed the caption shortcode filter to execute first and still be created.
ex.
addfilter( 'image_send_to_editor', 'remove_width_attribute', 50 );
I then modified this : http://justintadlock.com/archives/2011/07/01/captions-in-wordpress to alter the output of the shortcode to remove the width from the caption div amoung other things.
Apparently, I spoke too soon. That solution works as long as the user never switches between the ‘visual’ and ‘html’ tabs on the editor.
So…I ended up using this:
and making a my own caption shortcode
To keep these changes from being reverted by edits or updates to the post, apply the function as a filter to the_content rather than send_to_editor.
I made a quick gist that bundles this up along with a few other changes that help squash hardcoded image width and height attributes across the board in WordPress: https://gist.github.com/4557917
Does it matter the spot where I paste it on? I’ve posted it on various locations in functions.php but it still doesn’t work. Thanks for any info.
-Mike
Thanks for this! Worked right out of the gate.
I know I’m commenting a bit late, but there’s a better way to do this, and it provides an opportunity to do much more than just remove the width and height attributes. AFAIK, nobody else has proposed a way of doing it like I’ve written about here:
Rebuilding Image Tags When Adding Media
The interwebs hosts plenty of blog posts that are doing it your way, but my way is different because instead of trying to alter an existing image tag, your getting a chance to build a new one, just the way you want it.
Well… i can find a code like these everywhere in the web. but i have with all the same problem.
[caption id="XXX" ...] … description[/caption] will be removed too.
And that’s not what i want. how can i just remove Width and Height informations? nothing more, nothing less. would be nice if anybody could give me a solution which works.
Use SimpleXML. The link I put in my first comment shows how to use it. You can customize the function to rebuild your image tag just the way you want it.
Sorry Brain but i can’t follow you. Have i to add your script to the script with preg_replace or have i to replace the “preg_replace” script with yours? (i think secound right?) and than your script would rebuild only the img-tag, right?
well on my server is SimpleXML activated but it still not working, i had copied your script 1:1, just for testing. Have i to create a XML file? shouldn’t work it with HTML(5) files (generated with PHP) too?
can you make an example how i can only remove the width / height? i think i didn’t understood your script right :-/
derElch, if you put my code directly into your functions.php file, instead of what is proposed by this blog post, and if SimpleXML is enabled, that should be all you have to do.
Well thats what i thought too, but it happens nothing, exactly the same code like before, beginning with
[caption id="XXX" width="XXX" (i know this still isnt removed)]< a …>< img src=”XXX” … width=”XXX” height=”XXX”/>< /a>Description[/caption]
I tried to modify the result img-tag to can see differences better, nothing happend, still exactly the same code like before inclunding (and the “preg_replace”).. Any idea?
Why remove them when you can easily overwrite these attributes with plain css? width: whatever; height: auto;
If i want to remove the html what would i need to modify?
I guess it could be useful to have the height/width attributes
My [CSS] fix https://twitter.com/ldexterldesign/status/346656591480762369
Best regards,
This can also be accomplished with jQuery:
Remove IMG height and width attributes with jQuery
http://www.redbridgenet.com/how-to/remove-img-height-and-width-attributes-with-jquery/
Worked perfectly as is! Thank you!
Are there any ways to do this other than using jQuery or a CSS hack?
An oldie but a goodie! This should be a default option in the functions …Especially for RWD. Thanks, Chris!
I’ve ran into an issue with iframes to I just revised my regex to work only on images alone.
Here’s what I have used:
Helped me SO much, thanks!!!
It appears that this stopped working as of WordPress 3.9? Is anyone else having that problem? Too bad as it is a cornerstone of my responsive solutions.
What if I have a graphic designer that gives me a nice and clean responsive layout, with a single simple class for the image? I am really trying everything in order for the image to appear as “ but so far I just couldn’t do it.
I thought that using something like
the_post_thumbnail('full', array('class' => 'img1'));
would have made the trick, but I was mistaken.CRAIG, your solution is a lifesaver.
Thank you man!!!!
Craig’s solution was also right for me. Thanks Craig!
The outer div of the image with caption also contains the width. Why on earth does wordpress insist on doing this?
hi,how can get width and height attr form external image?
ex:
i create meta box and add image in to it.[http://www.example.com/img/test-image.jpg].
i want show this image to post with auto attr height and width.
< img src=”http://www.example.com/img/test-image.jpg” width=”” height=”” >
thanks
If you use the latest version of Jetpack (v3.8.0 as of this writing), you’ll find that it adds back in the
width
andheight
attributes on images in JavaScript as the page is loading even if you use the above code. Jetpack is packaged withdevicepx
which supports images for high DPI displays, but it adds back width/height attributes that break responsive layouts.To fix the issue, just add the following to
functions.php
:Thanks for the information everyone. WordPress is one of the easiest enterprise web content management service that allows developers to have complete control over any website. With increasing importance of graphics over website, it is important to define the image in a way that fits the screen and does not occupy too much space. This code will help in managing the display of the image. Make sure that you are using responsive design, which is now a ranking factor and that also adds value to the user experience.
Sweet! Just what I needed!
This snippet breaks TinyMCE:s image caption functionality in WP 4.7.5
Another solution is to do this below in your theme files so that ALL images are not affected.