Undergrads apply for free in October
Back to Main Menu

Hero Video or Rotating Images

For use with Hero widgets on college department and home page templates.

Give your homepage more visual energy with a short, silent video or a series of still images that display at random from a pre-selected group.

Screen capture of a homepage hero video playing on the Central Michigan University website

Capabilities

  • Short videos give movement and energy to home pages.
  • A new, randomized image displays from a pre-selected group each time the home page is refreshed.
  • Both options allow units to visually convey a broader scope of their work.

Guidelines

  • Must choose one of three visual options for the Hero widget, not a combination of or deviation from the following: 
  1. Desktop video and single still mobile image.
  2. Randomized desktop and mobile images.
  3. Single, static desktop and mobile image.
  • Videos must be approved by digital strategists for length, file size, aspect ratio and brand.
  • Options for randomized still images must adhere to naming conventions detailed below, as well as the standard Sitefinity guidelines for desktop and mobile Hero images.

Instructions for hero video

1. Have a conversation with your digital strategist about video length, file size, aspect ratio and brand requirements. 

• Approved video file types: .webm .ogv .wmv .mp4 
• Maximum video file size: 2 MB
• Maximum video duration: 10 seconds
• Aspect ratio: 16:9
Screen capture of a homepage hero video playing on the Central Michigan University website
2. When your video has digital strategist approval, a video library will be created in Sitefinity. Upload the approved video to your video library under Content > Videos.
Video library location under the Content tab in Sitefinity
3. Go into the backend of the home page where the hero video will appear. If using the College Homepage Template, drag the College Hero widget to the designated hero area. If using a Department Homepage Template (CMich Landing or CMich Top Level), drag the regular Hero widget to the designated hero area.
College and Regular Hero in Content Pane

4. Click Edit in the upper right of the Hero widget.

5. For a Department Homepage Template (CMich Landing or CMich Top Level), set Template to "HomePage."

For the College Hero, set Template to "Card." 

6. Fill in the fields for Heading (Page Title/H1) and Description.

 7. If there is an existing Featured image, hover over the image and click the "X" in the upper right to remove it. 

IMPORTANT: Due to page load time and device screen size considerations, the video will not be displayed on mobile devices. That is why a mobile image must be included along with a hero video.

8. Click "Change Video." Navigate to the approved video in the library folder, select it, then click the green "Done selecting" button. 

9. Click the green "Save" button within the Hero widget. 

Backend interface of the hero video widget

Save and send

  • If you'd like to continue working on this page, but need to save your progress, click Save as Draft.​
  • If you're finished making changes to the page, and the page is ready for review, click Send for Approval.
Screen capture of the buttons for Send for Approval and Save as Draft in Sitefinity

Instructions for rotating hero images

1. Have a conversation with your digital strategist about the appropriateness of using this feature and how it fits into the broader goals and priorities of your unit and website.

2. If green-lighted, select between 3 and 7 images to be sized, optimized and uploaded to a new, dedicated random images folder in the DAM. Selection should strive for images that: 

• Tell a story.
• Capture action/"doing."
• Convey the full scope of unit's work.
• Can be cropped/sized to required dimensions without loss of meaning/impact.

3. Size each selected image to both Featured (1800x540) and Mobile dimensions (420x560).

4. Create a separate, dedicated image folder for "Rotating hero" within your unit's image library. (Content > Images)

Screen grab shows the location and contents of the Rotating Images folder within the Sitefinity DAM

5. IMPORTANT: The naming convention for each image file is key to how the widget pulls in randomized desktop and mobile images from the dedicated random images folder.

For desktop images, follow the current naming convention recommendation with the addition of: 

  • -desktop

(Example: 20200315_mtpleasant_publib_001_1800x540-desktop). 

For mobile images, follow the current naming convention recommendation with the addition of: 

  • -mobile

(Example: 20200315_mtpleasant_publib_001_420x560-mobile).

Screen shot shows example of how to name images in a Rotating hero folder
6. Go into the backend of the homepage where the rotating hero images will appear. If using the College Homepage Template, drag the College Hero widget to the designated hero area. If using a Department Homepage Template (CMich Landing or CMich Top Level), drag the regular Hero widget to the designated hero area.
College and Regular Hero in Content Pane
7. Click Edit in the upper right of the Hero widget. 

8. For a Department Homepage Template (CMich Landing or CMich Top Level), set Template to "HomePage."

For the College Hero, set Template to "Card." 

9. Fill in the fields for Heading (Page Title/H1) and Description.

10. If there are existing Featured and Mobile images, hover over the image and click the "X" in the upper right to remove. 

11. Under Image Library (for random images), click Select. Navigate to your random image folder, select it, then click the green "Done selecting" button. 

12. Click the green "Save" button within the Hero widget.

Select the Rotating hero images folder from the DAM

Save and send

  • If you'd like to continue working on this page, but need to save your progress, click Save as Draft.​
  • If you're finished making changes to the page, and the page is ready for review, click Send for Approval.
Screen capture of the buttons for Send for Approval and Save as Draft in Sitefinity
Table of Contents