September 13, 2010
Categories: Tutorials
Tutorial: BIG Picture Blogs
Every couple of weeks, I receive an email request to explain how I am able to post such large photographs to my blog. You might assume that I’m using a special photo template…so considering that I’m not really doing anything too special, I thought I’d share my “secret” with you today. Unfortunately, I am not a blogger expert and I can only share my personal experience, so you may need to play around with my instructions so they work for you.

Start by opening your blogger account and go to design. Don’t mess with the template designer, just open your html. Before you make any changes to your template, download the full template to your desktop OR you can copy the html code and paste it into a word document. I am using a basic Minima template.
ScreenHunter_01 Sep. 12 19.52
Look for /* Outer-Wrapper – the information below is the information that you will need to change if you want a big picture blog like mine. Granted, you will lose your sidebar, but for me…having big pictures was more important than a side bar (you’ll see any sidebar stuff I have in my footer). So here is what I have below that mark: 

#outer-wrapper {
width: 910px;

#main-wrapper {
width: 900px;

#sidebar-wrapper {
width: 0px;
ScreenHunter_02 Sep. 12 19.53
You can adjust these accordingly. But I would use the general rule of thumb that your main-wrapper should be 10px less than your outer-wrapper and your sidebar-wrapper should be 0px.

Once you have your blog set up to display big pictures, you need to be sure your photos are re-sized appropriately. You will need to re-size your photos in whatever editing program you use. I recently wrote a guest post for Sarah at Loving My Life on Re-Sizing and Sharpening for the Web. Click HERE to read that tutorial. 

Re-size your photo to the exact size of your blog space. 
  1. Determine how large your main-wrapper is and subtract 10 px. Re-size to those dimensions (in my case, my photos are 890 px wide). 
  2. To re-size in Photoshop Elements, go to Image>Resize>Image Size. Enter 890 px (your width, be sure you have pixels selected). Allow the program to auto select your heigh by checking Scale Styles, Contrain Proportions and Resample Image. Click okay. 
  3. You’ll probably want to sharpen your photo as well – go to Sarah’s blog for the full tutorial.
1.     Next, upload your photo to Flickr (or another photo hosting site like Photobucket, Smugmug, etc.)
  1. Copy the html by going to Share This and Grab the HTML/BBCode and Select Large or Original (check to be sure it’s the same dimensions you specified).
ScreenHunter_03 Sep. 12 20.34
When you’re ready to include the photo in your blog, go to your post’s html and paste the code you just copied from Flickr. Click on compose to see your image. You may want to center the image at that time.
ScreenHunter_04 Sep. 12 20.39
If you’re using the above steps and also want a blog background – I suggest using a 3-column background (the 2-column will not fit these dimensions). Also, before you post anything to the web, be sure you watermark your files and save such that no one can print your photos with any clarity (apparently some people have found their images used in ads over seas). 

**Response to a question: what is the benefit of uploading your photos to flickr rather than just the blogger uploader? The main benefit to uploading to Flickr is that you’ll be able to predetermine the size of your photo and control the clarity of your photos. Also, your blogger account has a MB limit – at some point, you’ll find that you have run out of space to load photos and will have to delete pictures in order to make more room. By using Flickr (or other host sites), you eliminate that as an issue. You can purchase an annual account through Flickr for $25 I think…or use sites like photobucket for free. ***

So that’s BIG Picture blogs in a nutshell. What questions do you have? If you have any blogger tips you’d like to share, please leave a comment or if you want to know more…let me know. 

Also, I am in the process of writing fresh tutorials for the blog – if you have any specific requests, please shoot me an email. I’ve already gotten a couple of requests including a request for “using layers.” 

Until then, have a great day!
23 COMMENTS

    I don’t use too big of pictures because I’ve heard people in other countries steal them and make ads out of them!

    This is a really good tutorial. I love that you’re using screen shots. When I did this a few months back on my blog, the tutorial I followed was just words and it was really confusing. It took at least 3 hours over 2 days to figure it out. But this looks really clear and concise. Love it.

    I have a question…..when shooting a sunset…how do you avoid grainy photos???? I’m sure it has to do with ISO….but I haven’t much experience with those shots!

    I resize a totally different way but, this looks like it would be easier in the long run so Im going to have to try it out! Thanks for the tutorial! Hope you had a nice weekend! I missed out on the scavenger hunt this week but your pictures are always so awesome!! Hope I can join up with you guys next week!

    Great tutorial!

    There are also some great free templates at ourblogtemplates.com that allow for large photos (and no sidebar).

    Looking forward to seeing more tutorials!! I’d like to see one on how to shoot sun flare/sun spots. I just cannot do it!

    ah, I wondered why everyone watermarked! Hmm.

    Ashley your write up was very informative. I appreciate that you included screen shots for the steps. Thank

    This is awesome! I really want bigger pictures on my blog. When I get brave enough, I’ll have to try this!

    Thanks for taking the time to put together this tutorial. I’m looking forward to more! :)

    I write all my blog posts using Windows Live Writer –which allows you to resize your photos however you want and you see how it will actually look on your blog page without having to tweak any codes. :)

    This is a great post–thank you!!!

    If you use Blogger’s new Template Designer, the html code is different. They no longer use /* Outer-Wrapper…
    You can adjust the width of your layout right under the layout tab in Blogger Template Designer

    I was recently awarded with the Versatile Blogger award and decided to pay it forward to you! Your blog is amazing and so helpful!!! Thank you!!!

    Thanks Ashley, that really helps alot!!

    You may in fact be the most helpful person on the internet! Seriously!

    You’re awesome, Ashley! I’ve been kicking around the idea of making some changes over at my place…this could possibly be the nudge I’ve needed to do some ‘cleaning and organizing’!

    I would also like to see about sun flare. I still can’t do that. Great tutorial. Thanks again for doing your tutorial on my site.

    Thanks for the tutorial! I do have a question for you though…why do you/what is the benefit of uploading your photos to flickr rather than just the blogger uploader? it seems like an extra step to me, but maybe (probably) you know something I don’t!

    I didn’t know you run out of room on blogger, that is the main reson I have been using the blooger one, and my photo bucket is about 50% full already.

    JUST A FIY..

    You don’t need to go to the HTLM part anymore, you can costomize your just that by past this part

    #outer-wrapper {
    width: 910px;

    #main-wrapper {
    width: 900px;

    #sidebar-wrapper {
    width: 0px;

    into the
    Design – Template Designer – ADVANCED – ADD CSS

    That way it is ALOT harder to muck up your template. That is how made 90% or so of my template. It is soooo easy now.

    Great tutorial! I’ve figured out how to change the size of the photos in the html code, but that’s as far as I’ve gone. This is helpful

    thois is great thanlks when i have time I will have to practice this way of doing it. But for now being so new the size i have is alright.

    hey speaking of blogging questions how do you put a picture link at end of post? i will email ya..

    This is so great!!!
    Now I want to start my blog all over again! haha

    Oh my goodness I am SO glad that you posted the link to your guest post!!

    I had just rearranged my blog to accommodate larger photos but have been frustrated for quite some time with photo quality/clarity after resizing. I’ve always used Flickr and did sharpen my photos for the web, but using a different process… Anyway, I followed the steps in your tutorial and it looks SO much better! THANK YOU! :)

    Question: do you ever make the “unsharp mask” layer into a mask layer so that some parts (skin, for example) aren’t as sharpened?

    Thanks for sharing!

    OMG I have been looking for this adjustment for MONTHS! THANK YOU!!!!

    Follow up question – what’s the easiest way to watermark photos without doing it one by one by one or is there no other option?


COMMENT