Horizontal content lists
What is a horizontal content list?
Horizontal content lists are used to display lists of recent events, articles or blog posts on panel pages.
There are two types of horizontal content lists:
- articles and/or blog posts
- events.
Use a horizontal content list when:
- you want to display a teaser list with round images of the 3 most recently published articles, blog posts or upcoming events on a panel page.
Horizontal content lists shouldn't be used when:
- you want to link to other content types, such as basic or structured pages – consider using a card grid or grid of links.
How to create a horizontal content list
Horizontal content lists can be created by:
- site builders.
Use the in-place editor to create a horizontal content list:
- Click 'Customize this page' in the black Drupal menu at the bottom of the page, and then click the plus icon (+) in the blue box at the top of the page.
- Select 'View panes' from the side menu. You can then filter items in the list by typing 'horizontal' into the 'Quick filter' box.
- To add a list of articles or blog posts, select 'View: Horizontal content list: Latest'. To add a list of events, select 'View: Horizontal content list: Latest: Event sessions'.
- If you want to filter your list using a taxonomy term, enter a taxonomy term ID in the 'Content: Has taxonomy term ID (with depth)' field.
- Select 'Article' or 'Blog post' from the 'Type' drop-down menu. This menu won't appear for events. Hold 'Ctrl' while clicking to select multiple.
- Select a sorting option from the 'Sort by' drop-down menu.
- Click the 'Finish' button to add the horizontal list to the panel page.
- Apply a section style to the panel to finalise the layout.
- Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.
How to edit a horizontal content list
Horizontal content lists can be edited by:
- site builders
- site coordinators
- editors.
To edit a horizontal content list, follow the instructions for editing panels on panel pages.
Best practice
- Use taxonomy terms to group articles and events into related categories. You can then use the taxonomy term ID to control which items appear in your horizontal content lists.
- Display a maximum of 3 items in your list.
Fields
Complete as many optional fields as possible to provide the best user experience.
Articles and blog posts
Field name | Required field? | Function |
---|---|---|
Content: Has taxonomy term ID (with depth) | No | Filters articles or blog posts using a specified taxonomy term ID. |
Num items | No | Determines the number of items that will appear in your list. Default option is 3, which is the recommended number to balance the display. |
Offset | No | Skips a defined number of items before selecting the first article or blog post that will be displayed in the list. Used when listing the first item in a different component above to avoid listing twice. Default option is 0. |
Type | No | Determines the type of content that will be displayed. |
Sort by | No | Displays articles or blog posts by publication date, post date, or alphabetically by title. |
Order | No | Displays articles or blog posts in ascending or descending order. |
Events
Field name | Required field? | Function |
---|---|---|
Content: Has taxonomy term ID (with depth) | No | Filters events using a specified taxonomy term ID. |
Num items | No | Determines the number of events that will appear in your list. Default option is 3. |
Offset | No | Skips a defined number of events before selecting the first event that will be displayed in the list. Default option is 0. |
Sort by | No | Displays events according to start date or title. |
Order | No | Displays events in ascending or descending order. |