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

Create your banners using the provided Small/Medium Banners image size.
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.
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.
Publish the folder of images. Note: It is essential that the images are published before moving on to steps 2 and 3, below.

Replacing images in an existing folder of banner images? Use caution.

Start by preparing the new images. Once you are ready with the new images, plan your steps to keep at least one image published in the custom folder of banner images at all times. This can be accomplished by uploading and publishing at least one of the new images before you delete the old ones from the folder. If there are no images published in a designated custom folder of banner images, the pages will not render any content below the banner image area.

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 (recommended). If this is the case for your Site:

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

Step 3: Apply the custom banners

Edit the root folder of the section of your site that you want to use the custom banners.
Select the Metadata tab.
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.
STOP: Did you publish the folder of banner images yet? If not, go back and do so now. If no images are published in the designated folder, all pages set to use them will fail to render any content below the banner image area of the page.
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.

Create an image using the Tall/Hero Banner image size.
Upload the image to any folder.
Edit the page on which you'd like to activate a tall banner and expand the Tall Banner settings.
Use the Hero Image chooser to select your image.
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.
Submit and publish the page.