Saturday, May 09, 2009

Tips: Uploading images via Blogger post editor image upload icon

If you are already familiar with Blogger HTML codes for displaying uploaded images, alt and title tags, skip to Tip to avoid having to upload twice after making a mistake editing

Well I don't know how much of a tip this is going to be, but it is a procedure that I follow when uploading images through Blogger post editor and which I figure is important if you are even just a little teeny weeny bit serious about blogging and also if you want to avoid problems. I always use the EDIT HTML mode and practically never the COMPOSE (WYSIWYG) mode. To the uninitiated, that may be a bit unsettling as when in the EDIT HTML mode, the image is replaced by a block of seemingly undecipherable codes like the one below (please don't get frightened by the "gibberish" as you do not need to understand fully the codes in order to productively uses it):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="" border="0" alt="Sivakumar being manhandled by Special Branch thugs"id="BLOGGER_PHOTO_ID_5333720398637462818" title="Perak Speaker Sivakumar being manhandled by Special Branch thugs" /></a>

which is code to display the image below:

Sivakumar being manhandled by Special Branch thugs

Now I sincerely hope that those who shun HTML and always use the COMPOSE (WYSIWYG) mode will seriously consider switching over to the EDIT HTML mode as that offers various advantages and will allow one to do things that one cannot do in the WYSIWYG (what you see is what you get) mode.

One of them is you will be able to complete the alt and title tags in the HTML code to display the image. The alternate (alt="") tag is for you to write some texts descriptive of the image which when for some reasons the image cannot be displayed, instead of an empty box, the alternate text will be displayed in place of the image. There is a further advantage from the point of view of SEO (search engine optimization) as while search engines cannot read images, it can read the text in the alt="" tag and so can tell the search engines what the image is all about.

I also add a title="" tag and this is to enable visitors to hover the mouse over the image whereupon a "tool tip" will appear with the text you write into the title="" tag (try hovering your mouse over the photo above).

Now it is possible that when editing the image HTML codes for example when editing the alt tag or adding the title tag, having the INSERT mode off, editing caused part of the codes to be over-written and caused the image HTML codes to be corrupted thus forcing you to upload the image again. To avoid this, read the next section.

Tip to avoid having to upload twice after making a mistake editing

Now by default, irrespective of where your mouse cursor is when uploading image, the image (or its representative codes if in the EDIT HTML mode) will always be at the top of the post, and if you want the image elsewhere, you will have to move it there. My habit is to copy-paste instead of cut-paste. This is because when I edit the image and if something goes wrong (I mistyped or deleted something) while editing, instead of having to re-upload the image (and wasting storage space), I just delete the messed-up codes and recopy-paste from the original codes. When all editing have been done correctly and safely, I will then surround the original codes with the comments tags <-- and --> and the original code will be hidden and not displayed. To make this clearer, I will reproduced the image codes below together with the comments tags to hide the image:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="" border="0" alt=""id="BLOGGER_PHOTO_ID_5333720398637462818" /></a>


  1. Thanks so much for this tip. I have begun to use it and have even went back to older posts to add these in. Hopefully in time this will generate a nice flow of traffic. I have read that making images in the blogger album public in Picasa has some effect but I am not sure of that. Perhaps it gets the album indexed but not the blog.

  2. Hi from Peru, I was wondering if you can help me:
    The other day I was reading something in a blog (I think it was a blog) and I saw the google earth moving showing Peru.. I close the webpage cause at that time I was kind of busy and didnt care about it..but then I realize that i wanted to the heck you can do that! would be awesome to know exactly where the person who is reading you lives in.
    Have you ever seen this aplication?? Ive been looking, but no luck so far.

    If you know where can i get this application..pleaz answer me to:; thank you!

    And sorry for my english mistakes!

  3. This is great! Thanks! Hey...any tips on how to make the images larger? I tried changing the size after it is loaded, but when it shows's super blurry...even when the original file was much larger :-( Any tips on how to bypass the major shrinkage of blogger?


  4. Refer to testing image upload and resizing and see how the image sizes are changed. How did you resize your image - in the EDIT HTML mode or in the COMPOSE mode? I did that in the EDIT HTML mode by editing
    width: 373px; height: 400px;

    I retested uploading and resizing a 1600x1200 image at testing resizing image and the resized image did appear a bit blurry.

    Now look at the last photo at testing resizing images again. The second resized appear sharper and is done by uploading to Photobucket

  5. Hi Peter

    Thanks for the tip. When I next get a moment, I'll re-blog and link to your excellent tutorial.

    As an extra point worth mentioning, I totally agree with the copy paste v cut paste.

    There's something a little glitchy about Blogger after moving an image in a post or as i often do amending the clicking url to a page rather than the blogger image view url.

    I tried your tip the other day but of course it broke - not sure whether it was my copying and pasting or Blogger, plus I couldn't get it to accept the alternate url the image would take them too, so i gave up to try another day.

    As it goes I suppose and yes - i'd accidently caught copy cut that time. How annoying.

    Thanks for the timely reminder.

    Jonathan - Fabulous Photo Gifts

  6. Brilliant! I'd been so frustrated by having to drag the photos down again and again and now with HTML cut and past problem solved! Cheers so much :)

  7. Cool site, excellent tips here. I hope you don't mind if I add you to my blogroll...

  8. Mind? I will even go down on my knees to beg you to actively link to my blog. A million thanks.

    Peter @ Enviroman (Blog*Star)
    Follow me at Twitter @enviroman

  9. Thank you so much for the prompt reply. I link you up here: I also included in my Blogroll your Blogger for Dummies blog.
    I added you in Twitter as well...

  10. way cool page peter- please check mine out too thanks From Pam

  11. Thank you very much for the tips. Post more tips.

  12. Any idea why the image defaults to the top of the post? Even though copy and paste is quick to do, it stills annoys the heck outta me.

  13. If you are not happy with your current post editor, you can try the new updated post editor where images are inserted at the mouse cursor position. Please note that if you are also not happy with the updated post editor, you can switch back like how many of us did.

  14. I am having a frusterating time putting alt tags in my html...

  15. What did you do and what kind of problems?

  16. I can't share how much your blog has helped! Even though many of the entries are older, I'm learning new things by each one.

    The photo "drag to move" was a feature I hated about Blogger (has stopped me from adding a photo from time to time!)...the information about the HTML is a perfect fix. I can't wait to try it out!

    Thank you again - as another commenter wrote, I hope you don't mind if I link to your blog!

  17. For Lisa,

    Permission? I would go on my knee to beg you to link to my blog.

  18. Thanks for share


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