February 18, 2013

WordPress Image Tip – Linking Your Images

cylinder_siren_400_clr_10499Images in your WordPress content or in your sidebar are powerful attention-getters. Many times as blog readers, our eyes are drawn to the image first and can then encourage us to read the content.

If you could see a heatmap of your blog, most likely you would see hot areas around the images and click trackers also know that the images frequently get clicked on.

So how can you take advantage of these tendencies?

4 Outcomes When Someone Clicks Your Images

Outcome #1 is nothing. The image is not clickable and the person who clicks the image is disappointed.

Outcome #2 is that the image opens in the same window and essentially takes the reader away from your content. This is really worse than nothing happening.

Outcome #3 is that the image opens in a light box at full size. This can be very useful if you want to reduce the size of the image to look better with your content, yet want the reader to be able to enlarge it for better viewing. Charts, graphs, screenshots, and product images do well with this technique.

Outcome #4 is that the reader is linked to another web page either on your site or another site. This technique is helpful when you have a product to sell or you are reviewing someone else’s product as an affiliate.

How To Do #3 and #4

I’m skipping 1 and 2 for obvious reasons.

Open in a Light Box — You need two steps to have your images open in a light box. First you need to link your image to the Link to Image image file itself. When you upload the image, you have a choice to create a Link URL. Choose the image file by selecting Media File (see screenshot to right).

Next you need the lightbox capability either in your theme or in a plugin like Shadowbox JS.

If you click the image to the right, you’ll see that it opens to its full size.

Link to WebpageLink to a Webpage — This is very easy. Instead of linking the image to it’s own image file in the Link To box, you choose Custom URL and insert the URL of the page you want the reader to go to when they click the image.

If you already have an image in your post or page, simply click on the image to select it and then click the Hyperlink icon in the toolbar. There you can insert the URL. I also recommend having the click open in a new window.

If you click the image to the left, you’ll see that it opens a new window and takes you to one of my favorite stock photo sites called Big Stock Photo.

Sidebar Images

If you want to put an image in your sidebar, you’ll need to know some HTML but it’s not hard. Here are the steps:

  1. Upload the image into the Media Library or directly into a folder on your server. Be sure to copy the url of the image into a notepad for use later.
  2. Go to your widgets area and drag a Text Widget into the desired sidebar.
  3. The format of the HTML to type into the text widget is:

<a href=”http://yourdomain.com” target=”_blank”><img src=”http://yourdomain.com/locationofimage/imagefile.jpg” alt=”your alt text goes here” title=”your image title goes here” width=”125″ height=”125″ /></a>

Here’s what all that means:

  • The a href snippet is where you want the image to click to.
  • Target=”_blank” opens the click in a new window.
  • The img src= snippet is where the image is located.
  • The alt= is the text that will display if the picture doesn’t appear for some reason and is how the search engines index the image.
  • The title= will show up when a reader hovers over the image on most browsers.
  • The width and height is not necessary if the image is the exact size to fit the space. If it is too big, you can resize it with those parameters.
  • The </a> closes the code and is critical to make everything work.

Another place to find great images to use in your blog posts is Presenter Media. Just one small annual fee allows you to download all of their images and PowerPoint templates for an entire year. It’s an incredible value.

Christine Cobb

Christine Cobb

is a web technology consultant, a small business online marketing consultant and provides information for new bloggers and affiliate marketers.
Christine Cobb
  • Great post! I personally don’t link my post images unless it’s of a product mentioned in the post or if I want them to leave my blog and go somewhere else. Most of my images are stock so I don’t link them.

    So excited that you shared how to link images in the sidebar. A lot of people ask me for that. I’m off to share the post.

  • Jacqueline Fairbrass says:

    Great advice. Thank you. The coding stuff is way over my head, but the premise of linking images to something useful makes total sense…and that I can definitely start doing.

  • Shane Curtis says:

    Nice tips particularly the Sidebar Images.
    Thanks to the html code for that.

  • Nice tips. Specially “Open in a Light Box” is easy to implement and will give a better look to images and posts.

  • Pat Drummond says:

    Opening up in a lightbox style is very attractive, however, it gets very annoying if you try to pull it up on a smartphone. But while reading your post, I was thinking maybe there is an affiliate photo site that your images can link to and it can work as an additional revenue stream. Anyhow, just a thought. Thanks for the post.

    • Christine Cobb says:

      Hey Pat — I checked my blog on my iPhone which is controlled by the WP Touch plugin. Tapping on an image that is linked to its own file opens the image in the window or in a new window depending on the link target. I did however, link the top image (red siren) to Presenter Media where the image came from. 🙂

      • Pat Drummond says:

        Hi Christine, on a blackberry the light box doesn’t work very well. Maybe it is because i’m on a blackberry. Yes, I noticed now the Presenter Media. Great work!

  • Enstine Muki says:

    Hi Christine,
    This is the first time I’m reading a post like this and I must say I’m impressed with it. As a web developer, I know all these tips about dealing with images on web pages but reading them here makes me feel abit different.

    Thanks for sharing them

  • >