UVACollab HelpUVACollab DocumentationGetting Started Rich-Text EditorHow do I embed an image in the Rich-Text Editor?

How do I embed an image in the Rich-Text Editor?

You can embed an image file from Resources in the Rich-Text Editor using the Server Browser.  In the Server Browser, you can either upload a new image file to Resources and link to it, or you can link to a file you already have saved to Resources.

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.

Video Guide

Step-by-Step Instructions

Position the cursor in the editor.

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

Click on the Image icon.

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

Click Browse Server.

The Image Properties window pops up.  Click Browse Server in the Image Properties window.

Upload the image file to Resources.

If you do not have the file uploaded to Resources already, select the Upload files icon at the top of the page.

If you already have the image you want stored in Resources, skip to the step below for instructions on how to Select the image to be embedded.

Choose file.

Upload files window

Drop the image file into the Drop files area or click Select files to navigate to the file on your computer.  

Locate file on computer.
File Upload

Select the image to embed.

The Server Browser window will pop up, displaying content in the current site's Resources tool.

  1. Select the name of the folder that contains the image.  This will expand the folder contents.
  2. Select the name of the image you want to embed.
  3. Click the OK button in the bottom right-hand corner of the page.

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.

Select OK.

Select 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.