Error message

  • Notice: Undefined variable: token in bb_coveo_search_ui_block_page_attachments() (line 53 of modules/custom/bb_widgets/bb_coveo_search_ui/bb_coveo_search_ui_block.module).
  • Warning: array_flip(): Can only flip STRING and INTEGER values! in Drupal\Core\Entity\EntityStorageBase->loadMultiple() (line 312 of core/lib/Drupal/Core/Entity/EntityStorageBase.php).

This information applies only to the Ultra Course View.

This information applies only to the Ultra experience.

What are course banners and how do they work?

As an instructor, you and administrator users can upload an image to be the thumbnail in the Courses page at Base Navigation. It can be also the internal Course Banner inside your Ultra courses.

With course banners you:

  • Improve the way your Ultra Course View landing pages appear.
  • Improve student engagement and experience.
  • Bring consistency among what the Base Navigation displays and the actual course.
  • Help your students to differentiate between courses, and locate course details.
  • Make it easier for you to add a course schedule, and for your students to identify course faculty members and class meeting days, times, and location.

Set up a banner for your course

  1. Choose an appealing and meaningful image for your course. The minimum recommended size for the banner image is: 1200 x 240 pixels. See Size recommendations below.
  2. In your course, go to Course Image in the left side menu.
    Select course image from the main menu to create or edit a course banner
  3. Alternatively, you can open the Course Image panel by selecting the three dot menu in the upper right corner of your course. Select Edit Course Image and continue: 
    Open the Course Image panel from your course three dot menu at the top right corner
  4. Upload the new image.
    Upload a new image for a course banner
  5. Position the image using your mouse buttons or arrow keys. You can also zoom in and out using the slider at the bottom of the modal window. This functionality will work even you decide you don’t want to include a banner inside your Ultra course.
    Reposition an image to create a new course banner and make it look its best
  6. Select the Done button, when you're ready.
  7. The image will load in a few seconds, depending on your internet connection.
  8. Activate the toggle in the upper right toggle to display the image within your course as a banner.
    Select all final settings for the image to become a course banner and save it
  9. You can use the checkbox to mark your image as decorative or you can provide an image description for screen readers. See their importance in the section below.
  10. Select the Save button when you're ready.
  11. You can edit your image at any time, using the pencil (Edit) icon in the upper right corner of the banner. You can also select Edit display settings under Course Image in the main course view.
    A course banner displaying within a course's main page
  12. The image will done your course card.
    A course card with an image that doubles for course banner as well

You can use the course card image from Base Navigation as a course banner in Ultra courses.

Size recommendations*

  • The minimum recommended size for the banner image is: 1200 x 240 pixels.
  • Images with text don't scale well.
  • For banners, the recommended visible width ranges from 950 to 1200 pixels. The recommended visible height ranges from 150 to 240 pixels.
  • For course cards, the recommended visible height is a constant 240 pixels. The visible width ranges from 550 to 1100 pixels.
  • Keep the main content within the center, at 550 x 150 pixels of a 1200 x 240 pixels banner, to guarantee its visibility. Anything outside that 550 x 150 central pixel area may be cropped out at various screen sizes for either the course card or the banner.
  • An abstract image or one with a focus at the center would work better for a banner, due to cropping variability.

*Kindly provided by Stephanie Richter, one our Blackboard Community members.

Image description and decorative images

Visual components of courses are helpful for aesthetic and identification purposes. Given their importance, it's key to make sure they adhere to accessibility best practices and standards. This way, you can engage all your students and ensure a fair learning experience for all.

  • You can include an image description when uploading a banner image in the course, or when you edit existing course banner images.
  • Mark images as decorative, whenever images are not primary content and you don't need to provide a description for screen readers, to have greater control of your course.