How to create a clickable image

clickimagepic

Usage in three ways:

  • You want an image on one of your pages that followers can click on
  • You want an image widget
  • You want to use a text widget to create a clickable image

Image upload
The first option let you do that easily when you upload the image. Through the media feature in your dashboard, when you upload an image, you can set your image such that it will link to a certain other page. Look for:

ATTACHMENT DISPLAY SETTINGS

See link to and choose custom url to implement your link (url).

Image widget
The second option is in the appearance and then widgets area of your dashboard. You just drag an image widget to the available areas to place a widget, and where you want it to show up on your site, and fill out the fields. See image what goes where:

image widget

Text widget
If you for some reason don’t want to use the image widget, but need a text widget to put all your items for the site bar, then you need html coding. That’s easier than it may sound.

The following code’s needed to edit. If you do that in the proper manner, you’ll have a clickable image after.

The code is based on three elements. The ‘a href’ tag, an “img id” tag and the “src” tag, in this order.

Here under you see an example of one of the image html codes in the text widget I use.
<a href=”https://mirjampenning.wordpress.com/2014/04/29/challenge&#8221″ target=”_blank”><img id=”acpic.png” class=”aligncenter” src=”https://mirjampenning.files.wordpress.com/2014/05/acpic.png&#8221″ alt=”” width=”273″ height=”65″ align=”BOTTOM” border=”0″ /></a>

Explanation of this html code
<a href=”here goes the url where the image must lead to when clicked on”><img id=”name of the image” src=”the file url of the image” alt=”” /></a>

Where to find the image file url? Where to find the name of the image? See example of image widget above, where I explain that.

What about target in the coding? If you want the url to open in a new window, you use target. It’s always target=”_blank” and it always is in the a href tag, like my example.

What about class? The class defines if your image will be left placed, centered or right placed. You always have three options: Alignleft, aligncenter, alignright.

What about alt? Don’t fill in anything there. Let it stay as in the example: alt=””

What about width and height? That will be the size of your image. If you don’t use that in your coding, then the image shown will have the size of the original uploaded image.

Advertisements

Author of (based on) True Crime and articles based on injustices.

Tagged with:
Posted in Other Knowledge
3 comments on “How to create a clickable image
  1. […] In a text widget, that has to be done manually. I promised Charlene to do a post about how to. For this occasion, I’ve written a three-way explanation on my Mirjam Penning website: How to create a clickable image […]

  2. Peggi Tustan says:

    This is nicely written in a way that’s easy to understand, Mirjam. Thanks!

    • How nice of you to say.
      I only forgot to mention this is based on the WordPress system for the first two options.
      The third can for sure be used anywhere on other blog systems.

Express your opinion

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: