how to post larger images (updated editor)

If you prefer to use the updated editor, and you'd like to post larger images to your blog, here's how. (Though please note: mine is just one set of instructions, for one method - there are other methods that may be easier for you, and other sets of instructions across the web for accomplishing the trick.)

The good news the updated editor is that it allows you to post images in the "extra large" size, as large as 640px wide. Simply make sure you're under the Compose tab, then select the image icon (tiny landscape) from above the compose window. Choose your file, and when the image has loaded, select the extra large size.

However, if you have a larger main column (such as a photoblog), and you'd like even larger images, you'll have to do some quick HTML tweaking.

1. First, before uploading your image, you'll have to presize it to perfectly fit your template. To find out the maximum size images that your main column can accommodate (without spilling over), please see that template's description. (If you have a custom template, see here.)

You can presize your images for free on Photobucket or Flickr if necessary.

2. After uploading your image to the blog post under Compose, click the Edit HTML tab. You'll see the block of the image's HTML, something like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_f9kYcQ0o01M/S6nQNgpykpI/AAAAAAAAUtU/J7Hh4zd94Y4/s1600/3750991751_087e5a9547_b.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="428" src="http://4.bp.blogspot.com/_f9kYcQ0o01M/S6nQNgpykpI/AAAAAAAAUtU/J7Hh4zd94Y4/s640/3750991751_087e5a9547_b.jpg" width="640" /></a></div>
Find and delete the height tag, highlighted above in PINK.
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_f9kYcQ0o01M/S6nQNgpykpI/AAAAAAAAUtU/J7Hh4zd94Y4/s1600/3750991751_087e5a9547_b.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_f9kYcQ0o01M/S6nQNgpykpI/AAAAAAAAUtU/J7Hh4zd94Y4/s640/3750991751_087e5a9547_b.jpg" width="640" /></a></div>
Now, change the width value, highlighted above in GREEN, to the width of your presized image. For instance, if you have the Charlie, you'll change that value to 870px:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_f9kYcQ0o01M/S6nQNgpykpI/AAAAAAAAUtU/J7Hh4zd94Y4/s1600/3750991751_087e5a9547_b.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_f9kYcQ0o01M/S6nQNgpykpI/AAAAAAAAUtU/J7Hh4zd94Y4/s640/3750991751_087e5a9547_b.jpg" width="870" /></a></div>
Publish the post. Your image should be the correct, full size.

**Note: I've noticed that with the Charlie template (and possibly the other photo templates with large main columns), you need to choose "Left" alignment to get the images to sit correctly in the middle of the column.

RETURN TO TUTORIALS