Thursday, April 12, 2007

Uploading and manipulating images Part 2

I have published a previous post on Uploading and manipulating images in Blogger (click "BACK" button to get back to this page). This will describe using the <img> tag to display images.

First you will have to host your images on the web. This can be done by creating and uploading your images to a Google Groups, or getting New Blogger to host your images (click "BACK" button to get back to this page), or use a third party free photo host like Photobucket. Once you have uploaded your image to the web, you will have to get the URL of the image ready.

This post will describe getting the image in the midst of the text.

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island.

The above images was displayed by typing the following HTML in the middle of the text as shown below:

A town called Kuching <img src="photo URL" align="bottom" width="48"> (cat) in the Borneo Island.

A town called Kuching <img src ="photo URL" align="middle" width="48"> (cat) in the Borneo Island.

A town called Kuching <img src ="photo URL" align="top" width="48"> (cat) in the Borneo Island.

Note that the attribute height="W" has been left out of the <img> tag. The width is automatically adjusted to keep the aspect ratio constant so that the image is not distorted. Also, the default is align="bottom" and if you want this alignment, you can actually leave out that attribute as done below, where I display images in the beginning, the middle and the end of text:

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island

The above was produced by typing the following text and HTML tag as follows:

<img src="photo URL" width="48"> A town called Kuching (cat) in the Borneo Island.

A town called Kuching <img src="Photo URL" width="48"> (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island <img src="Photo URL" width="48">

Note that the attribute align="bottom" has been left out in the <img> tag.

Update 17 April 2007: When I checked the post, the images were blank box, although when I first made the post, the images appeared fine. This perhaps was because the photo was uploaded to a private Google group. I thus reupload the photo to a blog specially created for uploading photos - My Photostore - More Cats in town, clicked on the image, and in the page containing only the photo, click VIEW > PAGE SOURCE and copied the real photo URL from the page source and replaced all the photo URL in the post. The image shoudl appear fine now.


  1. Peter - I really appreciate your blog and your instruction on posting images. After addressing all the coding issues and looking at the blog in different browsers, I'm still having difficulty viewing one particular image that I'm hosting on another server. Here's the image url:

    Here is the blog page I'm trying to link to:

    The image is supposed to show up in front of the Download MP3 link. However, I only see the alt image ">".
    I would appreciate any feedback you might have for me.

    Best regards,


  2. Hi Jonathan,

    Not sure what you want to accomplish, but I have put an image link at the bottom of the first right sidebar at the bottom of this blog Standard Insurance. Have a look at it, click on it and see if that is what you want.

    BTW, I may have to remove your comment because Blogger didn't give us the ability to edit post. Your long link

    extend into the right sidebar in FireFox and may cause the sidebar to slide to the bottom of the page in IE6 and below. If you want, you may comment again.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

  3. Peter,

    That's exactly what I want to do, except I want to include the image in the body of the blog next to each link called "download." I don't know why it is not showing up. If you go to the blog you can see that it is an image placeholder in IE and a ">" in firefox. I'm stumped.



  4. Is there a way to post the pictures and NOT have the border line all around it? I would like to just have the picture. This is especially true as I am trying to upload my signature for the end of each post. Will look dorky to have the box around my name. Thanks!

  5. hi Peter. thanks for this!

    i am wondering if there's a way to avoid having the photos expand (when clicked). i'd like to be stagnant.. like no clicking on them possible. Is this achievable?


  6. Try to click on the images to enlarge them at testing dragging images and let me know what you found and ask again to remind me to do a post later to explain.

  7. Peter, I'd like to link a photo to an audio file I've hosted at What I'm wanting is what you can do with the picture widget in the side bar, where if you click on the picture it takes you to a specific URL. Is this possible within a post.

  8. Appreciate such a helpful and informative blog! Is there a way to change the default photo size in a post? So that each photo uploaded will be bigger than what is standard?

  9. There may be other ways but the way I know if I want to display photos in sizes different from that determined by Blogger would be to first get my photos hosted online, get the photo url then use <img src="photo url" width="some number" /> to display the photo to the controlled size.

  10. Hi Peter, thank goodness you are here.
    i have been having trouble moving my images around my posts: they move with dragging, appear on the blog, but ones that i have moved do not open up when clicked.
    images i have left (ie at the very top of the page) can be enlarged with a click. I have been working around this by pasting text above images but this is not always possible with other images in the mix.
    any suggestions?

  11. I would suggest instead of drag-drop, you compose your post in the Edit HTML mode and copy-paste or cut-paste the codes for the images to wherever you want them to be. BTW just in case I mess up, I usually leave the codes at the top of the page and hide them by using the comment tag <!-- and -->


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics