This page uses javascript to help render elements, if you have problems please enable javascript.
 
Skip to main content
 
 
 
 
 
 
 
You are now inside the main content area
 
 
 
left col

Page Banners

Adding an image can help users get a better sense of content or can just be useful to help reinforce your site's vision.  Images will scale with the page on devices.  Remember the images are not meant to be used for instructions / directions, event information, or important details.  Anything that a user needs to be aware of must also be written in text within the page contents.

Use this page to set page banners on your content pages.  If you are looking for how to set up and modify your site page banner configuration page you'll find that in our CMS set up instructions.

Adding a page banner to your page is done using the page properties for each page.  Starting in version 5.24 you will have new options for controlling the banners on the page.  Each site can have up to 50 banners including categorys and tags for scoping. 

If the site wants images pulled using categories or tags make sure your page banner set up file has been updated accurately. 

right col
 
left col

Page Properties Settings

The ability to set the page's banner is found under the "Properties" link in the main toolbar for the page under the page title.  As long as the page banner file has been updated and published under your site's setup folder you should be able to get your page to have a banner in just a few clicks.

right col
 
 
left col

What kind of banner do you want?

In the page properties there is a section for the page banner options with two checkboxes and a filter text area. 

Page Banner checkbox will turn banners on and off for the page.  You can uncheck the box without needing to lose any previous settings.

Randomize Page Banner checkbox will allow the page to randomly choose an active banner upon page load.  Only active banners are chosen for a random image to display.

Page Banner Filters

There are three filters you can add to the banner filter and all are optional and always separated by a semi-colon ';' between each filter.

Use the prefix "banner" to indicate a specific page banner that will always pull, use a series from a starting number to an ending number, or you can add specific number by comma separation.  Below you will see some examples of valid entries 

banner: number
banner: number start - number end
banner: number, number, number

If you have more than one image defined you must enable the Randomize Page Banner otherwise the first image is chosen.

Use the prefix "cat" and/or "tag" to scope images to specific categories and/or tags.  These must be set up in the site's page banner file but with 50 images it will allow you to create groups of images.  Below you will see some examples.

cat: students
cat: students, events, projects

tag: career day
tag: career day, biology 200 trip, awards

By default the filter acts like an OR between categories and tags when pulling data.  If you need to scope it to filter a very specific set you can use "filter-pull: and" to make content that limits to a category AND a tag value.  Be aware if you use this style and no match is possible no page banner will appear.

Example filter might look like this:

banner: 2-7; cat: events; tag: zoo trip, aquarium, pumpkin launcher

With the Randomizer turned on it will show a random image from 2-7 where the category is "events" or the tag is "zoo trip", "aquarium", or "pumpkin launcher"

 

Page Banner Options within the Page Properties

page property settings for banners

right col
 
left col

Styling a Page Banner

Most of the time you'll just want to pull the page banner as is from the site page banner file.  When you need to have more control for a specific page you can overwrite the image filter and tagline display (assuming there is tagline data).

Image Filters

To apply an image filter to the page banner you can set an "image-filter" in the Page Banner Filter on the page properties.  The image filters are applied to the page banner and anything from the page properties will overwrite the site page banner file's CSS settings.  You can apply multiple filters using comma separator between each style, but be aware that undesired results may appear.  To remove any filters that might have been used in the page banner file use image-filter: none.

For example:

image-filter: image-filter-warm, image-glaze-2, image-intensity-4

Tagline Colors

The tagline is text written under the image.  This text comes from the site page banner file and must be entered / updated through that.  A tagline style can be applied in the site page banner file but if you need to overwrite it you can use "tagline-filter".  The tagline filter is made up of two parts, the primary and the accent color.  The primary defines the bar where text is shown and the accent is a piece at the end of that line in an alternate color.  Use the class "tagline-(primary)-(accent)" to overwrite the tagline colors.  Colors are defined by the site theme so check with your web administrator, but the default color pallet is used for all sites as of 5.24.

For example: 

tagline-filter: tagline-1-white

When using the default site theme, this will set the primary text bar to Titan Blue and the accent color to white.

right col
 
 
left col

Try banner styles

If you want to test out tagline and image filter styles we have a demo page that allows you to see how these styles will impact an image.

Page Banner Demonstration

right col
 
left col
right col
 
 
left col
right col