Adding a banner image for your module
- Aideen Gibson
- Fiona McCloy
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.
If you wish to use a stock image from Unsplash, this option will appear when you click Insert image.
If you are using your own image or one from another source, check that the image you choose for your module satisfies the following criteria:
The minimum size for the banner image should be 1200 x 240 pixels.
The supported image file formats are JPEG and PNG.
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.
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.
Feel free to use images from other source, for example Pixabay (make sure that you restrict your search to select images that are free from copyright restrictions).
Add the image as a course image
In the menu under Details & Actions, click Edit display settings
Select the image icon at top of the pop out window.
At this point, choose your image source by selecting a stock image from Unsplash (a) or uploading a file from your device (b).
Select an image from Unsplash:
b. Select and add your image by dragging or uploading a file (choose a JPEG or PNG file)
After you’ve chosen an image to insert, select Next.
You can now customize how the image appears in the text.
Click Save when you’re ready to insert the image.
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.
Related Articles
Useful Links
Related pages
Centre for Digital Learning Enhancement
ulster.ac.uk/learningengancement/cdle