How to add a header banner to your site

Owned by Susanna
Last updated: Apr 09, 2024
2 min read

This support page describes how to use the new header banner functionality to add an image banner to Myplace classes.


1) Go to 'Edit class settings' and scroll to the bottom page to the 'Presentation section':

  • check the 'Show Banner' option
  • use the 'Container' field to display the top most branding attribute (e.g. School of Business) and the 'Programme Name'  to display the programme (or other branding details).
  • The name of the site will then be "shortname: site name"
  • add the image to the 'Course summary' files. If you leave it blank, it will be autogenerated.

Presentation section in the class settings



2) Image:

  • Please add you image to the 'Class Summary Files' field. If no image is added, the system will auto-generate one.

  • The banner image is a background image that will be resized differently according to the screen sizes. Therefore, the banner ratio is not fixed and may also change based on the amount of text. The functionality was tested using an image size of 1074x269px which seemed to give good results.

  • Please use an image with focus on the centre, as any other part of the image may be cropped depending on the screen size.
  • The banner image is a decorative background, and there is no output for the alt text. Therefore, the image should not be treated as a functional image. Please do not use the image to convey any information.
  • Please don not include the University logo in the image as this is redundant and may be cropped on some devices.

Example banner that shows which part of the image will be cropped

This is an example of a banner image that shows how the banner behaves. The dark overlay may be cropped on larger desktops, the purple overlay may be cropped on small devices, and the safe area is at the centre of the image. Please feel free to experiment with other image sizes, but keep in mind that the safe area is the centre of the image and please resize your browser window to test how the image responds to different sizes.



Final result


Example of a class site page with a responsive banner showing the container, programme name, site shortname and site title


Filter by label

There are no items with the selected labels at this time.