UPDATED on April 12, 2018
Summary: Breadcrumb images display behind a blue filter at the top of web pages, adding visual interest to the page and providing visual clues about the content.
See Web Page Anatomy 101 - PDF for a visual explanation of the breadccrumb and surrounding area.
Note: Breadcrumb images are only visible when Properties | Breadcrumb Options | Breadcrumb Style is set to 'Blue with Image', a Breadcrumb Image path is set, and Breadcrumb Content Type is set to 'Default'.
Note: not all portions of the breadcrumb image are visible. Top portion will display under the blue top and pre nav areas, and bottom and side portions will display according to monitor resolution.
Default Breadcrumb Style
The default breadcrumb display is 'Blue with Image' which features a close up of the top of the Health & Science Building, overlaid with the page title and breadcrumb trail. You can see this on many pages, including Who We Are.
Custom Breadcrumb Images
Breadcrumb Image Storage
Breadcrumb images must be uploaded and stored in the _assets/images/breadcrumbs folder located at the top level of the website.
Breadcrumb images must be named with the 'bg-name' prefix. Example: 'bg-hsb' for image of Health & Science Building.
Breadcrumb Image Resolution
Image resolution is generally 2300 x 1080 px not to exceed 500kb (it can be any height) or as described on Image Size Guide - Full Width Background
Modify Breadcrumb Image
- Login to OUC Campus and check out page.
- Open Properties.
- Scroll to Custom Settings | Breadcrumb Options.
- Make sure the Breadcrumb Style is set to 'Blue with Image'.
- Click the 'document' icon in the Breadcrumb Image field.
- Navigate to the _assets/images/breadcrumbs folder
- Select the breadcrumb image you wish to use (it will display in the 'Edit Image' area).
- Click 'Choose File' (this will put the dependency tag for the image into the 'Breadcrumb Image' field
- Scroll to bottom of properties page and click 'Save'
- Your page should display the new breadcrumb image.
- Submit for publish.