Related articles in the Impact theme appear as full width panels below the article content, rather than as links in the related content area.
You can change the style and behaviour of a panel by adding values from the "Panel Type" metadata property to the panel article. This property is set in the subsite configuration using the "Panel type property" asset picker, see the Metadata Styles and Text Overrides article for more information.
In this documentation "panel article" refers to the related article providing content for the panel.
Standard Article Panels
When one article is related to another, the standard behaviour is for the related article to appear in a full width panel. The panel includes the panel article's heading, followed by the article summary. If an article has a related image, it also appears in the panel.
Some panels display a "See more" button beneath the summary which acts as a link to the full article.
If a panel article includes a background image, this image will appear as a background to the panel. The article content will have a suitable background colour to maintain text colour contrast.
Creating Standard Panels
Create an article for your panel content and optionally add images and background images. Relate it to the article you'd like the panel to appear on.
Article Body Panels
Body panels behave in a similar way to standard article panels. They display their heading at the top of the panel, first related image, and can have a background image.
Body panel articles never display their introductory or summary text, and never include a "See more" button. Instead, if the article providing content for the panel has body content, that is output in the panel. Body content can include headings, tables, styled text and inlines.
If the the panel article doesn't have any body content or related images, only the heading is shown.
Creating Body Panels
To create a body panel, relate the "body" panel type metadata value to a default article. Optionally add body content, a related image, and a related background image. Relate the panel article to the article you would like the panel to appear on.
List Article Panels
A panel article using the List template displays it's article heading and summary in the same way as standard related articles.
The first four items configured to display in the list appear in a row beneath the summary. The list items display their heading, related image (if present) and either their summary or further list items, depending upon the configuration of the item in the list.
The headings and images of list items act as links to the corresponding article. A "See more" button appears beneath the list items, taking a user to the full list.
The background of a list panel will either be a background image related to the list article or a default colour supplied by the theme.
Creating List Panels
Create an article using the List template for your panel content and optionally add images and background images. Relate it to the article you'd like the panel to appear on.
News Block Panels
The news blocks panel displays it's article heading and summary in the same way as standard related articles, followed by a series of blocks. Blocks are articles related to the news block panel article. If there are no blocks, only the heading and summary of the panel itself are displayed.
The panel initially displays up to three blocks, with a link to "See More" should there be more than three blocks available. Clicking "See More" reveals all available blocks.
Each block includes the article's heading, which acts as a link to the full article, followed by its article summary. If a block article has a related image, it will appear above the block's text.
If the article providing content for a block uses the List template, it's configured list items will appear as links in the block, beneath the article summary.
At narrow widths (ie mobile devices) the blocks within the panel turn into a carousel. The carousel includes left and right arrows which allow scrolling. There is no "See More" button as all available blocks are included as panels in the carousel.
Creating News Block Panels
To create a news block panel, relate the "newsblocks" panel type metadata value to a default article. This panel article will display the articles related to it in blocks. Relate the panel article to the article you would like the block panel to appear on.
Each article providing content for a block displays it's first related image, heading/link text, introductory/summary text, and list items (if using the List template).
Parallax Panels
The parallax panel displays it's article heading and summary in the same way as standard related articles.
It can include any number of blocks (or no blocks), each of which displays a heading, summary, optional image, link to the full article and list items (if using the List template), in the same way as news block panels.
Blocks in the parallax panel are displayed in two columns. The panel is designed to have a background image, which appears fixed in place, giving the parallax scrolling effect.
At narrower widths blocks in the parallax panel are arranged in a single column.
Creating Parallax Panels
To create a parallax block panel, relate the "parallaxnewsblocks" panel type metadata value to a default article. This panel article will display the articles related to it in blocks. Relate the panel article to the article you would like the parallax block panel to appear on.
Each article provides content to a block in the panel in the same way as the block panels.
Relate a background image to the panel article to use it as the background over which the blocks will scroll.
Squares Panels
The squares panel displays it's article heading and summary in the same way as standard related articles, followed by a series of squares, each of which is designed to display an image.
Each row in the panel is optimised to display four squares. There is no maximum number of items that can be added as squares in the panel, with squares automatically organised into a grid four squares wide.
On mouseover a square in the panel reveals the heading and summary of the article that is providing content for that square. The whole square, including the image, acts as a link to the article.
At mobile widths the squares turn into a carousel, in a similar way to news block panels.
Creating Squares Panels
To create a squares panel, relate the "squares" panel type metadata value to a default article. This panel will display the articles related to it in squares. Relate the panel article to the article you would like the squares panel to appear on.
Relate an image to each square article.
Squares display their article heading and summary. Take care over the length of the introductory/summary text as space is limited and very long text will affect the appearance of the squares.
Tabs Panels
The tabs panel displays it's article heading and summary in the same way as standard related articles, followed by a series of tabs, each of which reveals article content beneath the row of tabs when clicked.
Any number of tabs can be displayed, and these will be organised into a single row. The content of each tab is provided by the target article as follows:
- The article's heading provides the title text for each tab, and is displayed in the tab content area when that tab is selected
- The article's summary appears beneath the title
- If an article has an image, a suitably sized version appears next to the summary
- An icon for the tab
- A button to view the full article with the text "See More"
A default icon for each tab in a panel can set by the page on which the panel appears, rather than setting each tab icon individually.
Additional styles can be applied to the panel using metadata values reflected in the site's CSS.
At narrow widths (ie mobile devices), tabs are stacked vertically and form an accordion style menu. Tabs can be opened and closed by clicking on them, showing and hiding the tab content.
Creating Tabs Panels
To create a tabs panel, relate the "tabs" panel type metadata value to a default article. This panel will display the articles related to it in a series of tabs. Relate the panel article to the article you would like the tabs panel to appear on.
Relate an image of the "rollover image" media type to the article on which the tabs panel is going to appear. This provides the default icon for all of the tabs in all of the panels on that page.
The icons of individual tabs can be set by relating a "rollover image" to the article that provides the content for that tab.
Additional Styling and Content Managed Button Text
As well as the metadata that changes the type of panel (body, newsblocks, parallaxnewsblocks, squares and tabs), there are three other elements that can be controlled by metadata. These are:
- All of the "See more" buttons and links
- The style of the panel
- The style of items in the panel (eg the blocks in the news block panel)
Metadata values related to the panel articles and panel item articles are output as CSS classes. These can be targeted by your site skin and are generally used to change colours and the alignment of text. See Metadata Styles and Text Overrides for more information.
Share this page
