How do I embed a linked web image in the Rich-Text Editor?

You can embed an image from an external web page in the Rich-Text Editor.

Note: Your image may be located on a non-secure server.  A non-secure server has http:// in the link.  (A secure server has https:// in the link).  If your image is located on a non-secure server, depending on their browser settings, your site participants may experience issues with mixed content.  Mixed content issues are caused by a browser trying to display both non-secure and secure content at the same time.  By default, many browsers block mixed content as a security precaution.  In order to view an image located on a non-secure server within UVACollab, participants may need to select an option in their browser to allow mixed content.

Tip: If you are adding content in the Lessons tool, you may also insert images directly as individual items on the page, rather than within the Rich-Text Editor.  See the articles on adding content in Lessons for more information on embedding and linking items on a lesson page.

Choose how to view the steps.

Video Guide

Step-by-Step Instructions

Locate the image on the web that you want to embed.

Right-click (on a PC) or CTRL-click (on a Mac) on the image and copy the image URL to your computer's clipboard.  The option you select to copy the image URL depends on your browser.  Some examples include: Copy image address, Copy Image Location, and Copy image URL.

Position the cursor in the editor.

Position your cursor in the editor at the location where you want to embed the image.

Select the Image icon.

The Image icon displays a picture that looks like a landscape, with mountains and a sun.

The Image Properties window pops up.  In the Image Properties window, paste the copied image link in the URL box using the keyboard command Ctrl + V (in Windows) or Command + V (on a Mac).

Modify image properties.

  1. Enter short, meaningful Alternative Text into the text box to describe the image for screen reader users.  This is important for accessibility.  For more information on including alternative text and descriptions in your document, see How can I make images more accessible?
  2. Adjust the image size if needed by entering numbers of pixels into the text boxes for Width and Height.  These fields will be automatically pre-populated with the image's original size.

Set the Alignment. (Optional)

In the Alignment options are None (default), Left, Center or Right to position the image in the text box.

Note: You can also edit the alignment of an image by clicking on the image after you have added it to the Rich-Text Editor and using the editor's Align Left and Align Right buttons.

Caption the image (Optional).

Selecting the Captioned image check box will add an area where you can type a caption underneath your image.

Captions are recommended to group short, descriptive text with images.  You might also use a caption for citing the source of an image.

Important: If you use a Captioned Image, it must also have appropriate Alternative Text that is different from the text used in the caption.  Leaving Alternative Text blank hides an image from users of assistive technology, and they will not be able to read the caption if the image is hidden.  For more information on including alternative text and descriptions in your document, see How can I make images more accessible?

Click OK.

Click OK to confirm the addition of the image to the editor.

Example of a left-aligned image.

Pictured above is an example of a left-aligned image with a caption added underneath it.