Wednesday, April 15, 2009

A Technical Interlude . . . Bigger Blog Pictures ???

A question just came in about how to make the blog page wider and thus allow posting of larger, wider images. I had exactly the same question after I started noticing that some blogs had much wider pages and larger images posted than what was possible with the original page defaults as provided in the templates from Blogger. This is one area where I think Blogger.com could be far more helpful at the beginning of one's blogging life than in fact they are. And even in the "Help" section I didn't find the answer to this relatively basic question. . . but where there is a will, there is a way, right ? So I started asking around, and very quickly got answers back from out in India, and I would like to thank Loulou and Arnaud for their very kind help.
.
So, to make a blog template page wider, to allow posting bigger images, this is what I learned :
.
1. Click on the "Layout" tab, which is one of the four tabs at the top of the page when creating a new post, just under the blog title. Once on the "Layout" tab, click in the choices below it on "Edit HTML"
.
2. That opens up a page where you will see "Backup / Restore Template" and "Edit Template". It is probably a good idea to make a backup copy of your Template code, just in case you inadvertantly make irreparable errors while modifying your template, which could happen, for example, if your cat jumps on your head while you're typing. . . a word to the wise. . .
.
3. Then go into the "Edit Template" window, and scroll down past the "Variables" section until you get to " /*Header. . Scroll down just a little more to "Header-Wrapper", and in the "Header-Wrapper", change the "Width" setting to a larger number. In my blog, example, I changed the header-wrapper width from the default of 660 pixels to 780 pixels.
.
4. Continue scrolling down slowly, and adjust these elements to whatever size pleases your eye :
#header .description, max Width (I changed this from 700 to 810)
/*Outer-Wrapper, Width (I changed this from 660 to 780)
# Main-Wrapper, Width (I changed this from 410 to 540, so the main wrapper can hold photos up to about 530 pixels wide now, allowing for the 5 px margin on each side)
Sidebar-wrapper, Width (I decreased the sidebar width from 220 to 210 to leave more space in the total page width for photo and text width)
.
For each of these elements I made the changes gradually, increasing each number by 30 pixels at a time, then saving the change and looking at the result. It is possible to go even wider than I did, but I'm happy now, much happier than with the default settings, and it fits comfortably on any size screen still.
.
Now, once you have done that, and saved the changes in your Template, it is necessary when uploading new photos to manually adjust the size of each new photo... which is very simple and fast, and IMHO well worth the few seconds of tedium to do so.
.
When you are in the "Posting" page, creating a new post, and you have just uploaded a photo, click on the tab at the upper right of the new post window that says "Edit Html". Where your image was in the post page, you will now see a section of Html code for the image that looks like this (this is only part of it) :
.
/jlCzDUTDzb0/s1600-h/1988+LeaningDreamHouse.JPG ">WIDTH: 530px; CURSOR: hand; HEIGHT: 375px" alt="" src=http://3.bp.blogspot.com/_oYIgRNpSwzE/SeEb5UCWrNI/
AAAAAAAACAE/in7HA2lDS_Y/s512/1988+LeaningDreamHouse.JPG border="0"

.
That is all Chinese to me, but there are three things to change each time, the "Width", the "Height", and the number preceeded by an "s" just before the name of the photo file at the end. Given that I set the Main Wrapper width to 540 pixels, for the photo Width, for a landscape layout photo, I set it to 530 each time, and then the height to whatever the proportional height is to keep the ratio of height to width the same as in the original image.
.
The number with an "s" just before the filename is by default set to /s400/, and I've found that this value cannot be set to any number, it has to stay at certain values, but /s512/ works fine for me. I think the next step up after s512 would be s800. . . I'm not sure exactly what this value is doing, but it is important for allowing a bigger image on the page.
.
So, Jeff, I hope that helps. . . I decided to do this as a post because I'll bet there are other folks out there who have the same questions as you and I did. . . so feel free to pass this on to anyone who may be interested. . . with my best wishes for an excellent day. . .

1 comment:

Loulou said...

You're most welcome Owen!
Looking back at the very detailed explanation, we can say that such action is not an easy one.... :-)