Pages

December 28, 2009

Uploading Photos

I'm sitting here with another blogger, who is quite interested in getting photos into their post pages. Since I've only done it once, and saw a number of options, I've decided to write a tutorial so that I really only have to explain it once, at the time I do it.

Since my blogger friend was nice enough to have me over, I shot a few photos in the back yard that give me enough material to write about, so that we can experiment with the different sizes and formatting options.

Yes, I know you were expecting a post about the final "W" in the 5-W's and 1-H series, called "Why" but it's pretty safe to presume that you already know why you want to write a blog in the first place, therefore, I leave this one up to you unless you scream, yell, and absolutely insist that I put my two-cents out there for all to critique. Comments welcome.

As for the photos, there is a simple little photo icon that allows you to upload a photo right into your post. If you're using the "old editor" here on Blogspot, its located to the right of the spell check icon. Once more spot to the right looks like a piece of movie film. They tell me that it's the video upload button, and perhaps I'll get to it one day. For now, we focus on the photos. When you hover over the correct button, the "tool tip" will read "Add Image."

The Blogger Add Image function accepts J-Peg (JPG), graphic interchange format (GIF), bitmap picture (BMP) and portable network graphics (PNG) formats. You can browse your hard disk and upload an image of 8MB or smaller, or you can browse the web and link to an external URL that points to the image. Uploading an image will prevent a broken link from wrecking your page, so I suggest this option. The limit on image uploads is controlled by your Google Picasa Images account. Click on the question mark icon in the Add Image dialog to learn more.There are four option for formatting your image. None, Left, Center and Right. I'll play with these a bit, but the left and right options allow the text to flow alongside the image. There are also three size options available. Small, Medium and Large. Details now follow, but for now, let's just use a centered large image and see what we get.


Unexpectedly, the image uploaded at the top of the page, and activated the line-spacing bug in the old editor. I was able to hover my cursor over the image and get the four-way arrow icon, indicating that I could drag the image to where I wished within the post. I pulled it to the bottom, and from the Preview screen, determined that my 640x480 image was reduced to a 400x300 pixel image. It is suggested that your horizontal image size match the image size (in this case, 400 pixels) so that resolution reduction artifacts do not spoil your picture. Here is the best 400 pixels from the same image.

This time, I selected the left formatting option. This time too, the image did not upload at the expected cursor position, so I had to drag it down to where I wanted it to be. Uploading the image activated the spacing bug again, so I've decided to call this part 1 of 2 (or more parts) and give you more details in the next post.

From what I've just discovered about this interface, It is best to select your image(s) first, crop them to the desired size and then upload them into your post, in reverse order, last image first, first image last. Get the images in place and then add the text. You'll save a lot of time a frustration.

Note that there were not too many resolution reduction issues with the first image. I'm actually happier with the clarity of the original image that was reduced, that the best 400 pixels that I selected. Based on this, go with what you need, pick the formatting options, upload the picture and then start writing.

The formatting in this editor is driving me nuts, and more experimentation is necessary before a good multi-image posting method is created. I will share it with you as I have the opportunity

Have Fun!

(Note: I had to edit the HTML directly to correct the spacing formatting, and the "div" tags were unexpectedly replaced with "p" tags when more text is added. If you have any advice, I'm really ready to read it, as is my blogging friend.)

No comments: