Reader Vivien writes in:
Is there a way to prevent WordPress from inserting the width and the height for images in the new 2.5 media manager?
In short, yes, but it requires you to insert some code into your theme’s functions.php file.
Fortunately, there is a WordPress filter we can use called image_downsize, which takes in three arguments (a boolean, an attachment ID, and a size string).
add_filter('image_downsize', 'my_image_downsize',1,3);
All I’m doing in the above filter is setting the filter name, the function to call (my_image_downsize), what priority I want the filter, and how many arguments the function takes.
From there, I mimic the function image_downsize in the ‘wp-includes/media.php’ file, but do not return a width or a height. As a result, when the image is sent to the editor, no width or height is present.
function my_image_downsize($value = false,$id = 0, $size = "medium") { if ( !wp_attachment_is_image($id) ) return false; $img_url = wp_get_attachment_url($id); //Mimic functionality in image_downsize function in wp-includes/media.php if ( $intermediate = image_get_intermediate_size($id, $size) ) { $img_url = str_replace(basename($img_url), $intermediate['file'], $img_url); } elseif ( $size == 'thumbnail' ) { // fall back to the old thumbnail if ( $thumb_file = wp_get_attachment_thumb_file() && $info = getimagesize($thumb_file) ) { $img_url = str_replace(basename($img_url), basename($thumb_file), $img_url); } } if ( $img_url) return array($img_url, 0, 0); return false; }
Download the Code
Here is a sample functions.php file of the code presented in this article.
I also used Andrew’s plugin generator to quickly put together a plugin that I will creatively call No Image Width or Height (download link). It will accomplish the same thing for those not comfortable with code. Just unzip, place in your WordPress plugin’s folder, and activate.
Thanks Vivien for the interesting question.
Neat. Now, is there a way to make WordPress not assign a new class to every single uploaded picture? It is unneccessary and once you get beyond, let’s say, 1000 pics, it presumably starts to slow down the page.
What exactly do these classes contain that makes them file-specific anyways?
I am curious why you wouldn’t want the height and width declaration.
This is so necessary. Thanks Ronald. I will get the plugin later.
I am experiencing two things with the latest version of WP.
1. Widgets are preventing other scripts such as blogrolling and twitter to run. Am I missing something to allow these to run along with the widgets?
2. The picture and audio uploader are not loading and coming back with http errors. Is there a fix it patch that I missed?
I look forward to any help you can give.
Worst practice ever. Don’t duplicate a function to edit a tiny amount of functionality. Find the appropriate filter or start a trac ticket for it to be added.
Ditto on the image classes. It’s a (minor) PiTA to remove them from every image. I have no idea what they’re for (Why does each image have a unique class?) and apparently no one else does either.
Not sure why I’d want to remove the automatic height/width assignments. I thought that was recommended for Google etc. Have I been misinformed?
Many thanks. I was looking for a plugin to do just this yesterday. And it would be nice to remove that class tag too.
@Julie, Matt,
I don’t know, you’ll have to ask the reader who asked the question. It was still fun figuring out how to do it.
@No,
If you do some basic research and look at the function in media.php, you’ll see I had no choice but to provide some duplication. Providing a ticket for this is nonsense. I’m using a filter if you would re-read the article. I suggest before you call something a worst practice and rank an article low, that you at least know what you’re talking about.
For those wanting to remove the classes, I’m afraid there’s no easy way to do it except by modifying core code.
It’s around line 99 in the get_image_tag function in ‘/wp-includes/media.php’. You could also regex it out by using the image_send_to_editor filter, but that’s a little more advanced.
I hacked this change in the wp-includes file the day I downloaded 2.5 – good to see there’s a better way of doing it
@Ronald, I agree with Julie above. It is a bad idea to knock off the width and height of an image. Keeping that in place ensure that the browser lays out the page properly.
Anyway, I use IImage Browser for inserting my images. I prefer that over the WordPress editor anyday.
Well! I needed this. Many thanks to make it so easy for me (I prefer the plugin way, that is theme-independant). I prefer to handle width and height via CSS, which is a better practice, especially if you plan to change your theme sooner or later.
Thank you for this post! The new image uploader in WP 2.5.1 tends to incorrectly assign image dimensions when inserting a larger image at full size. This is a nice fix so my clients don’t have to go into each image’s properties after insertion to remove/correct the height and width. Thank you for sharing this!
@Ajay,
Perhaps, but this post was a response to a reader question. I’m indifferent whether it’s left in or not. Judging from some of the comments, it appears some people needed this.
if an img tag has no width and height the browser has to read the header information from the image. sometimes this slow down your page or the browser has to correct the image size and this is absolut “unstylish” 😉
maybe it is a better way if someone would like to change his theme, but for this “better way” you pay a good price: long load time and a bad screen layout while the browser is loading your page.
something I can’t understand, but ok 😉
regards
Monika
Monika is right – not putting in the image width and height definitely slows down your page load – if you have multiple images on the page the load drag can be noticeable, but even a small increase in time it takes to load will cost you in terms of SEO – Google penalizes slow-loading pages, and also penalizes you for images that have no size declarations. Not worth it to me to not just include them in the img tag. Using CSS to control your image size is not the same thing at all. And using a large file size with smaller CSS styling doesn’t speed up page load time at all – the file’s size in terms of bytes doesn’t get reduced just because you “declare” it to be smaller using CSS.
All that being said, quit criticizing the author – Ron is just answering a question, and gave a good solution to what she needed – even if what she needed was not a good practice.
For those wanting the ability to remove the class, I’ve put in a feature request in the WordPress trac. Hopefully it’ll make it in 2.5.2.
http://trac.wordpress.org/ticket/7065
Or can you modify the ‘black-box’ to make the width what you want – eg instead of 500px for large, what about 565?
Cheers
People are wondering why someone would want to remove IMG width and height attributes, and here’s my answer: because it’s a horrible way to resize images when they’re not the same dimensions as the image itself. When I upload images into WP that are wider than 500px, the width attribute still says
width="500". And I don’t want that. WP should at least measure the exact size of the image before setting the IMG attributes.As for image classes, I think the align classes are a good idea.
ia this is not correct.
Administration Panel==>miscellaneous==>set the medium width to whatever you would like to have and it works like a charm
and after a click to the full size image I have images with 900px width.
kindly regards
Monika
I sure wish this were doable in WP.com. I have Sandbox on one blog and Monotone on the other, so the arbitrary 400 pixel width for large size images is COMPLETELY irrelevant to me. I have to strip it out every single time.
Omitting height and width declarations in your img tags is poor form. There is never–never–a reason to leave out the height width declarations. And never resize an image using the height and width declarations. If you need to include an image in two different sizes within the same page or website, upload two different versions of the image and tag appropriately.
If you do either of these, it shows you care more about being lazy and making it easy for yourself than you do about your readers.
Monika, I always choose full size, not medium, and it still ends up inserting
width="500". I know that this can easily be fixed in several ways, but I just don’t like this intrusiveness. And it’s not a very desirable way of writing HTML.MaestroGP,
from: http://www.w3schools.com/tags/tag_IMG.asp
It may be a bad practice for loading images more quickly, but it is a bad practice for web standards generally, and for resizing images through HTML specifically.
I agree that you should never resize images with HTML, which is what WordPress is doing now…in my case, at least.
I love that you guys have this to complain about. I love that you hate having to go in and manually remove or change width and height. It is simple html code… and it is not that hard to make changes to. I am 52 (today) and I can write code and there is no reason why you can’t either. What I would love though is for someone to at least answer my questions from above. What I would love is to be able to complain about picture images, but I can’t because the dang thing doesn’t even work!!!!!!
Maybe I missed some secret protocol about not asking questions that are not pertinent to the article… or maybe I am just looking in the wrong place. When I did a search for my problem, it brought me here… so I apparently am the only person with WP that has this problem.
OK, I got that off my chest. If anyone knows of a patch or simple fix, please let me know. Thanks.
The reason that it is inserting “width=500” into your images is because your theme is not taking advantage of a new WordPress feature in 2.5.
WP 2.5 introduced the whole media uploader thing, and one of the features it offers themes is to tell WordPress exactly how wide the main “post content” area is. Then it will not allow images to be any wider than that, because wide images often screw up themes by pushing the sidebars way out there. What with the commonplace digital pictures being published by newbies who don’t know how to resize properly, this is a good thing.
However, it does mean that your theme needs to tell WordPress how wide, maximum, images should be allowed to be (when inside a post). The theme can do this very easily. Just add this inside the theme’s functions.php file:
$GLOBALS[‘content_width’] = 500;
Change the 500, obviously. 500 is the default value if this value is not specified by the theme itself.
See? No need to go to extreme measures. Just fix the theme to be 2.5 compatible.
i usually size my image to the size i want prior to uploading (width critical) for all my blogs (each blog has it’s own width critical specifications)
where i get into trouble is one theme that converts all main posts images into thumbnails once they move off the main post roster and go into sidebar posts with thumbnail images. if i leave the width/height declaration the thumbnails stay at the size as declared in the original upload. so i size my images for max width on my theme and remove width/height declaration.
it sounds like this theme could be coded to handle this issue from the discussion above
I am new to WP but just spent 2 weeks learning PHP in prep (related to my job)–while I have no problem with adding the width and height info, what I don’t get is why WP 2.5 actually changes the name of the image to tack on the dimensions. And if I change the dimensions of the image and replace the image in Uploads, WP doesn’t seem to recognize the new dimensions. Am I missing something?
This usefull plugin is no more compatible with WP 2.7.
It sets downloaded images size to 0×0 !
Worked a charm, was driving me kind of mad so very glad to get rid of those pesky attributes, I know there there for a reason but thats coved by my CSS and makes things far more efficient.
Thank’s so much
Thank you so much for the tip and the plugin. Been looking for such a solution for a while to keep the aspect ratio of images when using CSS max-width or max-height.
Installed on 3.3.2, so far working well.