Skip to main content

Hero Background Rotation and Randomization

Updated

Overview

Users can configure the Hero component to use multiple background images and either:

  • Rotate through images automatically on a set interval, or
  • Display a random image each time the page loads.

This feature is available to all user roles.

Website Review

Adding or changing multiple Hero component background images for auto-rotation or randomization will create review tasks in the same way that having multiple Hero component background images in a carousel creates review tasks.

PDF Archive

Hero carousel images using auto-rotation will be captured in PDF Archive as hero carousel images are captured.

Hero random images will only capture one image, at random, in PDF Archive.

Configuring the Hero Component

Accessing the Hero Settings

  1. From the website dashboard, navigate to the Builder.
  2. Navigate to the page containing the Hero component.
    • Or, navigate to a page and add the Hero component.
  3. Select the Hero component to open its settings panel in the right rail.

Adding Multiple Hero Images

  1. Expand the “Image/Video” section of the Hero component settings in the right rail.
  2. Click the pencil icon to select an image from the Content Library or upload a new image.
  3. Click “+ Add Background Media” to add another image to the Hero component.
  4. Click “Add Image” or the pencil icon to select an image from the Content Library or upload a new image.
  5. Repeat steps 3 and 4 to add all images to use for rotation/randomization.
  6. If the images will rotate on a set interval, arrange images in the desired order.

Option A: Automatic Image Rotation

What It Does

Use this option to advance through all added images while the user is on the page without the user manually clicking on carousel controls.

Note: Best practice does not recommend advancing content at an interval smaller than 5 seconds.

How to Use

  1. In the Hero settings, expand the “Design” section and locate “Background Options”.
  2. Select “Auto-Rotation” from “Hero Background Mode”.
  3. In the “Auto-Rotation Speed (seconds)” field, enter how long each image should display before switching (e.g., 5, 10, 15) in seconds.
  4. To see these changes on the Preview site link, click “Save & Publish”.

Behavior

  • Auto-rotation can be seen on the preview and live site. The images will not auto-advance in the Builder view.
  • The Hero component cycles through the added images.
  • Images change automatically based on the interval set.
  • The rotation repeats when it reaches the last image.
  • Website visitors can still use the carousel arrows to manually navigate the images.

Option B: Random Image on Page Load

What It Does

Use this option to show a single, randomly chosen image each time the page is loaded or refreshed.

How to Use

  1. In the Hero settings, expand the “Design” section and locate “Background Options”.
  2. Select “Random” from “Hero Background Mode”.
  3. To see these changes on the Preview site link, click “Save & Publish”.

Behavior

  • Image randomization can be seen on the preview and live site. The images will not auto-advance in the Builder view.
  • On each page visit or refresh, one image is randomly selected from the Hero image set.
  • The randomly chosen image stays fixed for that visit.
  • Randomness may result in an image being displayed several times in a row as the user refreshes or re-visits the page.

Related to

Powered by Zendesk