The tutorial below assumes your blog is wide enough to accomodate larger pictures. If you haven't widened it, it's pretty easy. The widest you should make your blog is 950px. Just go to Template, then click on Customize. On the left side, you'll see an option to Adjust Widths. Make your Entire Blog 950px wide and your sidebar 0px wide. For those of you with older style templates, check this out (and the rest of you can skip ahead past the bullets!):
- If you haven't switched to the new interface yet, go to Design, then Template Designer. Follow the instructions above from there.
- If you have an even older template style, follow these instructions: In the Edit HTML section of your Dashboard, scroll down to outer-wrapper and increase that to 950px. Then scroll down to main-wrapper and increase it so that the width of main-wrapper and sidebar-wrapper add up to 950px. You may have to play around with the numbers a little bit so that your sidebar isn't pushed down. This tutorial also assumes you are using the updated post editor. You can do that by going to Settings, the scroll down to Global Setting and select Updated Post Editor.
Okay, on to the big images!
1. Resize the image you want to upload so that it is no wider than your main column and save it. If your blog is 950px wide, I'd recommend doing images that are 930px wide so there is a white space on either side of the image in your post.
2. Go to www.photobucket.com, www.flikr.com, or www.imageshack.us (or whatever image hosting site you prefer) and upload the photo there.
3. Those sites give you an option for "direct link to this image" or "url for this image." This will be a link to a webpage that has just the image on it and nothing else. Copy that link.
4. Log into your Blogger account and start a new blog post.
5. Go to your post and click on the button to upload an image.
6. Select Web Address (URL) and enter the link for the image (the one that you copied in step 3 above) in the Image URL box.
7. Align it however you like and click on Original Size.
8. If your image is a little bit off center, you can go to the more old school, but still easy, way of doing it. You can click on Edit HTML in your post reader, look at the code for the image, and delete the part that says style="margin-left: 1em; margin-right: 1em;". If messing with that code is difficult, you can create your own code for the image simply. Click here to find out how.
The image should show up with the correct dimensions!
[Updated 11/15/11. Updated to reflect new Blogger Template Designer features.]
[Updated 6/29/2010. Please note many of the comments below related to the way to upload large images in the "old" post editor, so they are now outdated.]
Madeline,
ReplyDeleteThis way of posting larger images is so time consuming. Is there a faster way to post bigger images to blogger.com?
Is there anything you can do in the back end of my blog to make this a quick process? If so, how much would this cost?
Thanks so much,
Sara
Hey Sara,
ReplyDeleteI understand! I've been working with photographers on blogs for quite some time now and this is the best way I know of. Unfortunately, since Blogger is free, it does have some things that can be a pain.
However, I will look around and talk to some contacts to see if I can find something faster. It seems like lots of photogs use Flikr, so maybe it has a workaround?
Madeline
Check this out:
ReplyDeletehttp://bloggeruniversity.blogspot.com/2008/08/post-larger-images-with-blogger.html
It's faster, and does not require uploading your photos to another site... just upload directly on the create post page.
Hey Mr. Anderson,
ReplyDeleteAs that post recognizes, doing that may violate Bloggers Terms of Service, since it's basically taking server space that we aren't authorized to take. It seems similar to the evil hotlinking to me, but maybe I'm too sensitive about it!
I want another alternatuve ti make my posting images in my http://www.softtips.blogspot.com big.It is timeconsuming.thnx
ReplyDeleteHi Madeline,
ReplyDeleteThank you so much!! I've never seen a simpler way to explain code... what a delight! It took maybe an hour, tops, to crack it.
My blog is - as blogs are - a work in process, and I'm pretty new to this, but please come visit. My only self-criticism is that I've perhaps made the samples I tried a bit too big.. but I'm learning for next time.
http://streetstylelondon.blogspot.com/
gratefully yours,
Jill Adams (Polka Dot)
thanks you so much for your help!!! but when I upload from photobucket I get this extra little blank box next to mt picture... wasn't sure if you would know what that was or how I can get rid of it.. thanks
ReplyDelete~katie
Hey Katie,
ReplyDeleteCan you copy and paste the code from Photobucket into an email to me at madebymadeline at gmail dot com? I suspect that photobucket puts a second little img tag at the end that you could leave off.
Thanks for this tutorial! I'm also interested in having a larger picture for my header and tried the same approach ( in the header section) without luck. Is there an easy explaination of how to alter the header too?
ReplyDeleteHey Jordon,
ReplyDeleteI see your template is 900px wide, but your header-wrapper is only 700px wide. So, go to Edit HTML, then change the #header-wrapper width to 900 px.
Then just make sure your new header is 900px wide and it should work just fine when you upload it in the Page Elements section.
Let me know if that doesn't work!
Thank you for this, it was surprisingly easy!
ReplyDeleteWow, I've made the outer wrapper 930px, and did the uploads for the larger photos. For some reason, the horizonal photos only show 1/2. Do I need to make another change in the blog template?
ReplyDeleteHey Deborah,
ReplyDeleteThe outer-wrapper should be 950px and your main-wrapper and sidebar-wrapper should add up to 950px. Then make your images no wider than 930px. If that doesn't work, email me and I can help you! madebymadeline at gmail dot com.
Hi Madeline! Thank you so much for this! I was tearing my hair out trying to find the relevant html. your solution worked perfectly!
ReplyDeleteHi Madeline! It's me Becca (again). This worked perfectly with Photobucket, but it occurred to me that Flickr is so much more popular and it might outlast Photobucket. But I cannot find the "direct link to this image" or "url for this image" in Flickr. (So sorry to bother you with this!) Can you be more specific about where Flickr has hidden this option? Thank you!
ReplyDeleteNo problem, Becca! When you have uploaded a picture and you are on the page with just that picture on it, click on All Sizes (in the row of options just above the picture). Select Large (800 by 600). Then underneath the picture you'll see "1. Copy and paste this HTML into your webpage:." Copy the HTML in the first box and paste that into your post instead of using the procedure outlined above.
ReplyDeleteThe reason it's a little different with Flikr is that they won't let you link directly to the image you have to link to it's Flikr page instead.
Thanks so much for your response! Ok -- I was able to make this work, but I had to "2. Grab the photo's URL:" instead of "1. Copy and paste this HTML into your webpage:". (When i tried to "copy and paste the HTML" the image did not post.) I am afraid Flickr will not support "grabbing the URL" for the reasons you describe. What do you think? Thank you so much! ~Becca
ReplyDeleteDid you copy and paste the HTML (the first option) directly into the post editor where you wanted the image to show up? Instead of clicking on the Add an Image option? When I tested it that way, it worked. Try this:
ReplyDeleteGet the code from "1. Copy and Paste ..." Open up a new post in Blogger. Then paste the code directly into the space where you write the post. Click preview. Did the image show up?
YES! Hooray! Finally got it. Thank you!! :)
ReplyDeleteI'm having trouble with the resizing part. Where do I do that? I'm still getting half of my image cut off...??
ReplyDeleteebwphotography[at]gmail.com
Hey EBW,
ReplyDeleteThe instructions in the second paragraph above describe it, but you need you search in your template for outer-wrapper and main-wrapper and change the width for those. I will email you a quote to do it for you!
Madeline
Thank you very much for this post...this is very helpful!!!
ReplyDeleteThank's dude...
ReplyDeleteThank you so much, this was a really helpful and straightforward tutorial. Now to design a new banner...
ReplyDeletehttp://sadiedesigns.blogspot.com/
Send me an email at madebymadeline at gmail dot com and I can send you a quote to re-do your banner!
ReplyDeleteHi Madeline! I've been reading the comments and I'm very excited to give this one a try. I'm having problems with changing my outer wrapper since I CANNOT find it in the code when I try to edit it. Why is that? Your answer would really be appreciated! Thank you :)
ReplyDeleteHey Ina,
ReplyDeleteCould you email me a link to your blog so I can check it out? It's possible that Blogger did an update, so I'll need to update the tutorial. You can send me a message at madebymadeline at gmail dot com. Thanks!
hi madeline, i cannot seem to find the edit HTML in my dashboard to widened my blog post. :(
ReplyDeleteJust click on Design, then there is a little line of links just below the tabs at the top. There's Page Elements, then Edit HTML, then Template Designer. Let me know if you still can't find it!
ReplyDeletehi Madeline! thanks for your post. I have been uploading larger photos, but my problem is that after they reach a certain LENGTH blogger automatically resizes everything. example...I have a photo montage of a shoot I recently did and format it so the width is perfect for the blog, but it is pretty long.... Any suggestions on how to allow not only large (width) photos but long ones as well? my site is www.franceswilliamsblog.com if you want to see what I'm talking about. for each session I have to insert photos in 3 separate batches as opposed to one photo with all of them in it. OK, I'm being confusing!! sorry!
ReplyDeleteHey Frances,
ReplyDeleteYou know, I have never run across that before! Maybe you could manually change the height in the code for the image under Edit HTML in the post editor?
Madeline
I know this is super old but thank you for this post!!!
ReplyDeleteWhen my rambling google search turns up gems like THIS blog post my faith in humanity is renewed. Thank you!! The microscopic pictures were driving me nuts...
ReplyDeleteYou are welcome! Glad to help.
ReplyDeleteThank you so much! It worked :)
ReplyDeleteYou are welcome!
ReplyDeleteThanks! Very useful!
ReplyDeleteLifesaver!! Thanks so much!
ReplyDeleteYou are welcome!
ReplyDeleteHi there! Great post. My problem is when I upload a photo, there is no "original size" option! I have been trying to find a way to make bigger images for a long time. Any suggestions on how to find the "original size" tab? Am I on an old version of Blogger? Thanks! -Ellen
ReplyDeleteHi Eileen,
ReplyDeleteYes, make sure you are in the most recent version of Blogger - if you're not, you should see a link to upgrade when you are on your Dashboard. To see the original size option, you have to click on the picture you have uploaded. Then a little bar will appear under the picture that will allow you to pick a size and an alignment. Come back and tell me if you get it to work!
Madeline
Hi Madeline,
ReplyDeleteI finally figured out how to enlarge my photos, however, now my blogger template isn't wide enough. I followed your instruction, but it says it's not possible. Could the problem be because I use a template from The Cutest Blog on the Block.?
I appreciate your help!
Roxanne
Hey Roxanne,
DeleteYep, that's probably the issue. Those templates are super cute, but they have a fixed width in order for the background and header to appear correctly.
Madeline
its a very long procedure. why don't you post some themes that can allow large images to post. and show large images directly. If you could suggest some templates like this I will be happy.
ReplyDeleteHi Beautiful,
DeleteWell, Blogger is free and hosting images is not, so we have to find a work around for that issue. This is the best I can up with right now, but I update the post whenever I can find a shortcut!
Madeline
Madeline - it seems to me that a while ago there was this option to have the picture be a certain size on the page but if you clicked on the photo itself, you could see a large version of it. Now if I click on a photo all I get is the same sized one on a black backgound (with any other photos in the same post on a sort of scroll bar beneath). Do you know how to make it so that people can still view an enlarged version of the photo by clicking it?
ReplyDeleteThey did update the way they display images recently - you are correct. You could insert your own img code instead of using the Blogger buttons in the post editor. That way it should link to where ever you choose.
DeleteBut its slow the page load speed. iam using wordpress to host images but when i load these, google pageloadspeed shows 42% marks out of 100....and directly its pixels are very very weak... whats the solution..........
ReplyDeleteHave you tried hosting the images somewhere else, like Flikr or Imageshack?
ReplyDeletehi Madeline!i ve tried to find out the correct way to manage post larger photos but nothing..if you have spare time please have a look at my blog http://shoppingtherapy153.blogspot.gr/ and give some advice
ReplyDeletethanks for your time
Hi shoppingtherapy - your images look pretty large to me, but it looks like you are uploading them to Blogger rather than some outside image hosting site (step 2 above). That could be your problem. Let me know if that doesn't solve it!
ReplyDeleteHi Madeline,
ReplyDeleteI really appreciate this post. I am wondering why you say to make your width no wider than 950 pixels and why the sidebar should be 0 pixels if you have things in the sidebar?
Hi Mia,
DeleteHaving it 950 wide with a 0 sidebar assumes you don't have anything in your sidebar.