I'm your geek

I'm his geek. Not sure how I feel about the larger format for pictures of me, however

Whenever I figure out something tech-related at our house, G says "you're my geek!" (I like to think it's said lovingly + proudly. Wait, do you think Brad says that to Angelina? Am I undermining myself here? Should I be more technologically helpless? Please advise.) Really, the secret is...I'll read the directions when he won't. Key to marital satisfaction, that. Someone has to read the directions.

Today I'm on loan as your geek. I'm sadly lacking in HTML ability (or any understanding thereof) but I'm pretty dogged when I really want to figure something out. And I WANTED BIGGER PHOTOS, darnit. Several of you asked for the secret codes to unluck all this big photo-ness so I thought I'd share here.

I know. This will only be interesting to a couple of people. If you don't have a blog, you won't want to read any further. Regular programming will resume next post.

* * *

This is for Blogger templates with two columns: one wide for posts (and those gorgeous big photos!) and the other a smaller sidebar. Mine is a Minima template, if that means something to you.

First you will reformat the blog to make it wider.

Click the "layout" tab at the top of your editing page for your blog

Now click "edit HTML" (you might want to copy the whole existing template and save to your hard drive just in case. I didn't do this but I feel like I need to give you the warning and the option.)

Scroll down until you see the section of the template. You'll see (red is added):

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

This will change the width of your whole layout, the whole page. You can change the width up to about 950 (or so I read). Change the number "660" to the new width (I did 950).

Now you want to widen the two different columns. You want the two numbers to add up to less than 950 so there is a little space between them. (Otherwise they run right into each other). To do this, you scroll down a little bit in the HTML template to the next block of code. First the main column ("main wrapper"):

#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 */
}

Simply replace the "410" in red with the new number. I changed mine to 650.

Next, do the same for the sidebar width ("sidebar wrapper"). This code is located right there after the main wrapper:

#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 */
}

Again, just replace the old "220" with the new width. (Mine was 250. 650 of the main column + 250 in the sidebar = 900, leaving 50 whatever-you-call-its as margin in between).

You can tinker with this until you get a layout that you like. Hit "save template" (and say a little prayer).

Now you're ready for the photo part of the operation.

(Is there anyone still with me? Hello? Yoohoo? No? Okay...catch you another day. Yes? REALLY? You must really want those big photos!)

Bad news: hitting the "add image" button will never, ever result in wide photos. Or not until Blogger changes something. Who knew?

Instead, you need to post your photos not from your own hard drive but from a photo hosting site like Flickr or Photobucket. Plus that way you won't lose EVERY photo in a hard drive crash. Or drop your computer from a counter and lose them that way. Just saying.

Create your post as usual. In HTML mode (not "Compose"), put this code where you're ready to post a photo:

img src="http address of your photo" width="100px" height="100px" /

(but begin it with a < and end with a >. I couldn't add those to the code here or it would try to post a photo there!)

You will replace the blue code with the http address of your photo on the hosting site (each of the sites have their own way of providing this but it's pretty obvious.)

The red code determines the dimensions of the photo. 100x100 is a small square. The easy way is to just change EITHER the width or the height and just delete the other. It will size itself to the right proportions. Since I made my main column 650 px, I made the width (or the height, if it was a vertically oriented picture) 650 px.

Again, you can monkey with this a bit until you get it the way you like.

* * *

Voila! Big beautiful photos and a wider blog. (Oooo..I wish I knew the html code to my hips...I would definitely bring the pixels numbers down a bit, especially post vacation. Anyone got those codes?)

If you use this info for your site, leave your blog address in the comments for us all to admire!

Good luck!

Thanks to this site for info on reformatting and this site on photo enlarging. And this one.

And this is the part where I say I am not a professional and am not responsible for the results on your own blog. OK? I may or may not be able to help with questions either. Sorry. I was an English major! Ask me to diagram sentences or deconstruct a poem and I'm all over it.

Comments

[cbentley]

You had me at "geek".

You lost me at everything after that.
I am, however, duly impressed with your expertise.

Love love love
Ma

[Bridget]

I love finding out these little secrets to people's marriages. I think its cute that you are his geek. Nathan calls himself the computer nerd. I appreciate not having to figure those things out and waiting for him to just give me a quick easy inservice.

[Lindsay-ann]

I'm impressed Annie but being new to blogging I'll stick with the regular sized photos at the moment! I have so much to learn! Your bigger photos really do look great.

[Christie]

I will be trying it soon. Just you wait.

P.S. That color of green looks really good on you.

[Celia Fae]

Oh, and ps do you ever use blogger in draft? I really like their new post window because you can make it bigger. Try it.

[Celia Fae]

I love the big pix and I wish I could do them with my fancy background. I kind of want to go back to plain so I can do stuff like this.

I admire your techiness.

[ppcjeanne]

Thank you! Just started blogging and this was SO helpful.

[Michelle]

"I'm your geek." is the sweetest lovephrase ever! Hubby and I have been saying it all day!

[gab]

This is the first time I've got a headache reading your blog!

(Love the large photo of you two, though...)

[gab]

No...don't delete this! I am going to come back with Brad and figure it out for myself! I just need to make sure it's a day I've eaten my Wheaties.

(I'm a geek, too...unfortunately more the 19th century variety.)

[cynthia Rankin]

Why do I have to send my photos to Photo Bucket or something similiar, instead of loading them from my hard drive. It takes too much time plus all of my photos have to be resized according to how I cropped them in photoshop. Teacher said there was never a dumb question. We'll see. Thanks so much! Cynthia

[Annie]

Hi Cynthia,
as far as I can tell, it's just a glitch with Blogger. You can load directly from your hard drive but then you'll have to be content with smaller pictures.

I hear you! It is a pain to reload and all that. I'm really not an expert...just posting the solution to the question I had. There might be a better solution out there; let me know if you find one!