Monday, August 24, 2009

Demonstration: Using Blogger to host images



HTML code to display uploaded image:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSq1r1RDDi5L4EIAaBE79xeUJhlZshsGiHEIqFFYW0e0vJF8TUuOa84gDXyjqt85WYINQQ624_tHfpEN-uUO16wXNHeJYXfiTtAF7UtWCM17VrJN6ksmvfvANPWDqUkkSEeM0Uw/s1600-h/music+resized.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 296px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSq1r1RDDi5L4EIAaBE79xeUJhlZshsGiHEIqFFYW0e0vJF8TUuOa84gDXyjqt85WYINQQ624_tHfpEN-uUO16wXNHeJYXfiTtAF7UtWCM17VrJN6ksmvfvANPWDqUkkSEeM0Uw/s400/music+resized.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5369413094705735826" /></a>


Attempt to display image using first URL (red) from HTML code:



Result: failed.

Attempt to display image using second URL (blue) from HTML code:



Result: success. Image same size as that which is displayed by original code when first uploaded via Blogger photo upload icon.

Attempt to display image using URL of page displaying enlarged image resulting from clicking on original image:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSq1r1RDDi5L4EIAaBE79xeUJhlZshsGiHEIqFFYW0e0vJF8TUuOa84gDXyjqt85WYINQQ624_tHfpEN-uUO16wXNHeJYXfiTtAF7UtWCM17VrJN6ksmvfvANPWDqUkkSEeM0Uw/s1600-h/music+resized.jpg




result: failed

Attempt to display using URL from page source:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSq1r1RDDi5L4EIAaBE79xeUJhlZshsGiHEIqFFYW0e0vJF8TUuOa84gDXyjqt85WYINQQ624_tHfpEN-uUO16wXNHeJYXfiTtAF7UtWCM17VrJN6ksmvfvANPWDqUkkSEeM0Uw/s1600/music+resized.jpg




Result: large image displayed.