On your EngagementHQ site, you can use the text editor or code view to turn images into links. Image links can be useful when adding call-to-actions to your project pages, but they have a few accessibility concerns.
Linked images become either Decorative or Functional and must have the appropriate alt text. Decorative images, such as the project cards on your homepage, are accompanied by a caption that explains what the link does and they do not require alt text. Functional images, such as button links, must have alt text describing what the link does.
You can add linked images into areas such as a custom widget, project description, or the homepage freestyle widget, and there are two ways to do it:
If you're using a linked image to encourage registration, please check out the built-in Signup Banner and Follow Project widgets. If you want to display images, we recommend using the Photos widget to insert an image gallery.
Use the text editor
This is the recommended option because it’s easier and requires no HTML knowledge.
Use the Insert Image function to place the image where you want it.
Select the image, and in the options menu, select the Insert Link icon.
Paste the URL in and check to Open in new tab, if necessary.
Add relevant Alternative Text.
Preview the project to ensure your link is functioning.
The example above is in a linked image in the project description.
Use HTML in Code View
You should have a basic understanding of HTML to use this function. Using HTML also requires the image to be hosted online. You’ll need to use the following code snippet:
<a href="insert destination URL here"><img src="insert image location here" title="insert title" alt="insert description here"></a>
Replace the quoted text with the following:
Insert destination URL here: the URL you want to link to
Insert image location here: the URL of the image you want to display
Insert title: the title of the image you use
Insert description here: the alt text for your image
This example is a linked image in a custom widget.
To add the code snippet in:
Once you have configured and copied your code snippet, go to the text editor of the area you want to place it.
Select < > to open Code View.
Paste the snippet where you want the image to be and select < > to close Code View. You won’t be able to save while Code View is open.
Save your changes.
Preview your project to ensure the image and link are displaying correctly, and please contact our support team via chat or email if you encounter any problems.