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!