Skip to main content
Are you okay? Emergency/Crisis UOIT Home

Sliding banner images

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

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

A banner consists of the image(s) and text content (optional). 

  • About home page banner images

    Home page banner images are optimized for mobile devices - different size images are loaded depending on the device being used to decrease page load time and bandwidth use. Banner images should be requested and created by Communications and Marketing 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 first default 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 medium image. 
    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 6 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 minus icon. Reorder banner images screenshot

    8. You can set an expiration date for the banner so that it is automatically removed from the home page on a specified date. Home pages are automatically republished at midnight every day, so be sure to set the expiration time slightly before midnight.
  • How to add banner text content

    Banner text content is optional. If all text fields are left empty, only the image will appear. 

    Category - Small text that appears above the heading. 

    Heading - Banner title.

    Content - Additional banner information. If you are familiar with HTML, you can also add links in this section (advanced users only). 

    Call-to-action link text - If you want to include a call-to-action/link button in the content section, enter the button link text here. 

    Call-to-action link URL - The full URL of the call-to-action link. 

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

    Banner image content labelled as seen on live site

    Banner content as seen in the CMS