Saturday, October 18, 2008

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 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'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,( 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 {

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;
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 If anyone has anything to add to this...please share!



D said...

great info! thanks

gina said...

how aptly put...hold your nose and jump in! lol that's almost the way i feel, i'm so techincally challenged. thanks for the info...hopefully, i'll be able to figure it out. :)

Jill Marie said...

Thanks for the information. I've been messing around with my blogs layout stuff so much, time to jump into the HTML thingies, I suppose.
I look forward to the big pictures post.

Karen Funk Blocher said...

Thanks for this. The template "Denim" doesn't define things quite the same way and I pushed the sidebar down when I gave it my best guess, but maybe I'll try again when I'm not working on a thousand things at once!

Michelle said...

This was so helpful, Kat. I had to adjust it a few times, to get things just the way I wanted them, but your instructions made it that much simpler! THANK YOU!

Jeannette said...

I just use the Direct Link from Photobucket, it gives really big clear photos and takes seconds to add photos to your blog! Jeannette xx

glee said...

I was ready to give up the lay out of my fashion blog that I so love simply because the wrappers are so small thus photos are small too. thanks to your post and i did not have to change everything, i just had to adjust the wrappers size. more power to you. :)

Thegirlinthetree said...

Thank you this helped so much! :)

chowchowgrl said...

This was helpful and simple! You're exactly right, seeing "HTML" strikes terror in some of our hearts! I'm better dealing with spiders than HTML!

When is the next photo challenge? I just discovered your lovely blog this morning and want to join in with pictures.

Again, thank you for the clarity of your comments.