The Resource element places media from Resources onto Composer pages in List, Grid, Slideshow, or Single format, including tightly-fixed homepage hero settings that should not be changed without the Site Instructions. This article covers homepage and interior page settings, format options, and the homepage warning.
💡Quick answers
- Updating the homepage hero image or video? In the homepage Resource element settings, click Browse to pick a resource or gallery from Resources > Galleries. Do not change the Format setting.
- Why shouldn't Resource element settings on the homepage be changed? Homepage Resource elements have fixed settings tied to Site Instructions. Changing the Format or other settings can break the homepage. Always check Site Instructions first.
- Where is the format switched on an interior page? In the format buttons at the top of the element settings. Format switching is only available on interior pages, not the homepage.
- Can a slideshow scroll automatically? Yes. Enable Autoplay in slideshow controls and set Show each slide for [X] seconds. User controls (dots/arrows) or a Play/Pause button may also be required.
- Why don't .xlsx or .docx files show thumbnails in Grid format? Only PDFs, images, and videos render thumbnails in Grid format. For other file types, use List format so the file downloads when clicked.
What are Elements?
Elements are the fundamental building blocks of your Composer pages. Learn more about how elements work in the article, "Understanding elements" and read about each of the 5 tabs in the element library: Standard, Module, Layout, Social, and Shared.
Resource elements provide a way to place media from resources onto Composer pages. This article will show you all of the different options for working with Resource Elements both on your homepage and interior pages.
In this Article
Resource elements on homepage
Your homepage has Resource Elements already in place with very fixed settings that should only be adjusted according to your Site Instructions.
Important Note
Follow your Site Instructions for guidance on any settings that can be adjusted on Resource Elements on your homepage. It is possible you may be limited to clicking Browse inside your homepage's Resource Element settings when you need to connect a new Gallery or Resource item.
Update your homepage hero media
Locate the Browse button in your homepage Resource Element settings to search for a specific resource or gallery within Resources > Galleries. You can even upload a new resource and display it in this element.
Learn more about how to add or replace the media in your homepage's hero panel in the article, "Display images in your homepage's hero section."
Resource elements on interior pages
Resource elements can be placed onto interior pages and customized with a wide variety of different settings to display images just the way you would like them! You can even change the Format of your Resource elements, but only on interior pages.
Change your Resource element to display in different formats: List, Grid, Slideshow, or Single.
Resource element settings
⚠️ Important warning on homepage Resource elements
Want to configure the Resource element settings on your homepage?
- Go first to your Website Instructions before considering an adjustment of any of the options below.
- Do not change the Format of a Resource element on your homepage! They are set that way for a reason.
- Configuring any homepage Resource elements other than what is suggested in your Website Instructions may result in a broken homepage.
- Learn more in the article, "Display images in your homepage's hero section."
In addition to the common element settings, the Resource element includes the following configuration options:
Name: Display the name of the gallery as part of the element display.
Description: Display the description of each gallery in the element display.
Display Resource: Choose to display the filename or the title of the resource, or none. If "Title" is chosen in grid or slideshow view, you may opt to show it above or below the resource.
Description: Display the description of each resource in the element display.
Autoplay: Enable this option to make the audio play automatically when it loads, rather than waiting for the user to press play.
Closed Captions: If a closed caption file is included for the audio in Resources, enable this option to display the captions.
Loop: With this option enabled, the audio will return and play from the beginning after it reaches the end. If disabled, nothing will happen after the audio ends.
Resolution up to: The choices are 4K Ultra HD (2160px), Full HD (1080px), HD (720px), and SD (480px), but by default the element will display the video at the optimal resolution for the video and the screen size.
Show Controls/Hide Controls: Enable “Show Controls” to allow users to pause and play the video, mute and control volume, and skip to a specific point in the video. “Hide Controls” will not allow any of this functionality, so “Autoplay” is required when controls are hidden.
Autoplay: Enable this option to make the video play automatically, rather than waiting for the user to press play. If Autoplay is selected, the "Muted" and "Plays inline on mobile (iOS)" options are required.
Closed Captions: If a closed caption file is included for the video in Resources, enable this option to display the captions.
Loop: With this option enabled, the video will return and play from the beginning after it reaches the end.
Muted: This option automatically mutes the video. If the “Show Controls” option is also enabled, users can choose to unmute it.
Plays inline on mobile (iOS): By default, a video viewed on an iOS (Apple) device will open in a lightbox and block out the rest of the page when viewed. With this option selected, the video will instead play as part of the page.
Display Breadcrumbs (Grid only): The element will display "breadcrumb" links to any collections the currently selected one is underneath.
Scrolling (Slideshow only): Slideshow scrolling may be vertical or horizontal.
User control type (Slideshow only): Users can control the slideshow using dots, arrows, neither, or both.
Autoplay (Slideshow only): The slideshow will scroll automatically. This is required if no user controls are selected.
Play/Pause button (Slideshow only): Adds the option to pause and resume playing a slideshow when slideshow autoplays.
Show each slide for [X] seconds (Slideshow only): When the slideshow autoplays, choose the length of time each slide will be shown.
Show [X] items per slide (Slideshow only): Choose to show one or more than one resource on each slide of a slideshow.
Transition effect (Slideshow only): The transition effect may be slide or fade.
Order Resources/Galleries by: Choose "Alphabetical (A-Z)" to display resources in alpha order by Title or Filename, depending on which you've chosen for "Display Resource" above. Otherwise, display resources in "Gallery Order," the order they appear in Resources.
Show Gallery (List and Grid only): Choose to show galleries before or after resources (if both resources and galleries are set to display in the element).
Display Resource Type Icons (List only): An icon for each type of file will be shown next to the file name.
Display Resources (Grid only): In Grid format, you may either display resources inline or as thumbnail links. Displaying resources as thumbnail links will link the smaller version of the image to the full-size image, in a popup or a Single-format Resource element on the same or a different page.
Important Note
PDFs, Images, and Videos will display thumbnails; Other file types, such as .xlsx or .docx, will not display a thumbnail. For these file types, it's better to use a list format where the file will download when clicked on (according to browser rules).
Show [X] columns wide (Grid only): Choose to display resources in up to five columns.
Show a maximum of [X] resources (Grid only): Specify how many resources will appear on each page. If there are more than the maximum number of resources in the selected gallery, the grid will be paginated. Tip: Choose a number here that is compatible with the number of columns you have to display, so that a full row will be displayed at the bottom of the grid.
Ignore URL Parameters: If this option is selected, the resource displayed in the element by default will remain even if user-selected criteria would normally override it.
Popup/Page/Element: If resources are linked, choose to display the full resource in a popup or a Single-format Resource element on the same or a different page.
Display slideshow controls in pop-up: Choose to display arrows so users can scroll through the resources in the element from the popup window.
Using the Resource element to display a single resource functions exactly as the dedicated Image element and Video element, with the settings outlined in the linked articles. For all other file types, the only options are whether to display the filename or title and whether to ignore URL parameters.
Comments
Please Sign in to leave a comment if you don't see the comment box below.