How to post big photos in blogger (and other tweaks)

In a comment on my latest post, Avus said, “I keep meaning to ask, Pete. How do you manage to include the large images on your blog? Blogger only allows me quite small ones which need clicking on to enlarge.”


Earlier, Dr FTSE had pointed out how to get rid of the redundant clickability for large photos (clicking on them just opened up a page with nothing but the same photo at the same size) and how to change the mouse pointer from a hand to an arrow. Unfortunately, the new style of editing form for blogger posts wouldn’t accept his latter suggestion; however, there’s a simpler way to:
1. include large photos in your blog;
2. make them non-clickable and prevent the cursor from changing to a hand pointer instead of an arrow pointer when you move it over the photo.

1. How to display a photo at its original size in a Blogger post

First — and this is crucial — you need to resize your photo to exactly the size at which you want it to appear in your blog. If you make it too large, you’ll screw up your blog’s formatting; too small is less serious, but why not get it right? The easiest way, if you use Firefox, is to install the addon MeasureIt and use it to check the width of the text on your blog. Remember to allow a few pixels on each side for the photo’s borders, too. The proper and accurate way is to inspect the html for your blog’s template, but if you can interpret that, you won’t need to read this post.

Next, after uploading your photo into the post editing form, click on the “HTML” tab (circled in red on the figure above) and look for the block of code that begins with “<img” and ends with “/>”. It’ll look something like this:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPo6Onx7f6b-eceRBFgryEqjXp7ocxjcCN9YLkOcXsXMSQQCbqLKzkspgPR7EAaCJx8uxY26HB_Ud6RWNST551f_YkIFz9GfOPplrdF4Roi5s81mQ33UXlRWY06byDj_r2ffi/s400/Kea_8961.jpg"/>

Now look for the filename, and immediately before it you’ll see some code that looks like “s400/”. Depending on what size you've chosen when Blogger asks you to pick small, medium, large, or x-large, this code will appear as s200/, s320/, s400/, or s640/ (you can probably guess which code refers to which size), but it doesn’t matter. I’ve marked it in red. Now, simply delete it (i.e. the code in red):

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPo6Onx7f6b-eceRBFgryEqjXp7ocxjcCN9YLkOcXsXMSQQCbqLKzkspgPR7EAaCJx8uxY26HB_Ud6RWNST551f_YkIFz9GfOPplrdF4Roi5s81mQ33UXlRWY06byDj_r2ffi/s400/Kea_8961.jpg"/>

Your photo will now appear at its original size.

2. How to remove the link (URL) from a photo

When you’ve tweaked the html so your photo appears at its actual size, it’s pointless to keep it clickable. Here’s how to get rid of the link and keep the cursor as an arrow, not a hand.
 
After uploading your photo, click on the “HTML” tab and look for the block of code that looks similar to this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPo6Onx7f6b-eceRBFgryEqjXp7ocxjcCN9YLkOcXsXMSQQCbqLKzkspgPR7EAaCJx8uxY26HB_Ud6RWNST551f_YkIFz9GfOPplrdF4Roi5s81mQ33UXlRWY06byDj_r2ffi/s1600-h/Kea_8961.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPo6Onx7f6b-eceRBFgryEqjXp7ocxjcCN9YLkOcXsXMSQQCbqLKzkspgPR7EAaCJx8uxY26HB_Ud6RWNST551f_YkIFz9GfOPplrdF4Roi5s81mQ33UXlRWY06byDj_r2ffi/"/></a>

Delete the sections in red (i.e. the bit beginning with “<a href” and ending immediately before “<img”, and the “</a>” at the end):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPo6Onx7f6b-eceRBFgryEqjXp7ocxjcCN9YLkOcXsXMSQQCbqLKzkspgPR7EAaCJx8uxY26HB_Ud6RWNST551f_YkIFz9GfOPplrdF4Roi5s81mQ33UXlRWY06byDj_r2ffi/s1600-h/Kea_8961.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPo6Onx7f6b-eceRBFgryEqjXp7ocxjcCN9YLkOcXsXMSQQCbqLKzkspgPR7EAaCJx8uxY26HB_Ud6RWNST551f_YkIFz9GfOPplrdF4Roi5s81mQ33UXlRWY06byDj_r2ffi/"/></a>

That's it. When you hover the mouse over the photo, the pointer will appear as an arrow rather than changing to a hand, and clicking will do nothing.

You can see the result of each of these changes on the post Kea, Darran mountains, on my photoblog, The Ruins of the Moment.

---

Note: Ignore the links in the sections of code I've listed — Blogger won't let me convert them to plain text. A bit beyond my technical ability, I'm afraid. 


Photos and original text © 2009 Pete McGregor