[ARCHIVED] Add a hyperlink to an image

[kfinklestein]

I am trying to add a hyperlink to an image that I have inserted in a page.

I am using the Enhanced Content Editor and when I click on the image and then on the link symbol I only have the option to link Text 

If I click the Options tab that appears when the image is clicked all I get is this 

I know that I am missing something, but I cannot figure out what it is. I want my students to be able to click an image and have it take them to a web page. 

[James · Accepted solution]

 @kfinklestein  

You cannot apply a link to an image directly. This is why there is no link when you get the properties of the image.

What happens is that you have an image inside (img element) inside an anchor (a) element. The anchor element allows the href attribute, which is what makes it a link.

When the link wraps an image, you don't use link text, you just supply the link (href). By default, Canvas pre-fills the link with the location of the file. You should change the Link to be where you want the link to go. 

You should also make sure that you supply a useful alt attribute on the image so that something helpful shows up when people mouse over it.

The workflow is

1. embed image and supply alt attribute.
2. select image
3. apply link and change link address.

In the New Rich Content Editor, I'm seeing different behavior today than a couple of weeks ago so I do not know if this is the permanent behavior or not.

• If you click on the image that is not wrapped inside the anchor, the single Options is for the image.

• If you click on the image that is wrapped inside the anchor element and has a link, then there are two Options. For me, the left one is for the image and the right one is for the link.

• If you click in the whitespace immediately to the left or right of the image so that that the image is not selected but you're inside the link, then the single Options is for the link.

[kfinklestein]

Ahhhh! That did it! Had to play with the HTML, but that was fun!

Thank you!

[MatthewBeaton]

Hi,

First time user of Canvas - just getting my head around how it all works! I had the same question but unfortunately am not as technically capable as the previous person asking the question and didn't really understand how to use the solution! If there is anyone who can simplify how to add a hyperlink to an image in Canvas that would be greatly appreciated (or even a step by step guide if it's more complicated as I can follow those!).

Thanks in advance,

Matt

[Chris_Hofer]

Hi Matt...

Here is what you can do to add a hyperlink to an image:

1. Add your image to your content page in your course.
   • How do I upload and embed an image in the Rich Con... - Instructure Community (canvaslms.com) -- Use this option if you have never uploaded your image to your course yet.
   • How do I embed images from Canvas into the Rich Co... - Instructure Community (canvaslms.com) -- Use this option if you have already uploaded your image to your course "Files".
2. Click on your image to highlight it.  Then, depending on where you want to link to, follow one of these Guides (the examples show text being linked, but it it should also work for images):
   • How do I create hyperlinks to external URLs in the... - Instructure Community (canvaslms.com) -- Use this option if you want to link to an external website such as Google, Yahoo, CNN, Fox News, etc.
     • While your image is highlighted, you can also press Ctrl+K on your keyboard, and that will open up an "Insert Link" box where you can type in an external URL of where you want your students to go.
   • Use either of these two options if you want to link to content pages or files that already exist in your course:
     • How do I create hyperlinks to course or group cont... - Instructure Community (canvaslms.com)
     • How do I create hyperlinks to course, group, and u... - Instructure Community (canvaslms.com)

This video tutorial will also show you how to add links to your course: Rich Content Editor (All Users) - Instructure Community (canvaslms.com)

I hope this will be of help to you.  Sing out if you have any questions...thanks!

[MatthewBeaton]

Thank you so much for the information - I haven't had a chance to put it in to action but will certainly be in touch either way!