User Guide Choose a Banner Image

With DesignPLUS, you can add a banner image to a page. The legacy sidebar's Choose a Banner Image tool functionality is now built into the Image tool. This page has all the information and links to resources you need to use banner images with DesignPLUS.

Banner images can be any ratio or size, but we recommend a 10:3 ratio (1100px width and 330px height). This ratio will look best with most DesignPLUS theme styles. Also, 1100px is the default maximum width for content styled with DesignPLUS, so images with much larger resolution will be scaled down and take up space/loading time.

Storing Banner Images

There are two ways to store banner images:

On the [Banner Images] page in the customizations course (requires a public URL for the image).
In the customizations course files.

The [Banner Images] Page

The DesignPLUS Admin Guide has instructions for customizing banner images using the [Banner Images] page in a customizations course. This includes how to add, edit, delete, and hide banner images with public URLs in the sidebar.

The category group names in the [Banner Images] page are for organizing the images on that page only. The categories do not appear in the sidebar. All images on that page will be loaded in the "Banner Images Page" option of the Folders/Filters view of the Image tool.

Customizations Course Files

To use banner images from customizations course files, simply create one or more folders in the customizations course Files area and upload the banner image files to the folder(s).

Now, when you use the Image tool, locate the desired course and folder from the Folders/Filters dropdown options. You'll see thumbnails of the image files stored in that folder. When you select an image thumbnail, it will add the image path to the customizations course. If the image path is outside of the current course, the tool will prompt you to import the image into the current course. See step 6 in the Image Tool panel on this page.

Using Banner Images

There are three ways to add a banner image to the page:

Theme Tool

After adding a theme, you can choose to add a banner image as part of the theme. Each theme will have a default banner image. This default image can be updated on the [Themes] page in the customizations course.

Add a New Banner Image

Open the Add tab.
Select Theme. This will insert a banner title with the default theme in the RCE.
Now from the Edit tab, click on the + button to add a banner image. The default banner image will be added to the RCE.
If you wish to replace the banner image, use the Image tool and see the instructions to Replace an Existing Banner Image in the Image Tool panel below.

Image Tool

You can add a new banner image or replace the existing banner image with the Image tool. The image tool also has many other options including adding style and alt text.

Add a New Banner Image

Place your cursor in the editor where you want the banner image to go.
Open the Add tab.
Select Image. This will insert an image placeholder at your cursor position.
Now, from the Edit tab, select the image source where your banner image is located.
- User images
- Current course images
- Extended customization course images
- Primary customization course images
If your banner image is stored on the [Banner Images] page,
1. Select the "Banner Images Page" option from the Folders/Filters dropdown and select the banner image. The image placeholder will update with your publicly viewable image.
If your banner image is stored in the course files,
1. Use the search field or Folders/Filters dropdown to locate the file. Remember, the "Banner Images Page" option in the Folders/Filters dropdown will only show the images from the [Banner Images] page.
2. Once you find your image from the course files, select it and the image placeholder will update with the image path to the original image.
3. If you are choosing a banner image file from a course other than the current course, you will be prompted with a message to import the file into the current course. Select the destination and click "Copy to Course". This will import the file and update the image source path in the RCE so it is viewable by anyone in the course.

Replace an Existing Banner Image

Select the existing banner image in the RCE.
Open the Edit tab.
Make sure Image is the active tool.
Complete steps 4-6 from the instructions above.

Upload/Embed Image Tool

The Upload/Embed Image LTI tool can crop any image to a banner image aspect ratio (recommended 10:3) from within the Canvas RCE. Simply launch the tool, select the image, crop, and the tool will upload and embed the image in your Canvas page.

Theme Default Banner Images

Institutions can determine which banner image is used by default for each theme. To set a default banner image for a theme, check out the "Set A Default Banner Image" instructions on the DesignPLUS Admin Guide page Instructions for Customizing Themes.

When there is no default specified, a generic landscape photograph is used: