How can I make images clickable links?

Learn how to hyperlink your images to make them clickable links.

Nathan Connors avatar
Written by Nathan Connors
Updated over a week ago

Making your images clickable can add extra functionality to your projects or pages in EnagagementHQ. By doing this you will be able to direct your community to extra pieces of information to help inform them about your project goals.

There are two main ways to make images clickable in EnagagementHQ. 

  1. Use the text editor and the insert image icon.

  2. Use HTML Code in in the code view 

Deciding on which option to choose will depend on where you are trying to make your images clickable. For the best part however, there are very few differences between the two methods, except one requires you to understand basic HTML syntax and the other simply generates it for you.

Using the Text editor

In order to use the text editor to make your images clickable you need to do the following;

  • Click in the description area of your project page

  • Use the image icon to insert your image

  • Click on the image, and in the options, click on 'Insert link'.

  • Add the URL of where you would like the image to link to and choose the option to open in a new tab if required.

Using HTML Code

Adding HTML code to your projects is another way to make images clickable. In order to do this you will need to understand basic syntax. You can use HTML anywhere you can switch to code view including;

Before you can insert a clickable image using HTML you will need to ensure that your image is already available online as you will need to copy the image URL. This can be either in your photo gallery or an external site. If it is in the photo gallery, please refer to this article on how to obtain the correct image location.

To add a clickable image using HTML you can use the following code:

<a href="insert destination URL here"><img src="insert image location here" title="insert title" alt="insert description here"></a>

Replace the text in the quotation marks as below:

  • insert destination URL here: Replace this with the actual link, where you want to direct your visitors to when they click on the image.

  • insert image location here: Replace this with the location of the image you want to make clickable (hence ‘img src’. src stands for source). 

  • insert title: this is for accessibility - for e.g. people who use screen readers, hence we recommend as good practice to give the image a title.

  • insert description here: Replace this with an alternative description. This is also important for accessibility reasons as above.

Copy and paste this code, after clicking on the <> icon in the editor. 

Please find details of the various file types that are compatible with EnagagementHQ here.

NOTE - You also have the option of using a custom widget to create clickable images as described in detail in the article Using a custom widget to display clickable images.

Contact our support team if you need any further assistance via chat or email

Did this answer your question?