Making your images clickable can add extra functionality to your projects or pages in EHQ. 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 EHQ.
- Use the WYSIWYG editor and image upload tool
- 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 WYSIWYG
In order you use the WYSIWYG editor to make your images clickable you need to do the following;
- Open your project and manage project description.
- Use the image icon to insert your image
- Click on the image to reveal options and click on the link ico
- Add the URL of where you would like the image to link to and choose the option to open in a new tab if you require
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;
- WYSIWYG editors
- Custom widget
- In survey header question types
- Homepage freestyle widget
Before you can insert a clickable widget using HTML you will need to ensure that you image is already uploaded somewhere on the web 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 have a look at this guide on how to obtain the right image location.
To add a clickable image using HTML you can use the following code:
<a href="insert destination URL link here"><img src="insert image location here" title="insert title" alt="insert description here"></a>
ADDING CLICKABLE IMAGES TO CUSTOM WIDGETS
The standard width of the Custom Widget in EHQ is 450 pixels wide, but we recommend you load an image that is 700 pixels wide as this will accommodate the width of the image when it is upsized on a tablet view.
The following code specifies the width of the image at 700 pixels. You can always change this if you need to depending on your requirements.
<a href="insert destination URL link here"><img src="insert image location here" title="insert title" alt="insert description here" width="700px"></a>
Note: This code can also be used anywhere in your EHQ site that enables HTML code, which is generally across all the WYSIWYG editors in the site.
- Destination URL link - the page in which you want people to be directd to once they click the image
- Image location - the URL of where the image is stored
- Title - this is for accessibility - for e.g. people who use screen readers and is good practice to give the image a title
- Description - also for accessibility as above.