How do I add a hyperlink to a photo?

  • 1
  • Question
  • Updated 6 years ago
  • Answered
I would like to add a hyperlink to several photos on my home page that will navigate to other pages within the website. How do I do this?
Photo of Steven Hunter

Steven Hunter

  • 2 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Steven,

There are three ways that can do this:
Picture links

You can also use the text widget and add an image via the inbuilt image widget. This is very similar to the above.

Thirdly by using HTML via the HTML widget. The syntax for this:
<a href="http://site address/pagename.php"><img src="location/image-name.file-type" alt="description" width="x" height="y">

The file type can be jpg, png or gif. The height and width are in pixels. The advantage of specifying the height and width is that it will reserve the space exactly for the images to load without shuffling your page around before it is completed.

location can be either internal or external. generally internally stored images are stored somewhere in the File manager and if in the root of this directory can be addressed as resources eg: resources/image-name.jpg. {optional folders can be utilised by placing the folder name after resources}. If you store the image externally then you will need to insert the complete address.
Photo of falkirks

falkirks

  • 12 Posts
  • 4 Reply Likes
Don't you need to close the a tag :)
Very nice answer though
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes you do. Apologies!

<a href="http://site address/pagename.php"><img src="location/image-name.file-type" alt="description" width="x" height="y"></a>
Photo of Steven Hunter

Steven Hunter

  • 2 Posts
  • 0 Reply Likes
Thank you! How do I set images next to one another horizontally? When I add widgets, they stack vertically.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The easiest way is to use the column divider widget. Drag one onto your page then drag another into one of the columns of the existing. This will now give you three column spaces. You may drag a third column divider into the other side of column divider widget number 1 and this gives you an array of four spaces horizontally aligned. You may need to tweak the divider lines by dragging the central dividers left or right.

The spaces provided within the array are able to be used to place image widgets, text widgets or HTML widgets. I think as you play with it you will feel the process intuitively.