Wednesday, November 24, 2010

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  Add some marker text immediately before the picture - you will use this to locate the HTML for the picture among all the other HTML used to make up your post.

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

Find the marker  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.   

The code will look 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/AVvXsEj2LtquAu0N7qic1zUpCK96s4pl6BX53FUcpp3jU_CjVgnHgW9eMjaRL-T7skWYOQMfWRXy1_6ODFpO6kdWMt-mo_EcVql4CPf-diYx24uxYWaML3JPQ19vZQq8IyIye1QngsnyYYClygnq/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LtquAu0N7qic1zUpCK96s4pl6BX53FUcpp3jU_CjVgnHgW9eMjaRL-T7skWYOQMfWRXy1_6ODFpO6kdWMt-mo_EcVql4CPf-diYx24uxYWaML3JPQ19vZQq8IyIye1QngsnyYYClygnq/"
height="235" 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"  
height="235" width="400"
/>

</a>
</div>

Note:  provided you've selected "Use <br /> tags" under Options > 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"  
height="235" width="400"
/>

</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

Using marker-text to find the code for things in your blog posts

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

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

2 comments:

  1. It doesn't work. The image is still clickable... and the point really is to render it "un- right clickable"....either way it doesn't work

    ReplyDelete