07 December 2009

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 suThe code (s400/) for the size has already been removed from this exampleggestion; 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

11 comments:

Avus said...

Pete - I am very much obliged to you! Thank you for taking the time to explain this so clearly. I shall now start to play!

pohanginapete said...

You're welcome, Avus. Have fun!

Lydia said...

Pete, are you a teacher? This is such an excellent tutorial.

I feel guilty that I'm behind in reading the real stuff I come here for and I intend to remedy that!

pohanginapete said...

Lydia, thanks. Glad you found it comprehensible — I found it difficult to prepare!

I recently completed a couple of months' work tutoring a university course in science communication and I've run workshops and science labs, but I'm not sure I'd call myself a teacher. However, when I try to explain something, I try hard to make it as clear as I can. Sometimes I succeed. :^)

Maureen said...

Hey! Merry Christmas Pete! Best wishes for 2010....

Don't Feed The Pixies said...

merry xmas pete

pohanginapete said...

Thanks Maureen, and a very merry Christmas to you also :^)

Thanks pixie-man. Hope you're keeping warm and cosy over there :^)

Avus said...

It's a wet day, Pete and I am sitting here experimenting with the images stuff you have so elegantly explained.
Only trouble is my blog's page is 19cm wide and yours is 27cm - how do you manage the luxury of that, please?
(If you don't want to clutter up your comments page my email address is avus@hotmail.com)

pohanginapete said...

Avus, you have email. For anyone else interested in playing around with blogger templates, The Blog Doctor is an excellent resource. Start with the page, Tips to customize blogger template. The site's chaos — an utter eyesore; one of the messiest I've seen — but the information's great.

Avus said...

Pete, my grateful thanks for your generous time and advice regarding posting larger images on my blog.
Having followed your very clear instructions I now have a result.

pohanginapete said...

You're welcome, Avus. Your modifications to your blog look great — it's great to get a good look at your photos (love the latest one: it has that wonderful sense of space and freedom).