Adding images and video into the learning content

Overview

This article will show how you can add, edit and delete images and videos for any content item in your designs. Using multimedia is an essential part of most learning experiences as they can convey numerous concepts and ideas quickly and effectively when mixed with other forms of content, such as text.

Upload directly or host elsewhere

Images added to your learning designs can either be stored on Coursensu, or you can add linked media content hosted anywhere that allows hotlinking. Coursensu hosted images can be embedded into documents and slides, for download. Images can be downloaded as a .zip file. Linked content items (hosted anywhere) can have relative or absolute links, enabling you to design in Coursensu, then export your content with links that will continue to function on any LMS or CMS.

This article will show you each step to add images and videos to the storyboard view for any content item in your design.

Contains

• Adding images - adding images to any content item.
• Resizing and adjusting - how to change the display properties.
• ‍Positioning - how to align / wrap images around text.
• Embedding videos - how to embed a video (hosted elsewhere).
• Bandwidth - how we measure content upload / download limits.

Terminology

• Hotlinking - content hosted in one location which has the access permissions to use elsewhere.
• Embed - media player, and stored video file, hosted in one location with the access permissions to display elsewhere.
• Bandwidth - the term used for data transfer between computers.

Ready? Let's add some multimedia into your learning design 🚀

Add an image into your learning content

Step: Open the storyboard view for any content item

Step: Select, within the learning content, where you'd like to add an image

Step: Select Insert > Image...

Step: Select an image from your computer(or paste in an image URL)

Step: Provide a description as the Alt text for screen readers

Optional: Adjust the dimensions

Done! You can now add images in to your learning content.

Position an image

Step: Select an existing image in your learning content

Step: Change the alignment option, for example, to Align right from the toolbar

Done! Your image now aligned to the right of the text content.

Resize an image

Step: Select an existing image in your learning content

Step: Right click the image and select Image... or select the image and then select the Insert > Image... menu item

Step: Resize the image Width and Height

Tip: You can adjust both width and height together, if the lock shows they are constrained, which retains the aspect ratio. Or select the padlock to remove this constraint.

Add spacing around an image

Step: Select an existing image in your learning content

Step: Right click the image and select Image... or select the image and then select the Insert > Image... menu item

Step: Select the 'Advanced' tab

Step: Set the Vertical and/or Horizontal space to add padding between content and the image

Optional step: Add a border around the image with the Border width and the Border style settings.

Delete an image

Step: Select an existing image in your learning content

Step: Press the backspace key to remove the image.

Add a video into your learning content

Step: Open the storyboard view for any content item

Step: Select, within the learning content, where you'd like to add a video

Step: Select Insert > Media...

Step (for hosted video: Paste the video URL (Coursensu. does not currently support video upload) OR

Optional step: Adjust the dimensions with Width and Height

Step (for video embed): Select the Embed tab and paste the embed code from your video host / provider.

Done! You can now add videos to your learning content.

Supported video embed platforms:

• youtube.com
• youtu.be
• vimeo.com
• dailymotion.com
• giphy.com

Team plan users can request additional supported platforms, please let us know your requirements via email.

Delete a video

Step: Place the text cursor just after the video in your content

Step: Press the backspace key to remove the video.

Done! The video has now been removed.

‍

Advanced tip: You can also switch to the HTML code (via Tools > Source code) to make finer adjustments.

‍

Check your bandwidth usage / allocation

Step: Open your Account page from your Profile icon > My account

Step: Select the Bandwidth tab from your account

Step: Review your bandwidth used so far

Note: Bandwidth is per user and set per plan. It resets each month.

How is bandwidth calculated? 

Bandwidth is incremented during Upload and Export.

Let's say your plan allows 5,000 MB bandwidth per month (as per the image).

1. Uploading two 1 MB images uses 2 MB total, for the upload.
2. Viewing these images incurs no additional bandwidth.
3. Exporting this design as a document will transform the images for Word and use 2 MB bandwidth.

Total bandwidth used: 4 MB.

‍

Top 3 next steps

1. Review your images and video to add into your learning content. 
2. Edit media to ensure the dimensions and file size are appropriate.
3. Embed videos on a supported platform to include in your learning content.