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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyIbKD50n24BcHxvDugjMwTNofK3WIWOx2oYLu1lpfOBKHW3rPw8wn3RdD_zTkl0KMCypyp88QVEayVhMBIZZ9GhM5G_mS9Qv9EGjfhAUQVbOM3tRQIvmDv5dO4m6MumMDBdi0w17vZY/s1600-h/090508+siva03.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyIbKD50n24BcHxvDugjMwTNofK3WIWOx2oYLu1lpfOBKHW3rPw8wn3RdD_zTkl0KMCypyp88QVEayVhMBIZZ9GhM5G_mS9Qv9EGjfhAUQVbOM3tRQIvmDv5dO4m6MumMDBdi0w17vZY/s400/090508+siva03.jpg" 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:



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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyIbKD50n24BcHxvDugjMwTNofK3WIWOx2oYLu1lpfOBKHW3rPw8wn3RdD_zTkl0KMCypyp88QVEayVhMBIZZ9GhM5G_mS9Qv9EGjfhAUQVbOM3tRQIvmDv5dO4m6MumMDBdi0w17vZY/s1600-h/090508+siva03.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyIbKD50n24BcHxvDugjMwTNofK3WIWOx2oYLu1lpfOBKHW3rPw8wn3RdD_zTkl0KMCypyp88QVEayVhMBIZZ9GhM5G_mS9Qv9EGjfhAUQVbOM3tRQIvmDv5dO4m6MumMDBdi0w17vZY/s400/090508+siva03.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5333720398637462818" /></a>
-->