Adding images to your posts

There are various ways of adding images to your post. Most people uses the photo upload icon tool icon in the post editor toolbar. When you click this icon, you will get a pop-up window where you can browse for photos saved in your computer to upload to your post or enter the URL of a photo already hosted on the web. If you choose the first option, your image will be hosted by Blogger. You may choose to have photos which are already hosted on the Web using the second option. If those photos are not yours and not hosted by your own third party photo host like Photobucket under your own accoount, there may be copyright and bandwidth issues.

You will have a choice of how to position your image - none, left, center, and right. See "Positioning of the images" below.

You can upload more than one photo at a time. After selecting a photo from your computer, to upload another one, you just click "Upload another image" and another field will open below the first one, and you just repeat the process. When you have finished opening all the photos you want to upload, just click the button DONE and the photos will be published to the post. For me, I prefer to upload the photo one-by-one.

With this method, the image will be rescaled to fit into your main column automatically if you choose the "large" format.

File format of images you can upload

You can upload images in jpg, gif, png, tif or bmp file format. If you have images in format not included in the above, you can use the free and very good Irfanview to convert it to an acceptable format. I use Irfanview a lot, together with the Paint program that comes with Windows. See post Using Irfanview for your blog.

Positioning of the images

If you choose left or right, the text will wrap around the image. The image will always be uploaded to the top of your post irrespective of where you place the cursor. If you want to upload only a single image, and you want to leave it at the top, or you want it to be in a particular paragraph, then this may be a good choice. However, if you intend to position your image accurate in the post with respect to the text, you will have very little control over how the text will wrap round your image, except choose which paragraph it will appear in. You may place it in a certain position in the post editor window and preview it, but when you publish it, you may discover that the text flow differently around the image on the Web.

Choosing NONE means you can position it anywhere within the text such as that "upload photo" icon you see above.

Choosing CENTER will mean your image will be positioned in the center of the column and text will not wrap around the text.

Repositioning and resizing your image

As mentioned above, images are always posted to the top of the post irrespective of where your cursor is. If you want to repostion it, if you are in the COMPOSE mode, you can click, drag and drop it to whereever you want. You can also resize the image by positioning the cursor at the corner of the image, drag and drop it to the size you want. You can also do the same with the sides, but it will mean the aspect ratio of the image will be changed (the image will be distorted). I don't like to use the COMPOSE mode to reposition images. This is especially if you have a long post, and you want the image way down the post. You will have to do numerous consecutive drag and drop to get it there.

To reposition image, I prefer to use the EDIT HTML mode, as all I have to do is to highlight the HTML for the image, cut and paste it into the position I want. To be able to do this, of course you would need to know how the HTML looks like, so I put below the HTML for this image below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbImO4Z-7XFic_3Wn7IbFVzR_3ZMkZmkJvGkKHBoV69qE1DYxcVACqi83s_x_JKfQhyp3xVdycy_v2ePcSm2g71mWWBbfP8jYZ3VNL6cFptV_UAzWbYiDkSnkH9cVCmFRYAYQWDGaXjY/s1600-h/post+editor+photo+upload+tool.jpg"><img style="cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbImO4Z-7XFic_3Wn7IbFVzR_3ZMkZmkJvGkKHBoV69qE1DYxcVACqi83s_x_JKfQhyp3xVdycy_v2ePcSm2g71mWWBbfP8jYZ3VNL6cFptV_UAzWbYiDkSnkH9cVCmFRYAYQWDGaXjY/s400/post+editor+photo+upload+tool.jpg" border="0" alt="Blogger post editor photo upload tool icon"id="BLOGGER_PHOTO_ID_5013615884201821682" /></a>

When uploaded, this alt attribute alt="Blogger post editor photo upload tool icon" was just alt="", but I added the description in because search engines cannot read images, but can read the alt="" attribute. Doing this will be good for search engine to know what your post is all about. Further, if for any reasons the image cannot be displayed, the text will be displayed in its place.

Problems uploading the image via the photo upload icon in the post editor toolbar

In the Google Blogger Help group, there are frequent complaints of not being able to upload images. If you are experiencing such difficulties, there are various ways you can try to overcome it:

Using a different browser

Try using a different browser. See post What to do when you can't upload photos, publish post, login, download a webpage, etc. I find this simple "trick" helped me through lots of situation, and I have received feedback from readers that it has helped them. But don't expect it to work in every circumstances. If you belong to the 80% surfers who use only Internet Explorer, it is time for you to download and install FireFox as it is a very much better browser than Internet Explorer 6. See also post Why you should be using more than one browser

Photobucket

Upload your image to a third party photo host like Photo Bucket. With Photobucket, you can upload photos as well as videos, and you can blog direct from Photobucket. There are 2 type of accounts - free account and Pro account. I will explain the difference later.

After you have uploaded your photo to Photobucket, you can use the <img src="photo URL" width="W"> tag to publish your photo to the blog, where W is the width of the photo you want displayed in your blog, or you can blog direct from Photobucket. If you take the first alternative, you will need the URL of the hosted photo. This you can get from your Photobucket account. See screenshot


To publish the photo to your blog, type this into your post editor: <img src="URL of photo" width="W" alt=""> where the URL of the photo is what you see highlighted in blue in the screenshot above. To ensure that the image published fits the width of the main column. You will first have to know what is the width of the main column. For this, you will have to get to your template editor window and look for this block of codes:

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

(This one is taken from this blog. It says the width of my main column is 400 pixels)
If I publish an image to this blog, I will have to type the tag as

<img src="URL of photo" width="395"> which will make the image fits nicely into the main column. The height of the image will automatically be adjusted to keep the aspect ratio constant (that is, the photo will not be distorted). Alternatively, if you don't like to use the width="" attribute, you can use Irfanview (click "BACK" button to get back to this page) to resize your photo to fit the main column before you upload it to photobucket. Then you don't to add the width="" attribute to the <img> tag.

For more information on the use of the <img> tag, go to W3schools.

I also tested direct from Photobucket and the result was disappointing, and I will advice you to use the <img> tag instead. I blogged direct to this post Testing blogging direct from Photobucket, which wasn't my choice, but the blog just happened to be the first blog in the list of blogs on my Blogger account. You can read more about the test in that post.

Difference between a Photobucket free account and a Pro account

I will tabulate the difference between a free Photo Bucket account and a Pro account:

Features	Free	Pro
Ads	Yes	No
Storage space	1GB (10,000 images)	5 GB (50,000 images)
Image file size	1 MB	2 MB
Image dimension	1024x768	2240x1680
Slide show images	up to 10	up to 50
Video length	5 minutes	10 minutes
Print discount	none	10%
FTP support	none	Yes
Premium support	none	Yes
Bandwidth	10 GB	unmetered

You can get a PhotoBucket Pro Account for $25 a year or $2 a day.

Using Google Group

You can create a Google group to specially upload your files and photos like what I have done at Google Group Photostore. You upload your photo, and when you have done that, you right-click on the file and choose "Copy Link Location" (see screenshot):



Then you use the URL as described in the section for Photobucket above. BTW, I used that image Baby Centre Header 3.JPG for the Header in this blog Baby Center

Blogging from flickr

This is a bit more complicated, and I have only started testing how to blog from flickr. I have difficulties in adding blogs to blog to, so while I explore blogging from flickr, I will just post the notes I made while trying to upload photos to flickr and blogging from there. Hopefully, I will be able to revise this section in the next few days, time and memory permitting:

Signup for a flickr account
upload photo
add tags
edit title if necessary and add description
save
click on photo
click "Blog This"
Configure a blog to publish to, if you have not already done so
If posting to New Blogger, have to sign into Google Account first
Grant Access or
Granted Access
Create a custom posting template
Click on Your Photos
Click on "Blog This"
Select blog to publish to
Type text for blog post
When ready, click "Post Entry"

I have successfully posted to a New Blogger blog at I think, therefore I am.

The problem I am having is figuring out how to add other blogs to post to. Hope to have an update, time and memory permitting.