Putting Big Photos In Your Blogger Journal

I like to post big pictures. The image size limitation had been a major issue for me when considering using blogger for my photo journal. Now that AOL has forced my hand...I spent a couple of days searching the internet and experimenting in a test blog. Not only did I want the images BIG...I also wanted them clear. I finally have it.

I won't lie and say that it's as easy as it was in AOL...it isn't. You have to just hold your nose and jump into the HTML pool. But there are just a few template modifications that you need to make then the process for posting big pictures is not that complicated. When you're dealing with code, you have to realize that every character has meaning to the computer. So, if you drop punctuation or an odd character, your results may be erroneous. So, don't SAVE anything until you are satisfied what you are seeing in the preview. You might want to do what I did, which is master the process on a test blog, then manipulate your blog in the same way. Are you ready??? Here we go...

I started with the Minima template. All the code I'm going to show is from that template. If you use another template, you will find similar code...you'll just have to look a little harder for it.

You are going to be concerned with the Header, Body, and Sidebar wrappers.

From the layout page, choose edit HTML. Don't freak out when you see it. What we're going to do first is alter the template so that it can accommodate big pictures. If you look at my blog,(http://sunflowerkat.blogspot.com/) you will see that the template is much wider that the default size.

We are only going to make changes to the highlighted parts of the code. Bold red is what you're looking for in the existing code. Bold blue is the replacement code.

1. Start with widening the header. Scroll through the HTML code until you find this section

/* Header----------------------------------------------- */
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

I sometimes make my photos up to 800 pixels wide. To allow plenty of space for both the wide text field and the sidebar, I changed the highlighted portion to read:
width: 1028px;



2. Widen the body of your blog
Scroll down to

/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Change to
width: 1028px;


#main-wrapper {
width: 410px;
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 */
}

Change to read
width: 850px;

(this will allow you to post photos up 825 pixels wide. If you don't think you'll ever want to post that big, you can make this a smaller number which will allow for a wider sidebar. Just make it a bit larger than the largest width pic you'd want to post.


#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Change this to
width: 145px;

Note that this will be a slimmer sidebar than the default size. You can essentially adjust the main wrapper and sidebar wrapper any way you want as long as the total pixels of the two widths doesn't exceed the outer-wrapper, which I set to 1028. You'll notice that in my case, 850 + 145 = 995. In the documentation that read, I got the impression that it needed to stay below the 1028 I specified for some padding between the fields. That may not be necessary but I didn't try it. It appears from the code that there's some padding built in.

OK....that's it for modifying your template. I tried to make this a straightforward as I could. I hope I was successful. Remember, there is a button in the layout editor that will revert you back to the default template so there's nothing to be scared of. It will give you peace of mind if you try it in a test blog first.

In the next post, I'll share how I have been posting the BIG pictures. If you're lost, email me at sunflowerkat321@aol.com If anyone has anything to add to this...please share!

Kat