Interior page banners are the visual headers at the top of section pages like Admissions or Athletics, connected to a Resource element and gallery in Composer. This article covers the difference between fixed and adaptive banners, how to update banner images, image best practices, and troubleshooting for common issues.
đź’ˇQuick answers
- What is the difference between a fixed-height and an adaptive-height banner? Fixed-height banners crop to a set pixel height (center stays in focus); adaptive banners scale proportionally with the screen width.
- How do you tell which type of banner your site has? Resize your browser window: if only the crop changes, it is fixed-height; if the banner height also shrinks, it is adaptive.
- Updating an interior page banner image? Locate the gallery connected to the Resource element in Resources > Galleries, upload new images, add them to the gallery, re-select the gallery in the element, then publish both.
- Where do you find the exact image dimensions for your site's banners? In your Website Instructions page in the Composer page tree or your Production Branch > Style Guide.
- Should the Format setting on a banner Resource element be changed? No; changing it can break the page design. If changed accidentally, contact Finalsite Support to restore the original setting.
This article covers how to set up and manage interior page hero area in the Finalsite CMS; the visual headers at the top of section landing pages like Admissions, Athletics, or About.Â
Topics include locating your hero display dimensions in your site instructions, understanding fixed-height vs. adaptive-height hero area, updating the gallery connected to the displaying Resource element, focal point protection for mobile, accessible text overlays, and troubleshooting blurry images and layout breaks.
In this article
- Before you start
- Fixed vs. adaptive hero area
- Find your hero display specifications
- Update an interior page hero area
- Image best practices
- Troubleshoot interior page hero area
Before you start
Configuring your homepage hero area? See the companion article: Setting up your homepage hero. For image dimensions, file formats, and upload size limits, see the media guidelines series:
- Media guide part 1: Setting up your site's branding and global standards
- Media guide part 2: Image specs for every module
- Media guide part 3: Building hero areas and sliders
- Media guide part 4: Optimizing and uploading video
This article is meant to outline general recommended guidelines. Every site is unique, however, and exact dimensions for your site's custom treatments, enhancements, and directions can be found in these places in your page tree:
Fixed vs. adaptive hero areas
Interior hero areas come in two types depending on your site's design. Knowing which type you have helps you choose the right images and avoid unexpected cropping.
What if I'm not sure what type of hero area I have?Â
To identify your hero area type, try resizing your browser window while viewing the page.Â
- If the height stays the same and the image crops differently as the window narrows, you have a fixed-height area.Â
- If the height shrinks proportionally with the window width, you have an adaptive hero area.Â
- Still not sure? Finalsite Support can help!
| Hero area type | How it behaves | Best practice |
|---|---|---|
| Fixed height | Crops to a set pixel height; the center of the image stays in focus but top and bottom edges are clipped | Choose images with a strong central subject and minimal important detail near the edges |
| Adaptive height | Scales with screen size (often a 16:9 ratio); minimal cropping but composition still matters | Choose images that are visually balanced and look good at multiple screen widths |
Â
Find your hero display specifications
Interior hero display dimensions vary by design. Before uploading, navigate to your Website (or Site) Instructions page in the Composer page tree and locate the hero header image specifications. Common ratios are 3:1 or 4:1, but your site may differ. Using the wrong dimensions is the most common cause of blurry or cropped hero display.
Update an interior page hero area
The workflow for updating an interior hero area follows the same Resources and Galleries pattern as the homepage hero.
- Navigate to the interior page in the Composer page tree and open it.
- Enter Compose mode and hover over the element until the settings gear appears.
- Note the name of the gallery currently connected to the Resource element.
- Go to Resources > Galleries and locate that gallery.
- Upload any new images to Resources first, then add them to the gallery. See the article "Upload a resource" if needed.
- Add alt text to every image for accessibility.
- Return to the Resource element on the page, click Browse, and re-select the updated gallery.
- Click Save, then publish both the gallery and the page.
⚠️ Important: Do not change the Format of any interior hero area Resource elements. These are tied to your site's layout and changing the format can break the page design.
Image best practices
- Focal point protection: Keep faces and key subjects in the center 50% of the frame. Both fixed and adaptive areas will crop the outer edges on smaller screens, so anything near the edges risks being cut off.
- Match your aspect ratio: Refer to your Website Instructions for the exact dimensions. Uploading an image with the wrong ratio is the most common cause of blurry or stretched hero display.
- Accessible text overlays: Never place text directly onto the image file. Use the caption or overlay text tools built into your theme so that screen readers can access the content.
- File size: Keep hero images between 500 KB and 1 MB for fast loading without sacrificing quality. See Media guide part 1 for upload limits.
Troubleshoot interior page hero area
| Issue | Root cause | Solution |
|---|---|---|
| Hero area area is blank | Connected gallery is empty or set to private | Ensure the connected gallery has at least one image and is set to public |
| Image looks blurry or stretched | Image dimensions don't match the required aspect ratio for this hero area type | Reference your Website Instructions, then re-upload an image cropped to the correct dimensions |
| Subject is cut off on mobile | Key subject is too close to the edge of the frame | Re-crop the image so the main subject sits within the center 50% of the frame |
| Change isn't showing live | Gallery or page hasn't been published | Publish the gallery in Resources and publish the page in Composer |
| Page layout is broken after editing | Format was changed on the Resource element | Revert the Format to its original setting; contact Finalsite Support if the original value is unknown |
Comments
Please Sign in to leave a comment if you don't see the comment box below.