how to post larger images (old editor)

Note - This tutorial for uploading larger images will only work if you're using the "old editor" version of the post editor, selectable under Settings / Basic. If you'd like to post larger images using the updated editor, see these instructions. Also: 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 this trick.

Blogger, by default, shrinks all images to 400px wide when you upload them. But you can actually post images as wide as your main posting column (taking into account your image border and padding). Here's how:

Unfortunately, Blogger won't automatically size your images to the perfect size for your template. So first, you'll have to pre-size your image to the maximum width your template can accommodate, given in the template descriptions here. If you need to, you can use Photobucket or Flickr to do this for free.

(If have a custom template, see here.)

Upload the image into your blog post, under the "None" alignment setting. Make sure you're viewing your blog post under the Edit HTML tab (not Compose). This is roughly what you'll see (though your image code will vary):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s1600-h/PHOTO.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>

Delete only and exactly the GREEN section of code, making sure to leave the quote intact. These are the height and width tags.

Now find the part of the code saying s400, below in PINK:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s1600-h/PHOTO.jpg"><img style="cursor:pointer; cursor:hand" src="http://3.bp.blogspot.com/_f9kYcQ0o01M/S6htmcxzW1I/AAAAAAAAUqA/55IxYUE8MWo/s400/PHOTO.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5451727856259521362" /></a>

Change that to say s800. This will allow the image to "jump up" to a size as large as 800px wide (which is why resizing the image beforehand is a necessary step). If you have the Charlie or Jordan template, change it to say s1600. This will allow the image to jump up to as large as 1600px wide.

Click Publish Post. That's it!

To have two or more images centered within the post, upload them all under the "None" alignment setting and the "Edit HTML" tab. Then under the "Compose" tab, click/drag to highlight the images, and choose the center alignment setting from the icons above (the middle set of parallel lines). Note: you'll have to make sure that the total width of the images, combined with the padding/border of your images, doesn't exceed the width of your column.

If you have a custom template, or you're not sure what the maximum width of images you can post is, here's how to find out:

Go to Layout / Edit HTML. Scroll down until you see the bit of code saying "main wrapper" (exact codes will vary). Find the width line:

#main-wrapper {
width: 510px;
background: #ffffff;
padding-left: 12px;
padding-right: 10px;
border-right: 1px solid #C3E5E4;
margin-left: 0px;
padding-top: 0px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Jot down the width listed.

Scroll further down until you see the .post img section of your template:

.post img {
padding:4px;
border:1px solid #cccccc;
}

Double the value given for the border width, and add it to double the value given for the padding. So if your template has a 1px border and 4px of padding, the number you'd get would be 10.

Subtract this number from the width of your main wrapper. The resulting value is the maximum width, in pixels, of images you can post on the main column of your blog. For example, in this instance, 510-10=500px. In other words, 500px wide would be the widest size image this particular template could support (or, multiple images that add up to 500px wide total).

RETURN TO TUTORIALS