Media Library

The Media Library is not intended for the storage of streaming media such as audio or video. If you need to store these somewhere, we recommend using a specialised provider, such as an S3 bucket configured for media streaming, or a third-party video provider such as YouTube or Vimeo.

For organizational reasons, we also recommend using the course Files and Uploads area for course-specific assets, and reserving this tool for media that is used across multiple courses and your site marketing pages.

Clicking the Upload Files button presents a modal window to allow you to drag and drop files to upload them, or click the area to launch your OS's file browser to select a file to upload.

After uploading, the file will appear in the media library. The media display area on this page allows you to search and sort uploaded assets, as well as view all assets currently uploaded to the Media Library. Clicking the item will open the Media Item Information for that file.

Media Item Information

The following information is provided for each item:

• Filename: The filename of the currently selected item.
• Display name: The user-friendly display name assigned to the item for easy reference.
• Original size: The pixel dimensions and file size of the item.

Copy/generate media URL

The Item URL property provides a direct link to the file where it can be referenced.

By selecting Resize / Crop image, additional controls appear, allowing you to generate alternative URLs for this file where various transformations have been applied. The height and width of the linked image can be adjusted directly in pixels, and resized or cropped according to various resize modes. By selecting the desired resize modes and entering new size parameters, the preview on the left will show the result. Once the desired settings are complete, the new Item URL will link to the modified image with those properties. These modifications are not permanent, and will only apply to the specifically generated link. The original file will remain intact in the media library.

Resize Mode	Description
Limit	The Limit cropping mode resizes the image to match the chosen height and width parameters, but only if the image is already larger than that size - it will never upscale the image. In addition, the aspect ratio of the image will be maintained. Example: a 100x100px image is given the width parameter of 100px and a height parameter of 50px, with the Limit mode selected. The resulting image will be 50x50px, matching the lowest limiting parameter of 50px height, while maintaining the image aspect ratio to not distort the image.
Fill	The Fill cropping mode creates an image with the exact specified dimensions, without distorting the image aspect ratio. This option first scales up or down as much as needed to at least fill both of the specified dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. Example: a 100x100px image is given the width parameter of 50px and a height parameter of 200px with the Fill mode selected. In the resulting image, 25 pixels are cropped from the left and right of the original image, with the height scaled up to 200px, causing the quality to decrease.
Limit Fill	The Limit Fill cropping mode behaves similarly to the Limit and Fill methods, with the size of the image limited to its original constraints to avoid quality loss due to upscaling. Example: a 100x100px image is given the width parameter of 50px and a height parameter of 200px with the Limit Fill mode selected. In the resulting image, 25 pixels are cropped from the left and right of the original image, and the height does not change, as it is limited to the maximum height of the original image.
Crop	The Crop mode simply crops the image, removing an even amount from all sides, cropping the image uniformly towards its center to give a resulting image of the chosen size. Example: a 100x100px image is given the width and height parameters of 50px by 20px using Crop mode. The resulting image is a 50x20px image, with 25 pixels removed from the left and right of the original image, and 40 pixels removed from the top and bottom of the original image.
Scale	The Scale cropping mode changes the size of the image exactly to the specified dimensions without necessarily retaining the original aspect ratio: all original image parts are visible but might be stretched or shrunk. If only the width or height is specified, then the image is scaled to the new dimension while retaining the original aspect ratio. Example: a 100x100px image is given the width and height parameters of 50px by 1000px with the Scale mode selected. The resulting image is a stretched abomination, where the width is reduced to 50px but the height is upscaled to 10x its original size, with no regard for the aspect ratio of the original image.
Fit	The Fit cropping mode behaves similarly to the Limit mode, in that the image will be scaled uniformly to match the chosen height and width parameters. The difference is that the Fit mode is not constrained by the dimensions of the original image. Example: a 100x100px image is given the width and height parameters of 180px by 150px with Fit mode selected. The resulting image will be 150px by 150px, scaling the image up to the lowest parameter, while maintaining its aspect ratio. Quality will be lost due to the upscaling unless the image is a Scaling Vector Graphic (SVG), and as such this is not recommended for raster images (such as PNGs or JPEGs).
Minimum Fit	The Minimum Fit cropping mode behaves the same as the Fit mode, but only if the original image is smaller than the specified height and width parameters. The resulting image will be scaled up to those dimensions while preserving the aspect ratio of the original image. This mode does not scale down the image if the requested dimensions are smaller than the dimensions of the original image. Example: A 100x100px image is given the height and width parameters of 50x50px. The resulting image does not change in size, and remains 100x100px, as it is limited to the minimum dimensions of the original image. If it is instead given dimensions of 180px by 150px, the resulting image will upscale to 150x150px. Quality will be lost due to the upscaling unless the image is a Scaling Vector Graphic (SVG), and as such this is not recommended for raster images (such as PNGs or JPEGs).
Pad	The Pad cropping mode resizes the image to match the specified dimensions, retaining the original aspect ratio of the image, and displaying the full image, adding transparent padding in any dimensions in which the specified parameters exceed the original image. Example: A 100x100px image is given the height and width parameters of 150px and 200px with the Pad mode selected. The resulting image will be 150 pixels wide, and 200 pixels tall, but only a 150x150px area of that will contain the original image. The remaining additional 50 pixels of height will be filled with a transparent background - 25px top and 25px bottom. Quality will be lost due to the upscaling unless the image is a Scaling Vector Graphic (SVG), and as such this is not recommended for raster images (such as PNGs or JPEGs).
Limit Pad	The Limit Pad cropping mode behaves similarly to the Pad cropping mode in that it resizes the image, maintaining its aspect ratio and applying additional padding where necessary to reach the specified dimensions, with the difference being that the size of the image will be restricted to the dimensions of the original image. If the specified dimensions are larger than the original image, the additional space is filled with padding. Example: A 100x100px image is given the height and width parameters of 150px and 200px with the Limit Pad mode selected. The resulting image will be 150 pixels wide, and 200 pixels tall, but only a 100x100px area of that will contain the original image. The rest of the image will be filled with a transparent background - 50 pixels top, 25 pixels right, 50 pixels bottom, and 25 pixels left.
Minimum Pad	The Minimum Pad cropping mode behaves similarly to the Pad cropping mode in that it resizes the image, maintaining its aspect ratio and applying additional padding where necessary to reach the specified dimensions, with the difference being that the size of the image will only change if the specified dimensions are larger than those of the original image. Example: A 100x100px image is given the height and width parameters of 50x50px using the Minimum Pad method. The resulting image does not change in size, and remains 100x100px, as it is limited to the minimum dimensions of the original image. If it is instead given dimensions of 180px by 150px, the resulting image will upscale to 150x150px, with 30 pixels of transparent padding being added to the width of the image, 15 pixels left and 15 pixels right. Quality will be lost due to the upscaling unless the image is a Scaling Vector Graphic (SVG), and as such this is not recommended for raster images (such as PNGs or JPEGs).