The Dynamic Home template is highly configurable. It can display a carousel, image banner, related pages, article blocks, related feature groups (lists of articles) and videos.
We don't advise enabling every panel on the homepage as it can get a little unwieldy. The example below shows a carousel and image banner, which wouldn't normally be used together.
- Carousel
- Image Banner and Search
- Standard Content
- Standard Article Panel
- List Article Panel
- Related Article Blocks
- Related Video Panel
- Related Feature Panel
Carousel
The first related feature group can be displayed as a carousel. This behaves in exactly the same way as described in Main Page Content. The carousel can be hidden by selecting "No" in the "Show Carousel" option of the article extras. If set to no, the first feature group will appear as a related feature.
Image and Search Banner
If images of the "background" media type are related to the homepage, they will appear beneath the carousel.
If "Show Banner Search" is "No" in the article extras, the search will appear in the header of the homepage. If "Yes" the search will be displayed beneath the carousel, overlaying the image banner. The title of the search panel and additional text can be set in the homepage article extras.
Breadcrumb, Heading, Introduction Text and Content
The heading, introduction text and body text for the Home template are hidden unless the "Show Article Content" option in the article extras is set to "Yes".
The breadcrumb is hidden unless the "Show Breadcrumb" option in the article extras is set to "Yes".
These elements would normally be hidden on the site homepage, but you would want to show them if you were using the Home template elsewhere in your site.
Panels
A series of panels can be displayed on the homepage. The behaviour of each panel depends upon the template type the chosen article is using. The panel articles are selected using the article picker in the Home template's article extra tab.
Panels will appear in the order they are listed in the article extras. Ordering can be changed using the "Move up" and "move down" arrows.
All template types selected to appear as a panel display their heading, summary and, if they have one, first related media item, followed by a "See more" button which takes a user to the full article. The button text can be content managed by relating appropriate metadata to the article. See the Subsite Settings article for more information.
Panel Backgrounds
If nothing is configured for the panel background, a standard colour is provided by the theme.
If an image of the type "background" is related to the panel article, it will appear as the background image for the panel.
Metadata values related to the panel articles can be used to change the colour of the panel background if no background image is chosen. The metadata property that holds the colour values is set in the article extras of the home page article. These values add CSS classes to the panels that can be targeted by the site's stylesheet.
List Panels
If a panel article uses the list template it behaves as follows:
- If the list article has an image related to it, this will appear at the top of the panel
- The article heading provides a title for the panel
- The article introductory text, which can be overridden by the summary text, appears beneath the title
- The first four items configured to display in the list appear in a row beneath the summary
- Each list item provides its heading, introductory/summary text and image (if it has one)
- If a list item is also using the List template, it can be configured to display in "list" or "summary" view. Summary view behaves as already described. List view causes the list item to display a list of its own list articles instead of its summary
Related Article Blocks
Beneath the panels a series of article blocks can be displayed. Each article related to the home article appears here, ordered left to right, top to bottom, by the order set in the related content tab of the home article.
- a single article with its summary
- a list of articles with either a summary of each article in the list or, if the article in the list is also a list, a list of that article's list items
- a link to an external site or media item with optional page content. This is achieved by using the Redirect Template. The page content of the redirect article can be used to embed feeds from social media sites etc. by adding a script inline with the relevant embed code to the body text area
If a block is used to display a single article, the article title, and summary populate the block. The link button uses the article best link text and takes the user to that single article.
If a panel displays an article using the List template, the title, image and summary are taken from the articles in the list. The "list of lists" behaviour behaves in the same way as described above. The link button uses the article best link text and takes the user to the list of articles.
If a panel uses the Redirect template to show a link to a media item or external site, no image is displayed and the summary is replaced by the main page content.
The button text used in these blocks cannot be content managed.
Button Styles
The styles used by the buttons can be changed by relating metadata to the article that provide content for the blocks. The metadata property that holds the values for these styles is set in the article extras of the home article. These values add CSS classes to the buttons that can be targeted by the site's stylesheet.
For example, the "Twitter" block in the image above has a metadata value of "twitter" related to it. This changes the class of the button to
.a-panel__link--twitter:after {
background-image: url(../images/twitter-bird.png);
content: "";
display: block;
height: 20px;
margin-top: -10px;
position: absolute;
right: .9em;
top: 50%;
width: 25px;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
border: 0;
}
Related Videos
Videos related to the home article appear beneath the related article blocks. They behave as described in Main Page Content.
Related Features
All feature groups after the first (which is displayed as a carousel) appear as the final panels of the page. They behave as described in Main Page Content.
Share this page
