List and filter your contents

The Content list block shows your contents as cards, filtered and paginated. This article teaches you to choose what the list shows, to build its card and to offer filters, a search and pagination to your visitors.

Add a list

1. Open in the editor the page that will hold the list, or a template. Add a block explains how to insert a block.
2. Add the Content list block.
3. In the Settings tab of the sidebar, Query panel, leave Query source on Content type.
4. Under Content types, check the types to list, for example Projects. The list fills with their contents.

A list carries a List body, which arranges its cards in a grid or in flex. The list body carries an Item template: the card repeated for each content. The list body accepts three other blocks, described below: Exposed filters, Search and Pagination.

As long as no type is checked, the panel shows This list has no source yet. The list shows nothing on the site. This is the state of a list placed by a catalog creation: it is laid out, and you choose what it lists.

Choose what the list shows

The Query panel sets the content of the list.

Link your contents to each other details the sources Reference and Siblings.

Give each type a card

1. Check at least two types under Content types, then turn on Different template per post type.
2. Duplicate the Item template as many times as there are types.
3. On each card, Post type assignment panel, choose the type in This template applies to.

The card left on Default (fallback) serves the types that do not have their own.

Choose the language of the list

On a multilingual site, Content language decides which language the list draws from. The setting appears only from two languages.

The language holds from one page of the list to the next, when the visitor filters and when they search in the list. A content that has no language is always listed.

Build the card

The Item template is the card repeated for each content. A new card carries two blocks: a level 2 Heading that shows the title of the content and leads to it, then the Post excerpt.

You add to the card the blocks you want. Each content shows its own values in it. To find the fields of the listed type in the inserter, first select a block of the card. Show the data of a content explains how to show a title, a date or a field.

In the editor, these two blocks show a preview, marked Preview (will use the actual post media). On the site, each card shows its own. A content with no featured media shows none: the following blocks move up.

A video media is set in their Video settings panel, for all the cards: On hover animates each card when the pointer is on it.

Mark the card of the page being read

When a list shows the page the visitor is reading, the card of that page takes the Active state. Style it in the Styles tab of the card. To also change what it contains, turn on Pass the active state to children: its blocks take the Active state with it.

Set the link of the card

A new card leads to its content in two ways. A click anywhere on its surface opens it, with no address written in the page. Its title is a real link, the one that search engines and the keyboard follow.

The link of the card is set in its Link panel, Settings tab.

On a hidden card, Ctrl+click opens the content in a new tab. A click on a link in the card, like its title or a button, follows that link.

Offer filters

The Exposed filters block lets your visitors narrow the list. Add it in the List body, then in its Exposed filters panel check the filters to offer.

Each checked filter has its Order, which places the filters among themselves. A reference also has its Input type: Dynamic (auto) or Always dropdown.

Several values checked in the same filter widen the result: Nike or Adidas. Two different filters narrow it: Nike and Running.

Add fields to a type explains how to mark a field Filterable or Sortable.

Write a named range

A price or an area has no list to check. A named range creates one.

1. In the Named ranges group, click Add a range.
2. In Label shown to visitors, write the range, for example Under €200,000.
3. In Field, choose the field, for example Price.
4. In Condition, choose the comparison.
5. In Value, enter the number, for example 200000. For a range between two bounds, enter two values separated by a comma: 200000,400000.

The Condition list offers only the comparisons for the type of the chosen field. A range belongs to the page that holds it: duplicating the page duplicates its ranges.

Sort without losing content

A sort never removes a content from the list. Contents with no value for the field go last, in both directions. Default order brings the list back unsorted.

The chosen filters and sort stay applied from one page of the list to the next. As long as Hide navigation from search engines (AJAX) is off, they are written in the address with the page number, whether the list is on a page or in the template of a content. The address can be shared as is. A filtered address names the unfiltered page as the reference address for Google. With AJAX navigation, the address does not change.

Add a search

The Search block goes in a list or on its own, anywhere on the site, for example in the header. Its Search settings panel offers a Behavior depending on that location.

On its own and in Classic mode, the block carries Search the current post type, turned on by default. It searches the type of the page being viewed. On the home page, it searches the whole site. Turned off, it always searches the whole site.

A block moved to where its mode does not exist goes back to Classic. The block’s field and button cannot be changed, but they are styled like form fields. Each search is recorded in your statistics.

Paginate the list

The Pagination panel of the list sets the number of results. Add the Pagination block in the List body so the visitor can move from page to page.

The Pagination block has its Display setting: Numbered pages, with Show first and last page links checked by default, or Previous / Next, the arrows only.

In both modes, the navigation and the filters work with the keyboard. A screen reader announces the number of results after a filter and the page reached, for example “Page 3 of 7”.

Set the empty list

The Empty state panel of the list sets how a list with no result is displayed. When there are no results: Show a message, by default, with the text of your choice in Message, or Hide the list.

A list that carries a search or filters keeps its controls visible even when empty. Only a list with no controls and no results disappears.

See also

• Link your content together
• Show a content’s data
• Add fields to a type
• Choose the look with templates