CMS Guide

Banner Image

The Banner Image content type creates an animated slider of up to 3 images at the top of a Department landing page. A minimum of 2 images and a maximum of 3 images are necessary for it to function properly.

Important Information

The Slider banner can be used on any department homepage and various landing pages. Any text contained in the banner image should be used as the image description in the Media Library. Failure to do so will cause the accessibility of your page to suffer and your banner image may be removed. This content type offers a unique feature where you can include a Title and Teaser that will overlay the image. This should be used as an alternative to having text embedded in the banner image itself.

At a Glance

  • Requires Placeholder: No
  • Placement: Banner sub-section
  • Special Setup: None
  • Image Sizes:
    • Dimensions: 880 x 495px
    • Resolution: 72. This is absolutely essential! Using print quality images (300+) will cause your page to load slowly or not at all.

This content type requires a unique sub-section called "Banner" in order to display properly. Rather than placing the single banner on the same section most of your other content is on, you put them onto the "Banner" section. 2 - 3 pieces of content are necessary. Slider images provide additional functionality for your homepage with optional text and the optional ability to link to other pages you wish to feature within your website.

Size *MUST* be compliant with the size set within our style guide: 880 x 495 pixels. The recommended image size is very important! Deviating from those dimensions will cause your page to look unprofessional and unpolished. If your image or photo is portrait (vertically) oriented it is not an acceptable choice for a banner image.

Related Content Types:

Banner Image: Slider contains the following elements:

  • Name - Used in Sitemanager only. This does NOT show up on your webpage.
  • Title - This will be your content heading (<h2>). Larger, bold text with extra spacing.
  • Teaser Text - Paragraph callout text meant to describe your page or content.
  • Image File - Use this to select an image from the Media Library.
  • Block Link - This links your image to another webpage or section.