Article List Block

The Article List block displays a list of posts or pages with different layout options. Articles can be selected by individual posts, category, parent post or menu.

Block Options

Select by posts

To select individual articles:

Start typing the name of the article in the textbox to reveal suggestions
Select the suggested article
The article title will appear above the textbox
Add up to the maximum number of articles (option for that is under list layout)
Articles can be reordered by pressing the carets or deleted by pressing the “X”

The post selections will be overridden with any of the “Select by” options.

Select by category, tag, parent post or menu

Posts can also be selected by category, tag, post parent or menu name. Categories and tags are listed in a dropdown menu. Post parents and menus are selected similar to posts above.

To select a post parent or menu:

Start typing the name of the page, post or menu in the textbox to reveal suggestions
Select the suggested item
The post title or menu name will appear above the textbox
The selection can be removed by pressing the X next to the selection

Select by category — Categories are listed in a select menu

Select by post parent — Parent post and menu selection works similarly

List Layout Options

The following options are available:

List Alignment: Articles can be floated to the left or right of content. Alignment options are in the block toolbar.

List Header: Adds an h2 title above the list. Optionally, you can add a header block above the layout if another header type is needed.

List Layout: Articles can be displayed in a list (default), grid or carousel layout.

Number of cards per row: If the grid layout is selected, the number of cards per row should also be selected – from one to five. If no option is selected, this will default to four columns.

Number of posts to be shown: Max number of articles to display on one page.

Sort Order: How the articles will be sorted – Descending (default) or Ascending.

Sort by: How the articles will be sorted – Date (default) or Title.

List ID: Add an ID attribute to the article. This must be unique from anything else on the page.

List Class: Add extra classes to the article, for styling purposes.

List layout options — This screenshot displays a grid layout on the backend.

Article Layout Options

The following article display options are available:

Display thumbnails: Show featured thumbnail images. This is on by default.

Display thumbnail captions: Show photo captions when the thumbnail is hovered over. The caption that is attached to the media file will display.

Display Excerpts: Show the article excerpts (not recommended for grid display). This is off by default.

Top & Bottom Attribution: Name of the fields to use for top or bottom attributions – Date, Categories or Media Type.

Show logos next to title: If your posts have logos uploaded to them, you can choose to display the logos next to the title of the post. This is for grid layout only.

Article layout options — This screenshot displays a list layout on the backend.

A Note on Accessibility

All images within article lists should have alt text. The alt text can describe the image itself since the link on the images is not accessible to screen readers (screen readers access articles using the link of the article name). To edit the alt text of an image, find it in the media library and add the alt text right in the library.

Article List Examples

List layout (default) with excerpts and thumbnail captions enabled and a limit of 4 posts shown, selecting posts by categories:

Gentoo Penguins
On the Antarctic Peninsula, Scientists Witness a Penguin Revolution
Example Article from Living Bird Winter 2016
Rufous-crowned Warbler
Coffee Made in the Shade Can Be More Profitable, Thanks to Birds
Example article from Living Bird Autumn 2019
Evening Grosbeak by Melissa Penta
The Winter Finch Forecast Calls for Heavy Finch Activity
This is a basic article with a hero image and a couple of content images.
Araripe Manakin
The Araripe Manakin, Keeper Of The Spring Waters
This article features an embedded mp4 video banner, with some rich storytelling content.

Grid layout in 4 columns with a limit of 4 posts shown and thumbnail captions enabled, selecting posts by categories (note that excerpts were turned off for this layout):

Gentoo Penguins
On the Antarctic Peninsula, Scientists Witness a Penguin Revolution
Rufous-crowned Warbler
Coffee Made in the Shade Can Be More Profitable, Thanks to Birds
Evening Grosbeak by Melissa Penta
The Winter Finch Forecast Calls for Heavy Finch Activity
Araripe Manakin
The Araripe Manakin, Keeper Of The Spring Waters

Grid Carousel, selecting posts by categories:

Article lists can be floated to the left or right of content using alignment options in the block toolbar.

We recommend keeping floated article lists very basic, with only the thumbnail and title text, so it does not look cluttered. Article lists automatically pick up a list style at smaller sizes.

Article lists can also be added to the sidebar group.The example on the right shows a list layout with a limit of 2 posts with Title selected for “Sort By” and Descending selected for “Sort Order.”

Attributes enabled

List layout with the top attribute set to Date:

December 18, 2020On the Antarctic Peninsula, Scientists Witness a Penguin Revolution
December 9, 2020Coffee Made in the Shade Can Be More Profitable, Thanks to Birds
December 8, 2020The Winter Finch Forecast Calls for Heavy Finch Activity

A grid view list with the bottom attribute set to Tags:

Posts with Logos

Posts with logos should be used on wider layouts with up to four columns, or up to three columns on narrow layouts, so they are not too cluttered.

The Cornell Lab of Ornithology
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas dolor quam.
National Audubon Society
Pellentesque tincidunt sem in sapien interdum, nec maximus massa dignissim.
Wildbirds Unlimited
Curabitur ac semper augue, eu elementum urna. Vivamus at augue ut risus egestas tempor non sed purus.