Friday, December 29, 2006

Adding images to your posts

There are various ways of adding images to your post. Most people uses the photo upload icon Blogger post editor photo upload tool 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 Blogger post editor photo upload tool icon image below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="cursor:pointer; cursor:hand;" src="" 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


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
Photobucket: getting the URL of the hosted photo

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:

Storage space1GB (10,000 images)5 GB (50,000 images)
Image file size1 MB2 MB
Image dimension1024x7682240x1680
Slide show imagesup to 10up to 50
Video length5 minutes10 minutes
Print discountnone10%
FTP supportnoneYes
Premium supportnoneYes
Bandwidth10 GBunmetered

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):

Google Group - photo URL

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
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.


Motivated Forever! said...

MAHALO NUI!!! I've been so frustrated trying to upload a picture of me and my children in the profile section. I finally was able to upload the picture in the post section. I never even realized that could be done until I read your guide. I still have to finish reading.

By the way, I found your blog because I was looking for some info on using as an affiliate on my blog. I couldn't upload "The Secret" and thought maybe it was illegal to use on my blog. I guess it's ok and I'll try again.

Have A Great Day!

Yolanda Crisostomo
Maui, HI

Dale & Leslie Simpson said...

How come sometimes when I upload photos, they are enlargeable in the blog but sometimes they aren't? I can't see that I am doing anything different from upload to upload.

Thanks for your help.

Joplin, MO

Peter said...

Hi Dale,

I need to ask 2 questions:

1. Do you prepare your posts in the EDIT HTML mode or COMPOSE mode
Publishing a post with Blogger

2. Did you move your photos around while you are preparing your posts and if you did, did photos in those posts become not enlargeable

3. Hoping you can provide more details about what you did while preparing and before publishing those posts where the photos become not enlargeable.

Peter Blog*Star
Blogger Tips and Tricks

Dale & Leslie Simpson said...

Thanks for your reply, Peter.

I added them through Compose mode.

I upload as medium and centered.

They always load first in the blog, so I move them where they need to be. (Why can't they load into the space where they need to be?)

Some of the photos can be enlarged upon clicking, but many can't. I am not aware that I do anything different, but then I am aware only of the choice of size and layout.

Do I lose this feature when I move them? If so, how to avoid? They always load in reverse order of where I need them to be, as I compose narrative.

Thanks for your help. My blog is


Peter said...

Hi Dale,

I always use the EDIT HTML mode to prepare my posts so don't have much experience with the COMPOSE mode, but was told by another Blog*Star that what you complained about may happen when you do what you described in the COMPOSE mode.

I think I did explain in this post why I prefer the EDIT HTML mode and also how to move the photos around.

Beginners who are not familiar with HTML will naturally prefer the COMPOSE mode, but I encourage all my readers to learn a bit of HTML and it is not difficult and you need not be an expert. You just need some basic essential, and with that little bit, you can do much. If you read my posts often in my Blogger related blogs (in signature line), you will eventually pick up sufficient HTML to do quite a lot of things.

However, I would warn about moving frequently between EDIT HTML and COMPOSE modes as this can mess up a lot of things.

If you would like to know more, feel free to ask.

Peter Blog*Star
Blogger Tips and Tricks
Blogger for Dummies
Testing Blogger Beta (now New Blogger)
Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks"

ruSh.Me said...

Hey Peter! Please help!!

I have a .jpeg image, 3.08Mb size, 100px X 7952 px dimensions. I want the image to fit across my Post width so that a reader has to scroll down to see the entire image...,, everytime i upload the image it shows scaled down to a smaller size...

I tried putting it in table.. didnt help...!!


Peter said...

Refer to the photos in photo blog

margot beauchamp said...

The photo icon on my editpage disappeared. How do I get it back. I turned off popup blocker - what else can I do?


Peter @ Enviroman said...

Among things you can try are
1. clear cache and cookies
2. use different browser
3. reset template widgets