How Do You Add a Link to an Image in a Blog Post?

By John R. Aberle | Small Business Management

Sep 26

A dear friend of mine just wrote asking for a refresher on adding a link to an image in a blog post. “Ann” is an incredible blogger. I was always amazed at the pace she kept until her health took a turn for the worst. Her battle with her illness took all of her energy for several months. Now that she is ready to return to blogging, Ann realized that she’d forgotten how to link to another site to a picture or graphic in her post.

Screen capture of "12 Ways to Simplify Your Content Marketing by Repurposing," the blog post that provided image for How Do You Add a Link to an Image in a Blog Post?”

While I’m honored that she asked me for a refresher, I realized that in my posts for my content marketing client, MaxLeadPro, and a lot of the things I’ve been posting to social media, I’ve talked about repurposing as well as using images. In fact, my last blog post was “12 Ways to Simplify Your Content Marketing by Repurposing.” Many of the screen shots here come from that article.

While this instructional post on “link to an image in a blog post” started out being for Ann, you too probably don’t create blog posts with linked images daily.

Because you might not know how to do add an image into a blog post either these instructions will begin there. They do, however, assume you know how to add a new post to your blog.

Two Easy Ways to Add a Link to A Picture, Graphic or Screen Capture

These instructions and screen captures will show you two ways to add a link to an image in a WordPress blog. There is at least one other way to do it which requires knowing enough to be comfortable editing your image with HTML in the Text tab on your blog post or page. These steps are easier.

Step-by-Step Instructions for Adding a Link to an Image

1.  Add Media to WordPress Post

This step takes place when you are adding your post and need to insert an image (picture, graphic, or screen capture primarily).

Screen capture of Add Media button to WordPress post

2.  Insert Media screen in WordPress blog – Media Library tab

This means that you clicked on the Add Media button and now have a choice of taking an image from your Media Library where you previously loaded it (this is the default tab when you choose to use that button) or of uploading a new image.

Screen capture of Media Library tab on Insert Media screen in WordPress blog

 

3.  Insert Media screen in WordPress blog – Upload Files tab

This example assumes you are uploading a new image. If you choose and existing image from the Library, you can still follow the steps for adding a URL (address on the Internet where you want people to go when they click on your image). However, you may have already put a custom URL on the existing image when you used it in another post. If so, then load a new copy of the image with a slightly different name, e.g. by adding a “-1” or “copy” to the name before uploading.

Screen capture of Upload Files tab on Insert Media screen in WordPress blog

 

4.  Choosing image from computer to upload

In this step, you choose an image from your computer’s hard drive. Some people find it easiest to create a folder on their desktop to put the images they intend to upload so that they don’t have to go through multiple layers of file folders to find the right images, which are generally among lots of other ones in that folder.

Screen capture of choosing image from computer to upload into Media Library

 

 

5.  Dropping file to upload into Insert Media screen in WordPress blog

The newer versions of WordPress make it so easy to upload a new picture or graphic because all you have to do is drag it from your computer and drop it on this screen. (This upload process makes a copy so the original remains on your computer.)

Screen capture of dropping file to upload into Insert Media screen in WordPress blog

 

6.  New image uploaded into Insert Media screen in WordPress blog

Once you drag and drop a new image to upload it, WordPress puts it into your Media Library with a check mark to indicate the one you are working on.

Screen capture of new image uploaded into Insert Media screen in WordPress blog

 

7.  Adding “Alt Text” to new image uploaded into Insert Media screen in WordPress blog

“Alt Text” serves two purposes

  • Anyone who has graphics turned off so as to load sites faster will be able to read the alt text and know what image you had placed in your article.
  • Search engines can read it too, which means they will know what you said your image is. This helps them prioritize your post for searchers.

 

Screen capture of adding “Alt Text” to new image’ Attachment Details on Insert Media screen in WordPress blog

8.  Attachment Display Settings for image uploaded in Media Library in WordPress blog

This is the first way to insert a link in an image in your blog post. The default on a new image will be “Media File” which is the link to this image in your Media Library. People who don’t know the value of custom links or who don’t want to take the effort to use a custom link will leave this default setting. When you click on an image in an online article and it takes you to just the image, the writer left “Media File” for this “Link To” instruction.

Screen capture of Attachment Display Settings for image uploaded in Media Library in WordPress blog

 

9.  Adding Custom URL to image in Media Library in WordPress blog

By choosing “Custom URL” instead of “Media File,” you can add a link to your image, so as, for instance, to take people who click on the image to an affiliate product you want to sell that is related to that image or to take them to your opt-in page on your site or anywhere else you want them to go to, like another article you wrote on that topic.

Be sure to click on the blue button at the bottom right side of the screen to “Insert into post.”

Screen capture of adding Custom URL to image in Media Library in WordPress blog

 

10. Editing Image already added to blog post

This step is the second way to add a link to your image in a post. In this instance, you already have an image in an existing post or want to do your editing of the image after you insert it into the article.

  • Click on the existing image.
  • In the upper left corner of the image now appear two icons: a pencil to edit the image and a “X” to delete it.
  • Click on the pencil
Screen capture of editing Image already added to “How Do You Add a Link to an Image in a Blog Post?”

11. Adding Custom URL to image in blog post

You will now have a screen open to edit “Image Details.” This should look familiar from the earlier steps where you edited an image in your Media Library.

Screen capture of adding Custom URL to image of “Thank You for the Abundance in My Life” post used in “12 Ways to Simplify Your Content Marketing by Repurposing”

 

Notice the “Link To” has a dropdown box.

Select “Custom URL” to insert the URL you want to add to that image.

12. Adding link for Custom URL to image in blog post

See Step 9 above for some of the ways to use this Custom URL capability to monetize your blog post’s images or to otherwise serve your readers. This is where you add that link.

Screen capture of adding link for Custom URL to image of “Thank You for the Abundance in My Life” post used in “12 Ways to Simplify Your Content Marketing by Repurposing”

 

13. Editing Advanced Options in image within blog post

This is the way the Image Detail screen will normally show, i.e. Advanced Options will be closed. Click on the down arrow to see your choices.

Screen capture of editing Advanced Options in image within blog post, “How Do You Add a Link to an Image in a Blog Post?”

 

14. Choosing “Open link in a new window/tab” for image already in blog post

For the average blogger, the only thing important is Advanced Options is the check box to “Open link a new window/tab.” This feature gives you the ability to choose whether that link opens in the same window as your post or in a new window/tab.

The following suggestions might improve your ability to increase their time on your site, which is one of the things at least Google uses to evaluate how valuable your content is.

  •  Keep them in the same window if you are sending them to another page or post on your site, e.g. your invitation to opt into your mailing list or community. (leave the box unchecked)
  • Use another tab or window for affiliate products, 3rd party reference sites and anything else that might distract your readers from returning to your site and this post. (check the box)
Screen capture of choosing “Open link in a new window/tab” in image within blog post, “How Do You Add a Link to an Image in a Blog Post?”

 

15. Adding Alternative Text to image already in blog post

You may have noticed the Caption and Alternative Text boxes while working on “Link To” or the Advanced Option. This is the second time you have a change to add them. The Alternative Text in Step 7, “Adding ‘Alt Text’ to new image uploaded” above.

Often you may find that your images are cleaner and simpler without a caption showing up below them. However, there are at least three times when you might want to include information in the Caption box:

  • You need to tell people what they are looking at because the image doesn’t explain.
  • You need to give credit to the source of the image.
  • You need to tell the viewer who the people are in the picture.
Screen capture of adding Alternative Text to image within blog post, “How Do You Add a Link to an Image in a Blog Post?”

 

16. Image as it appears in blog post “How Do You Add a Link to an Image in a Blog Post?”

This is the image of the “Thank You for the Abundance in My Life” screen capture used in “12 Ways to Simplify Your Content Marketing by Repurposing” post. The “Custom Link” takes readers to the original post on Aberle Enterprises’ blog.

Screen capture of image as it appears within blog post, “How Do You Add a Link to an Image in a Blog Post?”

 

17. “Thank You for the Abundance in My Life” blog post

This screen capture is of the actual “Thank You for the Abundance in My Life” post that the link took people to.

Screen capture of article “Thank You for the Abundance in My Life” reached by clicking link in “How Do You Add a Link to an Image in a Blog Post?”

 

Building your profits through strong relationships,

John

John R. Aberle,

Aberle Enterprises

 

P.S. To get more insights into content marketing and tips to make your blogging and social media easier and more fun, follow John Aberle  on Google+

 

Share and Enjoy:
  • Print
  • Facebook
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • email
  • LinkedIn
  • PDF
  • RSS
  • del.icio.us
  • Digg
  • StumbleUpon
  • Technorati
  • Tumblr
Follow

About the Author

I have a strong love for small businesses, especially brick and mortar companies. After an 18-year career in sales and marketing, I started my own service company, which I grew in both sales and profits for the first five years. In my sixth year, the bottom dropped out of the printer market such that it made more sense to sell my assets and return to Southern California. There I went to work for an international small business consulting company. I spent over three years on the road with them helping small businesses to become more profitable and better managed. I then started my own company specializing in sales and marketing consulting, coaching and training. My emphasis is on heart-centered, relationship selling that empowers prospects to make their own choices.