• Departments & Offices
• University Communications
• University Web & Design
• Web & Apps
• Cascade
• Help
• Manager Help
• Banner Images

Banner Images

By default, a bank of small or medium page banners load randomly using images stored in your Site's /images/bannerphotos/about/ folder.

Customize Small/Medium Banners

Looking to set a custom bank of banners for a section of your Cascade site? You can change the default behavior as follows.

Step 1: Create a folder of custom banner photos

1. Create your banners using the provided Small/Medium Banners image size.
2. Create an empty folder under /images/bannerphotos/. Use a folder name that is easy to associate with the section of your site that will use the custom banners.
3. Upload your images. The Display Name field is required for all images, however this field will not be used as alt text for banner images — they are considered decorative. 
4. Publish the folder of images.

Step 2: Reveal the hidden field (if applicable)

Some Cascade Managers keep specific folder metadata fields hidden from view to help prevent editors from using the fields without consultation. If this is the case for your Site:

1. Select your Site (e.g., mason.wm.edu).
2. Select Manage Site in the black header bar.
3. Select Metadata Sets.
4. Edit the Folder metadata set.
5. Select the Custom Fields tab.
6. Find the section for Text: Banner Photos Bank and toggle to Visible.
7. Submit.

Step 3: Apply the custom banners

1. Edit the root folder of the section of your site that you want to use the custom banners.
2. Select the Metadata tab.
3. In the “Banner Photos Bank” field, fill in the exact name of the folder you created under /images/bannerphotos/. Type just the folder name — do not include the path.
4. Submit and publish the folder.

Tip: You do not need to edit every subfolder of your section. Every subfolder inherits the Banner Photos Bank of the closest parent folder it can find. If it cannot find a Banner Photos Bank value when traversing parents up the folder tree, then the /images/bannerphotos/about/ folder is used.

Step 4: Rehide the hidden field (if applicable)

• Repeat Step 2, but at #6 change the value to Hidden.

Use a Tall Banner

Tall banners use a single image selected at the page level. A tall banner applies to a single page, overriding the bank of banners otherwise in use on that folder. The Tall Banner settings are only visible to Managers. 

1. Create an image using the Tall/Hero Banner image size.
2. Upload the image to any folder.
3. Edit the page on which you'd like to activate a tall banner and expand the Tall Banner settings.
4. Use the Hero Image chooser to select your image.
5. Select from the available Tall Banner Placement Options: 
   • Text Placement: We recommend using the default Center Center for a more consistent look across your pages. Bottom Left is recommended for centered "people" photos only.
   • Image Focal Point: Default is Center Center. When a browser trims and resizes the image to fit the available space on a device, it uses your preferred focal point. If a tall banner is displaying poorly on some device sizes, try the alternate options available. 
6. Submit and publish the page.