Adding a banner image for your module

Owned by Aideen Gibson
Last updated: May 02, 2024 by Fiona McCloy
3 min read

You can add images to the Course banner for each module. It is possible to add images that are hosted online or you can upload an image which you have already saved to your local device. When you add an image, you will always be prompted to name your image and add a meaningful alternative text description for visually impaired individuals, screen readers or instances where the image fails to load.

 

Choose a banner image for your module

Consider an appealing and meaningful banner image to display in your module. This could be similar to imagery on your course/module marketing material, etc.

Check that the image you choose for your module satisfies the following criteria:

  1. The minimum size for the banner image should be 1200 x 240 pixels.

  2. The supported image file formats are JPEG and PNG.

  3. The image should be copyright free or Creative Commons.

Ulster University image bank ResourceSpace provides a variety of images for you to choose from. Note, to access ResourceSpace click Ulster University Login text, for Single Sign-On (SSO) access.

ResourceSpace login

From ResourceSpace you can search, browse (by faculty, school or department), and download images. Keep in mind the banner dimensions and minimum size above, to help find a suitable image. You can save these images locally on your computer, then drag and drop/upload into your module as outlined below.

CDLE have provided some banner images to give an idea of what is possible and suitable dimensions. These can be accessed via OneDrive - CDLE Banner images.

Other places where you can search for images are Pixabay and Unsplash (make sure that you restrict your search to select images that are free from copyright restrictions).

Add the image as a course image

  1. In the menu under Details & Actions, click Edit display settings

Details and Actions Menu in Ultra

  1. Select the image icon at top of the pop out window.

  1. Select and add your image by dragging or uploading a file (choose a JPEG or PNG file)

  1. After you’ve chosen an image to insert, select Next.

  1. You can now customize how the image appears in the text.

  2. Click Save when you’re ready to insert the image.

  3. Under Accessibility settings, add an alternative text description or mark as a decorative image (see below):

 

  • Now, close the pop up to save your Course Banner image.

Adding alternative text descriptions

Ensure you always include alternative text description in the file options for your image. You can add this by right clicking on the image to open the image editor.

Ally provides 7 best practices tips to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.

  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.

  • Be concise.

  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.

  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.

  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.

  • Identify images that don't represent relevant content as decorative.

Centre for Digital Learning Enhancement
ulster.ac.uk/learningengancement/cdle