WordPress 2.6 has a number of great new features. One of these features helps prevent full-sized images that are added to your posts from breaking your theme. By default, the full-width images will be limited to a width of 500 pixels. There are a couple of different ways that you can fix this.

Modify the theme

If you are a theme author or know how to modify your theme, you can set up your theme to tell WordPress what the maximum width image your theme will accept for display in posts. The key is a new global variable named content_width. If the content_width global is not set, WordPress defaults to a full-size width of 500 pixels. You can see the logic that they are using in the following code snippet from the wp-includes/media.php file (note: I refomatted it a bit to fit the post):

// we're inserting a full size image into the editor. if
// it's a really big image we'll scale it down to fit
// reasonably within the editor itself, and within the
// theme's content width if it's known.  the user can
// resize it in the editor if they wish.
if ( !empty($GLOBALS['content_width']) ) {
    $max_width = $GLOBALS['content_width'];
}
else
    $max_width = 500;

So, as you can see, the way to have your theme inform WordPress of the maximum width is by supplying a value for $GLOBALS[‘content_width’]. This can be easily done by adding a line of code to your theme’s functions.php file. For example, adding the following line of code to a theme’s functions.php file will tell WordPress that full-size images should be limited to a width of 460 pixels (the width of Main Street Open’s posts).

$GLOBALS['content_width'] = 460;

Cori Schlegel has correctly pointed out that this feature has been present since 2.5. Thanks for the correction Cori.

Modifying the image after adding it to the post

If you aren’t the author of your theme and aren’t comfortable modifying code, you can manually change the size of the image after adding it to the post. After adding the image, you can change the size by doing the following:

  • Click on the image and select the “Edit Image” button
  • Click on the “Advanced Settings” tab. You can either click on the “Original Size” button to set the image to be full-size or you can manually set the width and height for the image
  • Click the “Update” button at the bottom of the Edit Image view.