Gallery display

The gallery display is an image-forward card grid.

Each card leads with the item’s thumbnail, then the title, a row of tags (or other tag fields), and a short description. When an item has a url, the whole card is clickable.

A gallery from YAML¶

A .yml file is the quickest way to hand-curate a gallery. Give each entry a thumbnail to lead with and a url to link to (see the item fields):

:::{listing}
:source: yaml
:path: ../links.yml
:display: gallery
:::

A gallery from local pages¶

The same display works over your own pages. Any post with a thumbnail in its frontmatter becomes a card, and the card links back to the page:

:::{listing}
:path: ../posts/*.md
:display: gallery
:limit: 6
:::

Items without a thumbnail still get a card, minus the image. Descriptions are truncated to keep the grid even; use the summary display when the full text matters.

Set the number of columns¶

By default the grid is responsive (1 column on phones up to 4 on wide screens). Pin it to a fixed count with :grid-columns::

:::{listing}
:source: yaml
:path: ../links.yml
:display: gallery
:grid-columns: 2
:::

Filter it live¶

Filter cards as you type with searchfilter. The gallery uses MyST’s built-in card, whose renderer drops custom classes, so point it at .myst-listing-gallery .myst-card instead of .myst-listing-item:

:::{searchfilter} .myst-listing-gallery .myst-card
:::

:::{listing}
:source: yaml
:path: ../links.yml
:display: gallery
:::