You are here

Adding a Linked Image

Back to Wiki

If you would like to add an image to your page and would like it linked to itself (to show a large version of it) or to another page, whether internal or external, you can follow the instuctions below.

Upload the File

  1. Please your cursor in the body area where you want the image to appear.
  2. Click the "Image" button on the wysiwyg (top-middle row of buttons).
  3. Click "Browse Server" in the popup and click the "Upload" button at the top-left of that popup.
  4. Click "Choose File", find your file, and click open. Your image will begin uploading. Once uploaded, you will see it pop in on the right side of the screen.
  5. Make sure it is selected and choose "Insert File" from the top. The popup will disappear (going back to the first popup) and the URL field will be filled in with the new file.

Add the link to the image

Linking to another page

  1. Make sure that the Alternative Text field is filled in. This should be a short description of the image; a few words or short sentence, typically relevant to the context in which you are placing the image.
  2. Next, determine the url of the destination page in which you want the link to go. Its best to copy this URL to the clipboard (CTRL+C or right-click copy option)
  3. Click the "link" tab and paste the url into the Link tab's URL field.
  4. If you would like the link to open in a new tab/window when clicked, select the "Target" dropdown and choose "New Window".

Linking to the source image

Typically this process is used so that the end user can click the image to see a full-sized version of it.

  1. Make sure that the Alternative Text field is filled in. This should be a short description of the image; a few words or short sentence, typically relevant to the context in which you are placing the image.
  2. Next, highlight and copy all the text in the URL field.
  3. Click the "link" tab and paste the text into the Link tab's URL field.
  4. If you would like the link to open in a new tab/window when clicked, select the "Target" dropdown and choose "New Window".

Making the link accessible

  1. Next click on the Advanced tab and add into the Advisory Title field a description of where the link goes.
    Normally with links, the linked text provides this description but with an image there is no way a screen reader provide this to the user. So this field must be filled in.
    Keep in mind, the Alternative Text is a description of what the image is, the Advisory Title is a description of where the link goes.
  2. Click OK to close the popup. Your image should now show in the WYSIWYG and should be accessible by assistive technologies.