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
#outer-wrapper {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).
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
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 {
Simply replace the "410" in red with the new number. I changed mine to 650.
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 */
}
Next, do the same for the sidebar width ("sidebar wrapper"). This code is located right there after the main wrapper:#sidebar-wrapper {
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).
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 */
}
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.
