Since my layout is not a standard one, I decided to use the popular Minima white template for this example. Here is what it looks like normally:
Before you can host larger photos, you need to make sure that your blog layout is wide enough for them to fit.
{Helpful hint: if you are planning a major overhaul to your blog, create a new "test" blog and set it to private so that it doesn't show up in the search engines. This will allow you to play around with the template without interrupting your normal blogging routine or the appearance of your blog. Then when you are ready for your new blog's debut, simply paste the test code into your real blog's template.}
1) Open your blogger template, and under layout, choose "edit html". Scroll down to where it says outer-wrapper and main-wrapper. Adjust the width of both. I chose 1200 for the outer and 900 for the main:
2) After doing this once, you won't need to do it again. Your blog will permanently be at these settings unless you decide to change them later on. Here is what it looks like with the blogging section widened:
Okay, now on to the photos:
1) Choose which photos you like and resize them to the dimensions you want. For this example, we will have to keep them under 900 pixels in width since that is the max width of the blogging section.
2) Upload your photos to an outside hosting site. I use flickr and photobucket, but there are tons more out there.
3) Copy the code that those sites give you and paste it where you want it to appear in your blog post. {Never use the photo upload button inside of Blogger.} This example uses flickr:
4) To center the photos, add this tag: < align="center"> to the beginning of the code and this tag: < /div > to the end of it. {note: remove the spaces between the arrows - I had to put those in so that the code would show up for this example and not turn invisible and do its job.}
5) Voila! Large photos!
Yes, those two cute and grumpy pirates are me and my little sis on a family vacation to the Bahamas. Circa a long time ago. :)
edited to add: This post was published while the blog had a different layout. Currently the photos overlap under the more recent layout because the sizes are formatted for the old layout. This will be fixed asap!
Welcome to our 
Post a Comment 107 comments:
AWESOME, I hated having to click on the photos to make them bigger :/
I'll definitely try that out when we put up the wedding pictures in the next couple days
OMG - I LOVE you!!! How weird is this? I spent about an hour last night trying to Google how to increase pictures on Blogger. I had tried everything (btw - I never did find instructions on how to enlarge pics). To my dismay, my images remained teensy/tiny. Thank you, thank you for the step-by-step instructions that even a html neophyte like me can understand.
PS - I'm beginning to think that we're either 2 great minds or you're psychic.
Thanks again!
I love you for sharing this!!! Now If I can just figure out how to master three columns with out a lot of crazy formatting issues--darn wigets! :)
I went almost nuts trying to go from two column to three column. I'm glad you saved me from further frustration. So, any idea how to change the sidebar font to something pretty? Is that just wishful thinking on my part?
Thank you for this! I love the big pictures, my eyes thanks you too!
thanks for the tip!!
You're TOO Awesome! Ha, ha. After our little lunch I still haven't gotten to it! We have just been going nonstop! CRAZY! :) But I need to get on the ball. :)
Rock on girl!! Thanks for sharing that... I love that photobucket actually creates the code for you!!!
Brilliant. I was thinking about how to do this - Photobucket here I come!
Thank you soooo much! I was wondering how to do that!
OMG! I've been wondering how to do this. Thank you so much!! Now people might actually be able to see my photos now :D
there is a way to have larger sized pix without using an external host. it involves tweaking the html code of each pic that u wish to post. i wud have put the coding here, but blogger doesnt let me.
instead, refer to the same on my blog here:
http://kunalbhatia.blogspot.com/2007/12/trick-to-upload-larger-size-pix-than_29.html
i use this for my daily photo blog:
http://mindlessmumbai.blogspot.com/
regards,
Kunal
Dear blue orchid thanks for sharing this tip. I've just posted on tips for new bloggers and included a link to you as I think this is really helpful :-). appreciate all the effort you've put into doing this post
thanks a million for sharing that. I am going to go and try it right now:)
excellent post,thank you somuch.
Thx, this helped a lot!
I have a quick question on your how to make photos larger guide...do images uploaded from a hosting agent ever expire? I've used image shack before to upload to forums and noticed that after a year or so...they disappear. Wouldn't this happen with our blogs too???
Thanks,
Heather
My Photography & More>
Heather, I think it depends on your hosting account. I no longer use photobucket because of that reason. I do use a flickr pro account however, and have never had a problem.
Thank you! I just have one question - when I did this, all of my sidebar links disappeared. Do you know why and how I get them to show up again?
THANK YOU SO MUCHHHHH.. :)
Thank you ☺
Thank you!
Ehhh, I can't find the "outer wrapper" just the "Main wrapper"
Any suggestions, I think I have looked at it throughly.
hi April,
I'm not an html pro, so I'm not sure how to tell you to find it other than trying a ctrl+F search for the term.
thank you so much!!!!!!!!!!!! it took me a while to find out how to do this, and today I was lucky to find your site... my pics will look better, thanks,
Um, Hello?!? Who is the best blogger - YOU! I have been dying to know how to do this and am such dummy when it comes to this blog stuff, I totally appreciate you going through this. I can't wait to try to implement it!
THANK YOU! THIS HAS BEEN BOTHERING FOR AWHILE! THANK YOU!!!!
what is the 'code' flikr is giving me? i have been trying for over an hour now. Sorry, I am a blogging loser. Help me...
Hi Kyla,
On Flickr, below the photo you upload (under the option "all sizes") it will say "copy and paste this html into your webpage". That is the code you'll need.
I wonder if you'll ever see this comment since it's so much later than your post. I'm having trouble getting the pictures to center. I put the tags in, but each time I put in the < /div > with no spaces, it gives me the error message "Your HTML cannot be accepted: Closing tag has no matching opening tag: < /div >" Am I putting it in the wrong place? At the beginning of the picture's code (please forgive me if I'm using the wrong jargon) I put the tag < align="center"> without a space and then at the end I put the < /div >. Is that right? Thanks for your help.
THANK YOU SOOOOOO MUCH! I have always wanted our pix larger and was very frustrated that even set to large on blogger they were never as large as on other blogs I have been too. I am a visual person so your little tutorial really was just awesome! I am actually really impressed with myself for following the steps and making our blog much better! Thank you again!
ps- I am also having the same message sent to me as DMC Studio when I put the "div" at the end. I now just take off that end part and put on the beginning center part at the beginning---though I don't know if the pix are quite centered and if it is doing anything since I have to take off the end. But they are larger which is the first step.
thanks!!
Thanks so Much! I've always wondered what I was doing wrong:)
-Matt
Pavel Studios Photography
http://www.pavelstudios.com/
http://www.pavelstudios.blogspot.com/
Wow! Look how many people you have helped over a year and these are just the ones that stopped to say something about it. You are wonderfully. Thank you so much for sharing this information.
oops just posted as my husband. This is -brittany- not jimmy :)
Thank you again!
Just want to say thanks for this post! It's been wonderful!
If anyone has the problem DMC has, what it means is that you need < div > (no extra spaces) before the "< align="center">"
When you write code you have to have matching tags and < div > is an opening tag and < /div > is a closing tag.
Hope that helps!
(Side note: I am no programmer, but I'm not sure you need the < div > tag at all, it signals a divider so its possible you don't need it. I would try it with the tags, save then refresh and see if you like the results.)
Thank you thank you thank you!
Worked like a charm!
I think to center it should be < div align ...> instead of < align...> Thanks very helpful!
Is there a way to somehow do this using the blogger images itself rather than an external picture gallery like photobucket?
Thank you so much for the instructions !! I love big pix on blogs so I am going to give it a whirl ~
You rock !
xoxo,
Lori
thank you thank you thank you!!!!!!!
thank you so much!
you are a winner! I had no idea the hosting was the issue. Since blogger made a picasa album for me automatically, I just used the images I'd uploaded already by copying their picasa addresses.
thanks for this, I am going to give it a go. I just wanted to check if there was a way to upload a whole bunch of pics in one go from Flickr. When I did the Flickr uploading experiment ( I am getting pics straight off my computer at the moment for a blogspot blog) it would only let me do one pic per posting. If you have a moment could you converse with me at jenny@jennyacheson.com???
thanks so much Jenny
you're awesome! thanks
THANK YOU!!!!!!!! I've been trying to make my pictures & center column of my blog larger for so long! You're awesome :)
AWESOME!!!!
I LOVE YOU! =))
This seems so easy! Thanks for the post!
This is the best post I've read today! Thanks for sharing! I mean, really, thanks a million!!!
Thanks for posting these steps they're been really clear and useful!
Great...just what I was looking for...thanks for sharin!
awesome post! i was trying to help another photographer post larger pictures when I found your perfect explanation! thanks so much!
currently in Kansas, I'll be moving to NYC this summer and then probably to Phoenix in 2010. Hopefully we can work together sometime!!!
OMG...you saved my day!! Thanks for this info..
THANK'S a lot, that's helped me a lot, i'm so happy that i can find people like you to teach us thoses trick stuff.
=)
AMAZING!! Thank you! Thank you!! Now I can stay with blogger vs. moving over to typepad! Thank you!
Thanks a bunch! It was killing me not knowing how to fiddle with the HTML like that!
THANK YOU SO MUCH!
Hi! I am keen to try this, but just wondering, why do you say "Never use the photo upload button inside of Blogger" I have always done this and never use external hosting sites. All my pics are saved on my hard drive.
Thank you so much !
omg i MUST try this soon! You're the greatest! ♥
OH MY GOSH!!! IT WORKS! lol...why didnt i think of that? haha. i want to thank you SOOO much!!!!
♥
THANK YOU!!! I've been trying so hard to fix this and tried a lot of peoples directions but yours are the first to be clear..and to WORK!
Thanks so much for posting this ♥
thanks, that helped me a lot. 8)
thanks for help :)
oh thank you so much! you saved my blog :)
OMG! Thank you thank you thank you!!
I have a question that maybe you know the answer :) So now that I used Photobucket to upload my pics to my blog, my image doesn't show on other websites blogger roll. It says "image photobucket'. Do you know the fix for this?
Thank you again, even if there isn't a fix, I LOVE the bigger pictures on the blog!!!
Thank you soooooo much.
THANK YOU!
I tried what you said but couldn't get the photos to center. I finally figured out to add only < center> to the beginning and < /center> to the end. It worked for me and maybe will help someone else having problems. Thanks for the info as I wouldn't have figured it out without your help.
THANKS THIS REALLY HELPED!!
Thanks! I have wanted to make the pictures on our blog bigger for a while now, but could never figure out how to do it. I really appreciate you sharing this information!
OMG, I love you so much. I was sitting there, cursing at google for making those stupid templates that can't host my large pictures. Then you appeared...
It's easy, you're the best...
This is so easy!! Thanks so much!!
Thanks so much for taking the time to post this tutorial! Like you, I don't see very well and am always squinting trying to see details.
thank you SO much! this was SO simple and easy! WOOHOO! thanks again =)
this was really easy for me to do. however. i have encountered a problem. i am using minima as my template for my blog. i re-set the outer and inner wrappers as you suggested. i used flickr to size my photo but the largest size is 1024x768, so this leave a bit of the right side of the phot off. the medium size of photo from flickr is the same as what i get if i upload using blogger's window. so...do you have any suggestions for me as to how i can use the large flickr size and not have the right hand border of the photo cut off? i tried re-sizing the image by configuring html numbers but that doesn't seem to do anything. if you have any suggestions, that would be swell. thanks!
Thank you soo much!!! This really helped me out a ton!! It was very nice of you to post this and help us out!
My first thought when I saw 'larger pictures' was that you're eating up allotted space at Blogger much faster. But if you aren't actually uploading the pictures to Blogger, does that bypass this whole issue?
God bless you...you are my hero. :)
I second what bethany said. You are my hero!! Thank you so much for this information!!
This was really great help. Thank you!
One question though. My 'About Me' and the rest of my widgets have moved way down under since ive changed the size of my blog layout. Any idea how could I make it stay at the place before?
THANKYOU THANKYOU THANKYOU!!
Now I know how do have big photos!! You don't know how much I appreciate this :)))
Thank you! Literally the first search I did and I found your blog! Insanely easy!!
THANK YOU!
brilliant! thank you :)
omg, i am so glad i found this. thank you a million times for this info. i played around with the #'s until i got them to my liking. thank you soooo much!!!
GENIUS!
At least my 24hours researching for it is worth it!
thanks for the great tutorial! :)
This helped me a great deal, since my blog solely consists of photos. Thanks for putting this post up!
Really appreciated :-D
thanks so much for such an easy tutorial, you were the first one I found thank goodness.
Thank you so much for this! I was really struggling with it, being such a nerd :P
Thank you so much! Not only for how helpful this blog was, but for describing glasses as "shoes for your face" too true! I am a fan and I don't even need vision correction.
This tip is very interesting, thanks for help me in this topic!
okay im pretty dumb with flickr... do you have to make a set for the photos? And where do i find the web code to link to? Will I be doing this every time? aaahh!
Thank you for the help. I'm getting a thin blue line beneath all my photos, and I'm going crazy trying to figure out how to get rid of it. Any ideas?
it worked! thank you!
Thank you for the these directions. I got it to work, but the picture is HUGE! I have tried to changing the template to smaller numbers but it doesnt seem to change the size of the picture... any ideas what I am doing wrong?
Thank you for the tips, using blogger wasn't as easy as it is to open a blogger account. :)
you are a magnificent person lol! thank you infinitely!
Thank you so much for posting this blog! It was very helpful, simple to understand and worked perfectly! Awesome!
I do the same for my photos, but I don't like how the pictures link back to my flicr account. Do you know how to fix that? Thanks
awdrey-set your photo in flickr so no one can see it but you.
THANK YOU SO MUCH for these helpful instructions, got me messing around with my blog again and learned a bunch of new stuff and spiffed up my blog - forgoing paying almost $200 for a professional blog template!!!
Thx for this tutorial. It helped me a lot
Thanks. This fixed my problem!
THANK YOU SO MUCH! I've been looking all over the internet to solve my problem and you fixed it;)