Setting up the homepage hero

This article walks through setting up the homepage hero (sometimes called Homepage Panels) in Finalsite CMS Composer, including updating the hero gallery in Resources, configuring the Resource element with slideshow timing, and publishing changes. It also covers Composer permissions, image and video specifications, and troubleshooting for blank hero areas, blurry images, and caching issues.

In this article

• Before you start
• Step 1: Confirm homepage permissions
• Step 2: Reference your site instructions for media specifications
• Step 3: Identify which gallery is connected to your hero
• Step 4: Create or replace media in a gallery
• Step 5: Configure the hero Resource element
• Step 6: Publish your changes
• Troubleshooting
• FAQs

Step 1: Confirm homepage permissions

Confirm edit access to the homepage before beginning.

• A minimum permission level of View, Edit, and Publish is required at either the page level or global level. Learn more in the article, "Composer permissions."
• If the Compose toggle isn't visible on the homepage, the required permission level is likely missing. Contact the main site administrator or Finalsite Support to update granular page permissions.

Step 2: Reference your site instructions for media specifications

Every Finalsite design has specific requirements for hero images and videos to ensure they look crisp on all devices.

• Navigate to the Website (or Site) Instructions page in the Composer page tree and locate the Panel Image & Video Sizes accordion to find the required aspect ratio (e.g., 16:9) and recommended resolution (e.g., 2880 x 1100 px).

Support can help: Hero image cropping and display

Looking to customize how the homepage hero image is cropped or displayed? 

Support can help tailor it to achieve the desired look. Availability may vary based on the site's design and when it was built. Learn more in the article section, "Compare cropped and full height." 

Step 3: Identify which gallery is connected to your hero

Before uploading new content, identify where the current images are stored. A gallery is typically created during implementation and connected to the hero's Resource element.

• Navigate to the homepage in the page tree and click to open it.
• Enter Compose mode using the toggle in the bottom left corner.
• Hover over the hero area until the settings gear appears, then click it to open the Resource element settings.
• Note the name of the gallery currently connected, for use in the next step.

Resources vs. Galleries: Resources is your media storage: content organized in folders. Galleries assembles those resources for display. Your page's Resource element pulls from a gallery, not a folder directly, so media must be in Resources before it can appear in a gallery.

Step 4: Create or replace media in a gallery

• Go to the Resources module, then select Galleries.
• Locate the gallery connected to the hero, or create a new one. Consider renaming it something specific like "Homepage hero 2026" to make it easier to find later.
• Make sure the media to display is already in Resources:
  • Not yet uploaded? See the article "Upload a resource."
  • Already in Resources? See "Add media into a public gallery" in the Galleries article.
• Add alt text to every image for accessibility.
• Confirm every image is the same orientation, either landscape or portrait, and cropped to the same dimensions. Mixing orientations or sizes causes the hero to resize or jump between slides.
• Drag and drop items into the order they should appear in the slideshow.

Step 5: Configure the hero Resource element

• Return to the Resource element settings on the homepage in Compose mode.
• Click the Browse button and select the updated gallery.
• To control slideshow timing, look for the Controls or Slideshow tab and adjust:
  • Transition speed: How long it takes to fade or slide between images.
  • Display time: How many seconds each image stays on screen.
• Click Save to update the element.

Step 6: Publish your changes

Review changes in Preview mode on both desktop and mobile before going live. When everything looks correct, publish the gallery in Resources and publish the page in Composer. Both must be published for changes to appear on the live site.

Troubleshooting

FAQs

1. I updated the gallery, but the old images are still there. Why?
Composer sometimes caches previous selections. Try re-selecting the gallery in the element settings and clicking Save again.

2. Why does my image look different on my phone?
Most hero sections stretch to fill the screen. Because a phone is tall and narrow while a desktop is wide, the edges of an image may be cropped. Keep the most important part of the image, such as a student's face, in the center 50% of the frame.

3. Can I change the speed of the slideshow?
Yes. In the Resource element settings, find the Controls or Slideshow tab and adjust the Transition speed and Display time.

4. Can I add a link or button to the hero images?
This depends on the design. Some support it out of the box; others may require a work order. Reference the Website Instructions for guidance.

5. How many images should I have in my hero slideshow?
Use 3 to 5 images. Too many images slow down the initial page load, and most visitors scroll past the hero before the sixth or seventh image appears.

6. Do all my hero images need to match in size and orientation?
Yes. Use all landscape or all portrait images, cropped to the same dimensions. Mixing orientations or sizes causes the hero to resize or jump between slides.