Link a photo in your post to a website

This article shows how to change a picture in your blog, so that when it is clicked, it opens another blog post, or even a completely different website.

First I described how to put a photo in a blog post.

By default, when a picture in your post is clicked, the file that is used to load the picture is opened, in a new window and in its original size. This can encourage readers steal photos that don’t belong to themso I also described how prevent photos on your blog from being “clickable”.

But sometimes you may want to set a picture so that clicking it opens a different post, or even a completely different website.

How to change where a picture is linked

Add the picture in your place in the usual way.

Note where in the post is your photo – you may want to put some temporary text-marker just sooner or later, thus making it easier to find.

Look at the HTML behind your post, choosing HTML view from the drop-down at the top left of the editor window

Find the code for your photo. It will be something like this:

 

notice the part in bold, i.e. the href=”http://blogger-hints-and-tips.blogspot.com/2011/11/CONTENTS”

Replace this with the URL you want your readers to go to when they click on the picture. For example, if you want to be taken to Google to do a search, the code would look like this:

www.google.com” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”> 

By default, clicking on the image, your visitor leads to the link that gives in the same window. But if you want opens in a new windowAlso add target=”_blank” to the code, like this:

target=”_blank” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”> 

Back to Mode of composition (so you don’t get confused next time you edit a post)

Delete it the markup text, if you used any.

Some more things to think about

Do your readers understand that they have to click on the picture?

Unless your image says “click on me,” some users won’t — and if they’re used to Blogger, they might just expect to see a larger version of your photo. So it might be a good idea to add a caption, or even some instructions in your blog tell them to click on the picture.

Even while editing the code, you can still like it add some alt-text to your picture link also, to make your blog more friendly for readers who use screen reading tools, and for search engines / SEO.

What you see

Sometimes in the past, when you linked a photo and then hovered over the picture in the post editor, you would see a double row of in-post editing options:

  • a row had the usual options to edit photos (which allows you to set the image size, alignment and caption)
  • a row had the usual options to edit links (with options to go, change and delete the link.

Today, while writing this post, I can only see a row of options in the hyperlinked image – so I need to edit the HTML again if I want to change or remove the link – there is no way to do it from the Compose. view

What your readers will see

When your readers look at a picture you’ve linked somewhere, it will look the same as any other picture. The only difference is when you actually click on the picture.

BB link code (forum):

Leave a Comment