I recently received a support request from a client who was having trouble with sizing images when inserting them into her posts…
Hi Adam,
I have been receiving images from my customers and uploading them into my posts for awhile now with no problems, but lately I’ve run into an issue I hope you can help solve. Usually after uploading an image I get to choose from the size of the image to insert into my pages or posts. The sizes to choose from are Thumbnail, Medium, Large, and Original. I have a couple questions regarding some inconsistencies I’m seeing.
Why do I get all of these size choices with some images and other times I only get Thumbnail, Medium, and Original (no Large)?
Why do the available sizes of these images change? Sometimes the medium size will be 300 x 300 and other times it will be smaller (like 250 x 250) The same thing happens with the Large size too, but the above things only happen sometimes? I would like to make an image fill the entire width of my posts just like the text does, but depending on the image, sometimes my only choice is either too large or too small for this area.
Thanks for your continued support, we appreciate all your help!
Alexa
While offering Alexa the solution and explanation of why this happens and how to correct it, it occurred to me that even with the many years experience I have of working with WordPress, I very seldom took advantage of a built-in image and media setting that can really help to create consistency when using images in your posts and pages, not to mention making things easier for you.
The first thing you’ll need to know is how wide your content area is. In other words, what is the maximum width that you can have for each image. The width you have to work with is directly related to the theme you have installed and activated on your site. There are a couple ways to find out the width of the content area of your specific theme, but for the purpose of this tutorial, I’ll be using the WordPress default theme named Twenty Ten. I know that the content area has a maximum width of 640px, and that’s how wide I want my uploaded images to be.
[private_free]What I need to do now is tell WordPress that when I’m inserting an image into a post, I want to be offered a choice to use an image that is exactly 640px wide (the maximum width of the post content area of my theme).
In your WordPress administration area, go to Settings–>Media–>Image sizes:
You’ll see that you are able to change the maximum values for the width and height of the Thumbnail, Medium, and Large image sizes. This is where the magic happens:) I’ve simply set my Medium size to the maximum width I would like (640px) and then saved the changes. So now, when I upload an image, of my choices of Thumbnail, Medium, Large, or Original, the choice of Medium will always be 640px wide.
[box color=red]Important Note: The image you upload must be as wide, or wider than the maximum width you set. WordPress will not stretch the image to fit your maximum width. It’s too smart for that because your image (and your site) would look terrible. In the case of my client, I recommended that she dictate a minimum image width from her customers in order to guarantee consistency.[/box]
I took a screenshot and choose the file for upload into my post. You can see the details of that file choice below. Notice the Dimensions listed. The image I uploaded has a width of 1060px and a height of 682. If I were to insert that image full size it would be cut off or run over the content of my sidebar.
Notice the image size choices in the screenshot below. Specifically look at the Medium size. See how it’s set at 640px? That’s because of the maximum width setting we changed previously. So, all I need to do now to ensure that this image fits into my content area nicely is to choose Medium before I insert it into my post.
There you have it! As proof that this works, I used the same technique in the settings on this site and the images above.
I hope you’ve found this tutorial to be informative and useful, and thanks so much for becoming a Free member of AdamWWarner.com.
[/private_free]
