Friday, July 11, 2008

Size Matters

Blogger allows the uploading of images and displays them in three sizes. The largest size is 400 px. I’ve been dissatisfied with the 400 px wide display of my images. Plus I don't want my viewers to have to click-click-click to see my images.

In order to increase the size of the layout, I’ve changed the template for the blog, click "Customize", "Layout", "Edit HTML". I changed the the “Outer-Wrapper” from 840 px to 1060 px and I’m using a 220 px sidebar-wrapper and a 1060 px “Header-wrapper” and “Outer-Wrapper”.

My photos are stored on Picasa Web Albums which will create a link to an 800 px wide image. You can still use the Blogger uploader tool to upload your images. When you upload a “large image”, you will have “s400” in the string. Change this text to “s800” and you will get the 800 px wide display.

With the large format, the link to the image is not needed nor is the style string. Here is a screen shot of how I edit the image HTML. The top string is the blogger generated HTML for the image. I've put the text string I'm removing in red. The resulting image HTML is in the bottom paragraph of the.

Here you can see a 400 px image and an 800 px image. Picasa also has a 640 px that you can use. For photo blogs, I think it works well. I’m much happier. Let me know what you think or if this has helped you.

Posted by Picasa


Anonymous said...

Like I've told you before I think Blogger should adopt yyour template in it's pre set options.

It's the best form I've seen yet for displaying a photo journal.

Kudos to you!

A New England Life said...

I'm sorry Steve but I'm a bit confused. Do you go into, and change part of the html code in your blog?

When I 'source' your page it appears that's what you've done.

And when you talk about the 'string' what exactly are you referring too? I'll figure this out!

Steve Borichevsky said...

Sorry Eve, this comment slipped under the radar.

Yes, got to "Customize" then "Edit HTML". You have to edit your template.

A "string" is a character string and is coder jargon. For example, "abcde" is a character string which is 5 letters long.

Robin said...
This comment has been removed by the author.
Hundewanderer said...

Thank you for sharing this information, it's good to know. I currently edit my html code so that my photos open in a new window but even that is a hassle for viewers. I really enjoy your site, thank you for sharing your world with me.

Anonymous said...

Steve, this is just a bright idea. I already made the pertinent changes to the css of my blog. One suggestion is that you change the max-width in your header .description to 1060px so that the description looks centered below the title.

Best regards,

Mojo said...

Actually, it's even easier than that. If you remove the "/s400" (or "/s800" or whatever) altogether, you can display the image at its original size. If that's too big for your template, you can specify the width or height (the browser will handle the dimension you leave out keeping your aspect ratio intact) by adding width="nnnpx" (or height="nnnpx") to the "img" tag.

Also, you don't have to remove the "<a href=...>" tag to get your images to display at a different size. You certainly can do this, but it won't affect the way the image displays on your blog. All it will do is make the image un-"clickable". I leave the link tag intact (albeit modified) so that I can display it at a smaller size and let the users view it full size if they choose.

As far as I know, Picasa doesn't limit the size of your images. At least if there is a size limit, I've never hit it. And I've (accidentally) uploaded images as large as 3500 px wide.

Steve Borichevsky said...

Yup, Mojo, this all works and if the reader is html savvy, should try a few of these to see what he likes best. I'm uploading 800px wide images becasue is saves on disk space. I find that the coder put too much useless stuff in the image tags for what I want to do.

Dot said...

Steve, thanks so much for your posting it did help me and I've been going crazy trying to figure out how to expand my postings. I didn't get them as large as yours...I agree with the first posting...would be great if your template would be the blogger standard...but your help made enough improvement that I'm a happy camper! Thanks a million...and I really enjoy your site!

GaneshPrasad said...

Thank you Steve! That was a great help. I recently started my photography blog. One friend suggested me to go through article, and now I know it all. Loved your other posts too..

Related Posts with Thumbnails