Skip to main content

Home page banner images

  Note that this page refers to home page templates prior to the 2019 university rebrand. New websites will use the rebranded style. If you'd like to update your existing home page template to the rebranded template, contact us.


Home page banner images are a set of images that appear on a home page and are presented in a slideshow format. These banners attract attention to a particular topic (a call-to-action) or provide a visual supplement/introduction to the website. 

You can have one or multiple banner images, although we recommend a maximum of three banners. If there is only one banner image, there will be no slideshow transition or animation. 

A banner consists of the image and an optional content box with text fields.

Home page banner example

Home page banner images are optimized for mobile devices — different size images load depending on the device being used to decrease page load time and bandwidth use. Banner images should be requested and created by the Communications and Marketing team because of specific size, resolution and layout restraints. Submit a Project Initiation form to request banner images. 

For your reference, banner image sizes are as follows: 

Small screens (phones) 488px W x 140px H
Medium screens (tablets) 1024px W x 320px H
Large screens (computers) 1920px W x 600px H

How to

  • Add a home page banner image
    1. Upload your images to the Shared Assets site in the CMS.
    2. On your website, edit the home page (main index page).
    3. Expand the Banner section. 
      Screenshot of Expanding Banner Section

    4. For each size option, browse to and select the appropriate image. The first, default option should be the large image. If no other image sizes are added, this is the image that will be used for all three screen sizes.
    5. Enter a short description of the image in the Alt Text field.
    6. To add another banner image, click the green plus icon underneath the Banner section label. Another banner section will appear. Continue adding banners as required (although a maximum of three banners is recommended).
       Add another banner image screenshot

    7. You can reorder banner images by clicking on the navy upwards/downwards arrows for each banner. Delete a banner by clicking on the red x icon. Reorder banner images screenshot

      Note that the editor will not show a preview of the image, only the path to the image. You can preview the image by updating your draft and viewing the page before submitting it to the workflow.

  • Add banner content and enable automatic scheduling

    Banner content is optional. You can fill out all or some fields. If all fields are left empty, only the image will appear.

    Banner content areas - shown on the left

    Banner content areas - shown on the right

    1. Category - smaller text that appears above the heading that can be used for a subject or category.

    2. Heading - the banner title. This should be under 45 characters.

    3. Content - additional banner information. This should be under 140 characters. If you are familiar with HTML, you can also add HTML markup such as links in this section (advanced users only). 

    4. Call-to-action link text - the link text to appear on the button if you want to include a call-to-action button
    Call-to-action link URL - the URL or CMS internal page of the call-to-action link when the button (if included above) or image is clicked.

    5. Display content box on left/right - choose which side of the banner image the content box should appear on large screen sizes. On small and medium screen sizes, all text content will appear below the banner image.

    Start date/end date - schedule banners by setting a start date and/or end date for the banner so that it is automatically shown and removed from the home page on the specified dates. Home pages are automatically republished at midnight every day, so be sure to set the expiration time slightly before midnight (e.g. 11:50 p.m.) to ensure that the order of publishing events is queued properly.


Search the CMS User Guide