Images

Formatting Text & Media Images

The sidebar Images tool helps you embed and format images that have already been uploaded to Canvas or an institutional file store. Unlike the Canvas editor, the image alignment and text wrap options in the sidebar add whitespace between the image and surrounding text, which looks much more professional. Other features include a variety of image border styles, a caption editor, and the ability to pull external images into the current site.

 Tips for Images

  • Select images that amplify the meaning of the content. Avoid using images for decorative purposes only.
  • You are responsible for ensuring that the image is in the public domain or that your use of the image is in compliance with the terms of use for any license or copyright attached to the image.

Instructions

Add an image

  1. If the image has not already been uploaded to Canvas, upload it to the current course using the Files tool or the Upload/Embed Image tool.
  2. Place your cursor in the editor where you want the image to go.
  3. Open the Add New Elements ( ) tab in the sidebar.
  4. Select the Image tool. The Edit Current Element  ( ) tab opens with Image selected as the active tool.
    Image Tool
  5. In the  Content  panel, open the Change Image panel and select preferred image source:
    Image Source Options
    • = User Images (stored in your personal files).
    • = Course Images (stored in course files).
    • = Institutional Images (stored in DesignPLUS configuration course).
      (Note: if selecting an image from the primary images library, the image must be copied to the course for users to see it)
  6. Select the image from the thumbnails shown, or use the search and filter options to locate the image you want to use.
  7. Provide Alt Text for accessibility or check the Decorative box if the image is strictly decorative.
    Alt Text field
  8. Optional: To add an image caption, check the Caption box and enter the caption.
  9. Optional:  To turn the image into a hyperlink, click Add Link ( ). If you choose this option, the Link tool will become the active tool. Enter the URL for the link and then re-select Image as the active tool to continue.
  10. Open the Style panel to adjust the image's style. Use the options to set the width, alignment and text wrap, caption style, and border style for the image, etc. Each option is described below.
    Image: Style Panel

    1. W & H: Manually set the width or height of the image.  Adjusting one dimension will adjust the other proportionally.
    2. Fixed Width: The image will display at a set width.
    3. Fill Container Width: Fills the entire width of the containing element with the image.
    4. Max Width Fill: The image will display at a set width but never display wider than the element that contains it. The image will size down as the display sizes down.
    5. Align Image: Floats image to  left or right, centers the image, or resets the image to the default alignment.
    6. Caption Styles: Determines the style for the image caption, if present.
    7. Border Options: Sets the border styles for the image.
    8. Clear Style: Removes all image style settings.

Edit an image

  1. Select the Edit Current Element  ( ) tab in the sidebar.
  2. Select the image you want to modify.
  3. Choose Image as the active tool:
    Image Tool
  4. Use the options available in the Content and Style panels to make the desired changes.

Learn More