Wednesday, October 21, 2009

Images and the Blogger updated post editor


Previously with the old Blogger post editor, when you upload images, Blogger adds an alt="" tag for you to complete as seen in an example below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s1600-h/comments+blogger+tips+and+tricks.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_jizoPL28qCY/SD_AiGSnP8I/AAAAAAAABfk/F5OUlKXf57E/s400/comments+blogger+tips+and+tricks.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5206091386300350402" /></a>

Now with the updated post editor, you will only have the image upload icon in the COMPOSE mode and Blogger also inserts codes different from the above example to display the image (visible only in the Edit HTML mode) illustrated by the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s320/kimchi.jpg" vr="true" /></a>
</div>


The code which actually display the image is highlighted in green above. Although in this case, Blogger wasn't as considerate to add the alt tag for you, you can still add it in yourself together with the title tag if you wish like the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s1600-h/kimchi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s320/kimchi.jpg" vr="true" alt="Kimchi, Korea's signature dish" title="Kimchi" /></a>
</div>


Note: You can switch between the old post editor and the updated post editor by signing into Dashboard, SETTINGS > BASIC and near the bottom of the page, you will see this for your selection:

selecting Blogger post editor

Related posts:
Blogger updated post editor: Removing image border
New Blogger updated post editor - Birthday gift?

19 comments:

  1. I noticed the alt tag was missing too. By the way, is it okay to write the same thing for alt and title tags?

    ReplyDelete
  2. David, you may have brought up a relevant point, whether it is spammy to have duplicate alt and title attributes. I can't find something definite as there seems to be many opinions, but perhaps check the comments at these 2 - Using alt attributes smartly and same text for alt and title attributes and come back and let us know what is your conclusions.

    ReplyDelete
  3. Can you help... I'm a new blogger, new to the "ad" thing. What is a PR2+ ?

    Some how I was directed from Google to you.

    Thank you ;)

    Karen Bierley

    ReplyDelete
  4. "new to the "ad" thing"

    ad? advertisement?

    "What is a PR2+ ?"

    PR usually refers to Page Rank which is what Google search engine ranks webpages with PR ranging from 0 to 10, 10 being the highest. If your blog is relatively new and already ranked PR2, that is pretty good.

    ReplyDelete
  5. Hi Peter,

    I've been tried to add an expand-collapse script for the last two days on my blog. I use a scribe template from blogger and I'm trying to add the script located at this blog: http://www.meghalomania.com/expand-collapse-script-for-blogger-blogs/

    I've tried to put it in several places in the header /header but I kept getting errors. Finally I inserted it just before ]] /b:skin tags. I don't get any errors, but when I preview the blog you can see there's --> before the blogger bar.

    And I don't know where to insert the third part of the script - the author says I'm suppose to replace something but I can't find it in the template to replace it with. I know it's a lot, but do you help people with this kind of trouble?

    Thank you for your time!
    C. Green.

    ReplyDelete
  6. Expand-collapse script for Blogger blogs seem to be another version of the expandable post summary. When I find the time, perhaps I will test it.

    ReplyDelete
  7. Thank you very much Peter. If you ever find the time to test it, please let me know.

    Thank you so much for your help.

    ReplyDelete
  8. Hi Green,

    I just noticed 1 thing. That hack is for blogs with old classic Blogger template which do not have LAYOUT. Are you using a classic template for your blog?

    ReplyDelete
  9. Nope. I'm using the scribe template. It must be the newest one because I had to reset the whole thing yesterday when trying to insert the code went awry.

    Does it mean it won't work on the scribe template?

    ReplyDelete
  10. I see. I'll work on it after my midterms. Thanx for all the references. ttyl.

    ReplyDelete
  11. Peter, please can you help ?

    With the new Blogger, how can I remove borders from individual photo's ? I've tried adding the old bit of code (border-width:0px;) but it does nothing now.

    I also cannot put two pictures side by side, becuase the border on one goes half-way over the second picture.

    Help much appreciated !

    ReplyDelete
  12. Elise, refer to How to get rid of border which was written for the older post editor but still applicable. I tested that at testing updated post editor image upload.

    ReplyDelete
  13. Hello Peter

    Thanks for the info on new attributes for img tag

    Do you know the meaning of vr="true" attribute ?

    I also discover recently (november) some blogspot.com blog with yr="true" attribute

    Thanks to answer

    --

    http://viti-vino.blogspot.com

    --

    ReplyDelete
  14. Where did did you find this occurance of vr="true", in the template or in a blog post?

    ReplyDelete
  15. Hello Peter

    Thansk to answer, above in your example :

    [img border="0" src="http://2.bp.blogspot.com/_1354hN3vRng/St5dV5-SaFI/AAAAAAAAAP8/FxEq55ak_GQ/s320/kimchi.jpg" vr="true" alt="Kimchi, Korea's signature dish" title="Kimchi" /]

    ReplyDelete
  16. I'm using the scribe template. It must be the newest one because I had to reset the whole thing yesterday when trying to insert the code went awry.

    BUY OMAHA HOMES
    URL: http://bestomahahouses.com /

    ReplyDelete
  17. Thanks for the advice, worked a treat!

    ReplyDelete
  18. Thank you very much for the information! A couple of days ago I switched to the new blogger and I noticed the 'alt' was missing. Thanks to you I now know where to insert it ;)

    ReplyDelete

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