Tuesday, February 26, 2013

Gotcha of the day: Tweaking Blogger's Image Display Size

I'm loving the new image upload capability on Blogger. The multi-select capability to upload a bunch of photos at once is huge. And while I'm a bit skeptical about selling my soul to Google+, the ability to have super easy access to any of my cell phone photos is also amazing. The only thing I found missing is that I no longer get to choose what size my photos will be displayed at. At least I don't get easy access to this while editing in HTML mode.

Whenever I upload photos, the following code is dropped on the page:

<a href="http://2.bp.blogspot.com/-cfaep32rQ4c/USyR3EwMhTI/AAAAAAAARCQ/QvMUBqC7tzI/s1600/20130225_164926.jpg"
 imageanchor="1" ><img border="0" 
 src="http://2.bp.blogspot.com/-cfaep32rQ4c/USyR3EwMhTI/AAAAAAAARCQ/QvMUBqC7tzI/s320/20130225_164926.jpg"
/></a>

The default size to display images is 320 pixels wide. Turns out, I can set this to any arbitrary value by tweaking the HTML code a bit. I just need to change the img source URL component s320 to a new value. For example, I can take the above URL:

 http://2.bp.blogspot.com/../s320/20130225_164926.jpg

And change it to: s580, and now the page will show a 580 pixel image:

 http://2.bp.blogspot.com/../s580/20130225_164926.jpg

See this example live:

No comments:

Post a Comment