Stopping pictures on your blog from being "clickable"

This article is about how to stop people who read your blog from clicking on a picture and seeing a full-size copy of it.

Currently, if you put a picture into a blog post using the Picture toolbar item, and someone reading your blog clicks on that picture, then the person sees a full-size copy of the picture.   There is no universal setting that you can apply to stop this happening, or even an easy way to stop it for specific pictures.

But you can stop it for each picture in a post by editing the HTML that is behind the post and removing the href part of the picture statement.   If you're not sure what that means, read on.

Making a picture "unclickable"

1  Put the picture into your post in the usual way.

2  Find some unique text that is immediately before (or after) the picture - you will use this to locate the HTML for the picture among all the other HTML used to make up your post.
Sometimes, I put "XXX" or some other marker text (ie text that isn't used anywhere else in the post) just before it  (and take it out again afterwards too!).

3  Click HTML - it's a tab at the top corner of the Post Editor window.

4  Find the unique text (use your browser's Find tool, eg Edit > Find in Firefox)  

5  Then find the HTML-code for the picture which will be just before (or after) that.    It looks something like this (some settings may be different in yours):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfecHPsGfszoxGJS4hFS8MtDJyLIfLUsdnB_wOOxuyHrUIpsEvt44JZmDX0lQ_taPis8JSbEngcJX78ib5l0Z2RyJB-KOWvvTL0V0QgfOZy2lRD4ffA_VkOLf1ohlSFab53zOoBZ9eH7bv/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfecHPsGfszoxGJS4hFS8MtDJyLIfLUsdnB_wOOxuyHrUIpsEvt44JZmDX0lQ_taPis8JSbEngcJX78ib5l0Z2RyJB-KOWvvTL0V0QgfOZy2lRD4ffA_VkOLf1ohlSFab53zOoBZ9eH7bv/" width="400" /></a></div>

That looks hard to read.   But if you break it down, it becomes something like:

<div class="separator" style="clear: both; text-align: center;">

<a

href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>

<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"
/>

</a></div>

NB  provided you've selected "Use <br /> tags" under Edit HTML Line Breaks, then you can add extra new-lines, to make the code easier to read.

6  To make the final picture unable to be clicked, you need to remove the part of the HTML code that says:   

href="THE URL THAT THE USER IS TAKEN TO IF THEY CLICK ON THE PICTURE"

So that the eventual code for the picture looks like:

<a

imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
>

<img
border="0"
src="THE URL WHERE THE SOURCE PICTURE IS READ FROM"
/>

</a>

Job Done!

At this point, you might Publish your post, or you might want to edit it some more - for example by adding alt-text or a title to the pictures, or by showing your pictures in a slideshow.

Either way, I recommend switching back to Compose mode now (using the Compose button at the top right of the editor), so that you don't get confused the next time you edit a post.

---

Related Articles:

Putting a picture into a blog post

Telling Google and visibly-impaired people about the pictures in your blog

Tools for applying copyright protection to your blog

Hosting pictures outside of Google/Picasa

Creating a button that links to your blog