Inserting an image

There are a several options for inserting an image into your page. There are a few things to keep in mind when doing so, including adding alternative text (alt text), creating variations, changing existing images, and ensuring the correct copyright citations.

Summary of Steps

Here is a summary of the tasks you will need to complete to insert an image.

  1. Upload image(s) to your course. 
    • Enter alt text and copyright.
  2. Add an image to your page.
    • Drag an image-element onto your page.
    • Drag an image from your course into the image-element.
  3. Save and Finish.

Detailed instructions on how to complete these steps with different image-element types is available below.

1. Upload image(s) to your course

To upload an image in your course:

  1. If you are not already in the CMS editor, navigate to any page in your course and click 'Edit this Page'. (For additional help on this step see: How to update a page in the CMS.)
  2. In your course navigate to the / media / images / folder and click on the folder name (images. note: all images need to be stored in this location).
  3. From the dropdown menu, click on 'New Content'.

button for images, new content

  1. This will bring up a dialog box where you can either drag and drop your selected image to the dotted area on the left or click on the blue 'Select Files' button.

drag and drop a file

  1. Once you have selected your image(s), you now have an opportunity to change the file name and add alt text.

Enter alt text

It is highly recommended that you add alt text to all images uploaded to your course. Enter a description that suitably describes the image (for instance, if you were not able to see it). For more information on why we recommend adding alt text, visit the University of Waterloo Web Resources: Accessibility tips page and see the section on 'Images'.

To add alt text to your image as you upload it,

  1. Click on the image you just uploaded (or the Additional Information icon next to the filename) and select Edit. Enter your alt text for your image.
  2. Once you have added your alt text, click 'Done Editing' to return to the dialog box.
  3. Click the 'Save and Approve' button to save your image. This will bring up a dialogue box asking if you would like to 'Return to the editor'.

Enter Copyright

Any images used must be credited to its source, in such a way that the user can locate the original image easily. On the page, below your image, enter copyright information 

  • External sources: CEL typically follows the APA citation style: '<Creator> (<Year, Month Day>). <Title of Image>. Retrieved from <insert URL>'
  • Created by the course author or CEL/University of Waterloo: '© Course Author(s) and University of Waterloo'

For more information on copyright guidelines, visit Copyright Guidelines (Centre for Extended Learning).

select image and add alt text

enter alt text and click done editing

2. Add an image to your page

  1. Navigate to the page you want to add the image to.
  2. If you are not already in the CMS, click 'Edit this page'.
  3. Use the instructions below to add one of the image types available.

Types of image elements and their uses

There are several types of image elements, found in the left side-bar under / pages / elements / content-page-elements / images / that can be used on your pages:

image elements

 

  • / centered-image-with-caption
    By default, this is styled with a border around the figure, and includes a location for your image, the copyright information, and a figure caption. It aligns the image in the centre of the page.
  • / figure-left
    The figure includes a location for your image, the copyright information, and a figure caption. It will float the figure to the left of the text. There is no set size.
  • / figure-right
    The figure includes a location for your image, the copyright information, and a figure caption. It will float the figure to the right of the text. There is no set size.
  • / float-image-left
    This will float your image to the left of the text, allowing the text to flow around the image. It includes a location for your image and the copyright information. There is no set size.
  • / float-image-right
    This will float your image to the right of the text, allowing the text to flow around the image. It includes a location for your image and the copyright information. There is no set size.
  • / responsive-image
    This includes a location for your image and the copyright information. The image is responsive, which means that it will fit the width of its container, no matter the size of your browser window.
  • / thumbnail
    This includes a location for your image, the copyright information, a title, and content. It is responsive, which means that it will fit the width of its container, no matter the size of your browser window.

Video: Steps for adding an image

This video (no audio) shows the steps for adding an image to your page.

Watch video on YouTube

Insert a responsive image

A responsive image will resize as your browser resizes. To insert a responsive image into your page:

  1. Navigate to pages / elements / content-page-elements / images / responsive-image
  2. Drag the element onto the page (dragging the icon, not the file name). In your editor, you will now see a dotted box (with the text 'drag image here') with a 'copyright' section below.
  3. Drag your selected image from / media / images / (dragging from the icon) into the 'drag image here' section.
  4. From the dialog box, select the size of the image you would like to insert (see the next section on creating a variation).
  5. Click 'Insert Image'. This will close the dialog box, returning to the editor, and insert the image.
  6. Enter the copyright details in the next section (where it reads 'copyright') following the image.

Be sure to Save your page.

Insert a figure (left or right)

A figure includes an image, copyright line, and figure caption. Figure-left will float the figure to the left of your text, and figure-right will float the figure to the right. 

NOTE: Images placed in figure-left (or -right) do not have a set width. If your original image in the / media / images / folder is larger than you would like displayed on the page, you will need to Create a variation (detailed below).

To add a figure-left (or -right) to your page:

  1. Navigate to pages / elements / content-page-elements / images / figure-left / (-right)
  2. Drag the element onto the page (dragging the icon, not the file name). In your editor, you will now see a dotted box (with the text 'drag image here') with 'copyright' and 'figcaption' sections below.
  3. Drag your selected image from / media / images / (dragging from the icon) into the 'drag image here' section.
  4. From the dialog box, select the size of the image you would like to insert (see the next section on creating a variation).
  5. Click 'Insert Image'. This will close the dialog box, returning to the editor, and insert the image.
  6. Enter the copyright details in the next section (where it reads 'copyright') following the image.
  7. Enter the figure caption details in the 'figcaption' section.

Be sure to Save your page.

Create a variation

In the CMS, you can create variations of an image, while still maintaining the original larger version. You can create a variation when you are inserting the image on your page, or by clicking on the image and selecting 'Create variation' from the dropdown menu.

Create a variation when inserting

  1. Using the instructions above, insert an element on your page to insert your image in.
  2. Drag (using the icon, not the file name) the desired image into the element.
  3. In the dialog box, there are 4 options for inserting the image:
    1. Select an existing Version
    2. Create a New Version
    3. Auto-resize the image to fit the placeholder
    4. Edit the image to fit the placeholder
  4. Under '2. Create a New Version' section, enter your desired width OR height. If the 'Constrain Proportions' radio box is checked, the proportions of your image will be maintained.
  5. Click the blue 'Insert Image' button below the Width and Height fields. The image will be inserted into your element.

If you have already created a variation, those versions will be visible under '1. Select an existing version'.

NOTE: You cannot create a LARGER variation of your image.

image editor

Creating a variation from the dropdown menu

  1. Locate the image file in your / media / images / folder
  2. Click on the file name and select 'Create Variation'. This will open up the Image Editor.
  3. On the right side of the screen, there are two tabs: 
    1. General
    2. Effects
  4. Under General, you have three sections:
    • Image Size
    • Crop Options
    • Save Options
  5. In the Image Size section, either:
    • Drag the slider under 'Resize' to the desired size
    • Enter the values under Width OR Height (it will maintain its proportions)
  6. Click the green 'Save' button to save your changes.

create an image variation

Changing an existing image

If you have made changes to an image outside of the CMS and wish to overwrite the file in the CMS, you can edit the image:

  1. Locate the image you wish to edit in your / media / images / folder
  2. Click on the file name
  3. Click on 'Edit'
  4. In the dialog box, under the first tab (Content), click on the 'Choose File' button.
  5. Choose the file that you would like to replace the existing image.
  6. If the dimensions of the image have changed, you will notice a red warning appear that reads 'Image Dimensions / Proportions as different sizes: The image you have uploaded has different dimensions than the original and may affect the layout of your pages'. If this is expected, continue to the next step. If this is unexpected (you did not change the dimensions of your file in your edits), you can try to choose your file again.
  7. Click the Save button, and then Workflow > Approve and Submit to finalize your changes.

edit to an existing image