Agencies
Services
Content Fragment Hero Image
The Content Fragment Hero Image allows users to dynamically display hero/banner-styled images based on an image field stored in content fragment models. When a page is dynamically loaded with a specific content fragment, that fragment's image field gets displayed to the user.
To display a Content Fragment Hero Image, place the element on your page, and then configure the Properties tab.
Configuring Properties Settings
This is where you adjust settings for how the Content Fragment Hero Image will display on your page.
- Content Fragment: Select a Content Fragment on which to pull the image from.
- Display Mode:
- Specific Content Fragment: Choose a specific fragment to use.
- Dynamic Content Fragment: Choose a template (blank) fragment for use when any content fragment loads.
- Image CF Source Field: Select the source field that the image is stored in in the content fragment selected
- Hero Title CF Source Field: Select the source field that the Title is stored in in the content fragment selected
- Element Position: Top, Middle, or Bottom alignment options
- Element Value Styling: Hidden, Paragraph, H1-H6, Small, Legal
- Link Element: Allows linking to a selectable field when Checked. Can also Open in New Tab and set as either Email Address/Phone Number for auto-prefixing those links.
- Hero Description CF Source Field: Select the source field that the Description is stored in in the content fragment selected
- Element Position: Top, Middle, or Bottom alignment options
- Element Value Styling: Hidden, Paragraph, H1-H6, Small, Legal
- Link Element: Allows linking to a selectable field when Checked. Can also Open in New Tab and set as either Email Address/Phone Number for auto-prefixing those links.
- Variation: Typically just Master, but supports fragment variations as well.
- ID and Class: Set an ID and Class to be applied to the component
Examples
Below are examples of a Content Fragment Hero Image built by creating banners in the Container [Root] of a page with a few differing options for display.
