Issues Advisory Banner

Automatically display a yellow Issues Communications banner in your site header to communicate ongoing, university-wide concerns (e.g. COVID-19).

Issues Advisory Banner in use.

Issues Advisory Banner in use on a large screen device.

On this page:

Using This Feature

Unlike most UBCMS components, the Issues Advisory Banner relies on shared content displayed using a Shared Content Reference. Two steps are required:

  1. Add a Shared Content Reference component to the site's header page in the Site-Wide Configuration folder (detailed below).
  2. Adjust your homepage's Page Properties to set a cache flush trigger (detailed below).

Remember to set a 'Flush Trigger' for your homepage (details below) and re-activate your header and home pages.

1. Configure the Shared Content Reference

Place this component in your site's Header page, which is located in your Site-Wide Configuration folder. We encourage you to place it immediately under the main header component, and below the Emergency Alert Banner (if you have one).

Reference path: Set the reference path to:
/content/shared/www/emergency/feeds/long-term-alert-banner

The component opened for editing showing the Shared Content Reference tab.

The component opened for editing showing the Shared Content Reference tab.

2. Set a Flush Trigger on your homepage

To ensure that the banner will display on your site and stays up to date, you must set a Flush Trigger on your site's homepage.

In Page Properties, in the Advanced tab, under Server Caching, add a new Flush Trigger with this path and then re-activate that page: /content/shared/www/emergency

  • Top Level Sites (/content/site)
    • e.g. nursing.buffalo.edu
    • Adjust Page Properties for the site’s home-page-dispatcher-trigger page
      • /content/site/home-page-dispatcher-trigger.html
      • e.g. /content/nursing/home-page-dispatcher-trigger.html
    • This page is NOT displayed in the admin console or File Tree. You will have to load it manually into your browser.
    • Flush triggers added to your actual home page’s Page Properties are ignored.
      • ubcms-author.buffalo.edu/content/site.html
      • e.g. ubcms-author.buffalo.edu/content/nursing.html
  • Second Level Sites (/content/*/site)
    • e.g. www.buffalo.edu/president
    • e.g. medicine.buffalo.edu/biochemistry)
    • Adjust Page Properties for the site’s home page
      • ubcms-author.buffalo.edu/content/*/site.html
      • e.g. ubcms-author.buffalo.edu/content/www/president.html

Unless there is a university-wide need to communicate information, the banner will NOT be visible on your home or header pages, even in the Author environment. When the banner is operational, you should see it in Author on your header and Web pages, and on your live site.

Remember to re-activate your homepage!

Add a flush trigger to your home page's Page Properties.

Restrictions

  1. Place the component directly under the main header component and under the Emergency Alert Banner if you have one and re-activate the header.
  2. Be sure to adjust your main home page's Page Properties with a 'flush trigger' as noted above and re-activate the page.

Placing the Banner on Non-UBCMS Sites

COVID-19 Content for Non-UBCMS Sites

To promote efficient, consistent communication on all UB sites, select UBCMS content can be included on non-UBCMS sites.

Revised May 8, 2020

Technical Requirements

Adding this content to your site outside of UBCMS will require the knowledge and ability to edit your site's HTML templates. A developer's skill set is required

Content currently available

Issues Advisory Banner

Automatically display a yellow Issues Communications banner on your site to communicate ongoing, university-wide concerns (e.g. COVID-19).  For UBCMS websites, this is normally displayed in the upper header.

Examples

How to add the banner to your site

The banner requires jQuery. The latest version (3.4.1) is recommended, but any version will probably work. If you do not have jQuery on your page, you can add this to the HTML of your page:

Once you have jQuery, add this script tag to the page HTML anywhere after the jQuery tag:

You probably want the banner on every page of your site, so you will need to add these tags to every page, such as to your site's header include files.

You can continue to keep the banner code on your page after the Coronavirus communication passes; we may use the same banner for other communication in the future.

Technical details

The banner's HTML page is loaded via javascript every time the page is loaded. If the banner is not empty, it is inserted at the top of the page just inside the <body> tag and a <link> to a stylesheet is added to the <head>. Care is taken to make sure the banner is not visible until the CSS is loaded. Nothing is added to the page if the banner turns out to be empty. Since the banner content is actually inserted into your page, you can add some extra CSS to your site's stylesheet if you need to tweak the positioning or styling, though changing how the banner actually looks is not recommended.

Add to a specific location

If you need to load the banner in a specific location in the page other than the top of the <body> add an empty <div class="long-term-alert-banner"></div> element in the page where you'd like the banner to be inserted. You should test that your page looks ok with that element but without the banner filled in in case the banner is turned off. (For example, keep the <div> but remove the <script> temporarily.)

Callback

If you need to execute some javascript code right after (and only if) the banner is not empty and is inserted on your page, you can add this before the long-term-alert-banner.js <script> tag:

Testing

To test a version of the callout banner with alternate content if the real banner is not currently in use (not visible), add this before the long-term-alert-banner.js <script> tag:

'Latest on coronavirus' Callout

An  orange callout with the latest headlines on UB's COVID-19 site. For UBCMS websites, this is located in /content/shared/www/coronavirus/modules/audience-pages and deployed with a Shared Content Reference.

Examples

How to add the Coronavirus Callout to your site

To add the Coronavirus callout to a page, add this code to your site's HTML where you would like the callout to appear:

The callout will be the width of its container and as tall as it needs to be to contain its content. It will resize if the browser window is resized. The callout does not require jQuery.

You should keep track of where you add this callout so that it can be removed when Coronavirus communications wind down. It will not disappear on its own like the banner.

Technical details

The callout content is loaded in a iframe so that more UBCMS styles and assets (icons, fonts) can be included exactly as they are in UBCMS. The iframe is resized to match its content's size using the fantastic iframe-resizer javascript library.

Related Components:

Last reviewed:

March 16, 2020

Was This Page Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)