Adding a New Hero Slide on the Chapman Homepage

The hero area is the featured story found at the top of the homepage. Based off an editorial calendar, we change this area out every couple of weeks on Mondays.


The hero is composed of a few elements that need to be collected from other individuals and loaded into the system before you build out the actual hero slide in Cascade. These assets include:

  • Background Videos – There are two file formats that are provided by Heather Schlossnagle in Pather Productions: .mp4 and .web.m.
  • Background Fallback Image – This is usually a created by taking an appropriate screen capture from the video. This image shows on mobile and when broswers don’t support video.  The size is 1280 x 720 px.
  • Article Link – This is used in the call-to-action buttons. Usually provided by Dawn Bonker / Dennis Arp from the PR and Publication Team, but can come from other sources. Check with Dawn.
  • Supplimentary Video -This is used in the call-to-action buttons. Usually provided by Heather in Panther Productions. This should be a YouTube link.

You will load all your video and images files to these folders in Cascade: _files/img/hero-panels/fallback-images or html5-videos

Building a new hero slide:

Once you have loaded all your assets into Cascade, you will follow these instructions to build out and publish a new hero slide. The publishing process works also for updating current slides.

  1. Log in to Cascade
  2. Navigate to the hero_stories folder in the site tree
  3. Copy the previous (current) slide and rename appropriately based on the article
  4. Fill in the slide information – title, summary paragraph, background art/video, links
    • Note 1: If you are using video, you must load a .mp4 and a .webm version (for different browsers).
    • Note 2: The title and description are usually written by the slide creator based on the article tone.
    • Note 3:  If you are linking to a youtube video in the buttons, change the video ID in the code listed in the below screenshot.
    • Screen Shot 2015-05-18 at 3.44.28 PM
  5. When complete, submit the slide. Submit doesn not publish.
  6. Now publish (to test or production). You must publish these three elements, in this order, each time you make an edit.
    • Publish the new slide you created
    • Publish the JSON file named listing_order.json (located in the same folder as the slide.)
    • Publish the actual homepage “index” after you have switched the hero slide per the screenshot below.
    • Screen Shot 2015-05-28 at 8.42.49 AM
  7. If you need to make an edit to a slide, you would go into the slide itself, and then follow the publish order listed above.
  8. Done

Go to WIM Internal Team Page