You are here

Hero Slideshow

Back to Wiki

The hero slideshow on pages is a block created by entering values in the Slides paragraphs field in the Page content. This can be done by clicking on the "New Draft" link on an existing Page: 

or creating new content of type Page by clicking on "Content" in the nav bar, 

then "+ Add Content",

then "Page":

Each Slides Paragraph item has these fields:

Title: the header link that appears over the slide
Image: the background image for the slide.
Subheading (optional): more descriptive task that appears the title
Links (with Title and URL). The links correspond to the buttons on each slide. Title text appears in the button, and the button will link to the entered URL. Links are optional

There is also an optional Video field on each Paragraph. This will be a looping video that appears as the background of the slide. Up to two video files can be uploaded per slide, and each file is offered as version of the video the browser will select to play. It is recommended that one .webm version and one .mp4 version of a video be uploaded for maximum browser compatibility. It is also recommended if videos are being uploaded, the Slide image uploaded should be the first frame of the video. Videos should optimally be about 15 to 30 seconds long, with no audio, and not too much larger than 5MB in filesize. The filesize can be achieved in the video encode process in several ways, but one of the most straightforward is to set the video bitrate. The formula to calculate bitrate (in kbps, or kilobits per second is this: (Filesize in megabytes (MB) / Video duration in seconds) * (1024 kilobytes (KB) / 1 MB) * (8 kilobits (kb) / 1 KB). For example, to make a 30-second video 5MB, set the target bitrate settings to be (5MB / 30 sec) * (1024KB / 1MB) * (8kb / 1 KB) = 1365kbps. 

Videos do not play at the phone size of the page, so make sure to upload an image.

The Paragraph items can be reordered, which will change the order in which they are displayed on the page. To do this, click and hold the "hamburger" icon in the upper left of a Paragraph item:

The icon will turn orange, and the mouse cursor will turn into a crosshairs. Then a Paragraph can dragged up and down to go above or below other paragraphs.