There are many locations where clickable images are a valuable tool, such as front page images, icons, photo galleries, image information, etc. There are multiple ways of going about this process. I will be discussing how to add clickable images to your content posts and pages and also how to add them to your widgets.
Before I explain further, be sure that your image file is either your original image or is royalty and copyright free. Some copyrighted images can be used with proper citations depending on the owner’s specifications. There is also plenty of public domain photography available for your use. Also make sure that your image file has a distinct name like Purple Flowers, instead of a default title like IMG_2345, before uploading it into the media library.
Posts and Pages
Create a new post or page or select one that you are already in the process of creating. Underneath the Post or Page Title, there is an Add Media button. This is where you will upload images to begin this process (when you upload an image into a post or page, the images will become linked to that specific post or page. This will make it easier to find for later use rather than just uploading it through the sidebar media button).
When you click the Add Media button above, you have two options. Either upload a new image file from your computer, or use an existing file that you have previously uploaded. When you select to upload a new file, click on the image(s) you wish to upload, then once they are done loading you can begin filling out the attachment details that appear to the right side of the uploader.
Before you can move on to making your image clickable, you must first give each image a Title, and an Alternate Text (this is required and used for screen readers, and must use complete sentences.) However, Captions and Descriptions are optional. Now to the fun part.
You can determine whether you would like to link to an external website or simply show a larger view of an image when clicked on. There are a few setting available when attaching an image file to a post or page. These include:
- Custom URL
- Attachment Page
- Media File
A custom URL allows you to link to a webpage or another destination. Simply copy and paste the URL into the designated area. This can be a helpful tool if you would like to link to additional information about the image file you have uploaded. Try clicking on the image to the right.
An Attachment Page and media file do roughly the same thing; they both present the media file in its full format. However, the attachment page setting shows the image on a page that is still in a WordPress theme. It includes the style, formatting, theme, blog titles, etc., so that people are still connected to your website when viewing the image in full. This feature also includes the ability to make comments and discussion. Click on the flower image to compare the settings of attachment page vs. media file.
The Media File selection simply displays the full image in a blank white or black page. This version is not displayed with any theme, style, or connection to your site. This is generally not the best format as you should keep your readers connected to your site. However, this view allows a distraction free, full view of the image.
When None is selected the uploaded image will have no link at all and cannot be clicked on to view the full size or take the user to a different destination. The below image is set to None.
Images in Widgets
In order to post an image file into a widget, you will need to first find the image URL from your media library. Find the image you want to display from your media library and click on it to view more information. You will need to copy and paste the image file URL into the image widget form that I explain below.
To find your widgets go to Appearance > Widgets. The widget you will need is aptly named Image. Add this widget to wherever you would like to display your graphic, image, or photo. You will then be presented with a form that looks like the image to the right. Now, paste the image URL you copied into the Image URL box. Additionally, be sure you fill out at least the Widget title, Alternate text, and image title. You can then adjust alignment and size or leave it blank.
Now, if you would like to have your widget image link to an external site, copy and paste that URL into the bottom box titled Link URL. It’s that simple. All that is left to do is save and preview your new clickable images!
Definitely a great idea to put this feature to use to help make your blog more fun and organized with clickable graphics, icons, and photos. Enjoy!