Images

This page demonstrates different options for images.

Images make content easier to understand for many people, just remember to use images that are meaningful to the content and use succinct alternative text ("alt text") for accessibility. You can find more accessibility resources through The Learning Portal.


Option 1: HTML Editor

You can open the HTML Editor in two ways. When "creating a new file" or by "editing" an existing file.

Creating a new file:

Create a file by selecting the new blue button and choosing, create a file in the dropdown options.

Then select a document template located beside the content title to ensure that your content connects to all the styles and components of this template.

open the HTML editor by creating a file
open the HTML editor by creating a file

Editing an exisiting file:

To edit an existing file, go to the module where the file you wish to edit is located.

To the right of the file name is a dropdown menu. Select this dropdown menu to view more options.

Select edit HTML.

open the HTML editor by editing a file

Insert Image:

Once creating or editing a file there is an "insert image" option with a camera icon. It is located in the top left side of the menu and is near "insert stuff" and "insert quicklink".

location of insert image, to the right of insert stuff

Aligning Images:

You can align your images using alignment options. Be sure to use the dropdown menu as there are more options available.

location of indent, lists, and alignment options

Option 2: Copy and Paste

Alternatively, you can also copy any of the following elements from this page.

Access this page's HTML Editor by pressing the Edit HTML button found just below the end of content on the left side. location of the page HTML edit button, after the content to the lower left

Then highlight and select your content, including everything between "start copy" and "end copy". Right click and select copy and proceed to the content page you wish to paste into. Access the HTML editor of this page and paste your content where you'd like.

Image Align Right

Start copy

person welding

NOTE: When inserting Images, please use D2L's built in editor "insert images" option.

This allows you to save images and files in the correct folders by selecting the "Choose Destination" button (this helps avoid broken links). Please make sure you are saving files and images in their corresponding week/module folders.

When inserting an image it is important to specify "Alternative Text". This is a mandatory step in being AODA compliant. Keep in mind it's good practice to:

End copy


Image Align Left

Start copy

leafy tree art display with different colours for the leaves

NOTE: When inserting Images, please use D2L's built in editor "insert images" option.

This allows you to save images and files in the correct folders by selecting the "Choose Destination" button (this helps avoid broken links). Please make sure you are saving files and images in their corresponding week/module folders.

When inserting an image it is important to specify "Alternative Text". This is a mandatory step in being AODA compliant. Keep in mind it's good practice to:

End copy


Image Align Full

Start copy

NOTE: When inserting Images, please use D2L's built in editor "insert" components. This allows you to save images and files in the correct folders by selecting the "Choose Destination" button (this helps avoid broken links). Please make sure you are saving files and images in their corresponding week/module folders.

When inserting an image it is important to specify "Alternative Text". This is a mandatory step in being AODA compliant. Keep in mind it's good practice to:

HTML editor options: align left, align right, align center, align full

End copy