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.
Use the text editor and the insert image icon.
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;
Text editors
In survey header question types
Homepage freestyle widget
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 support@engagementhq.com