Listing Block

Listing displays real site content from a chosen location, then lets you control how results are arranged, filtered, sorted and paginated. The live demo above is a compact Grid gallery built from Image items stored in Luna Gallery.

What the Listing block does

Use one Listing whenever a collection should stay synchronized with CMS content. New matching items appear automatically; items that no longer match the source, type or fixed filters disappear automatically.

Choose a display type

• Stack — stored as the list variation. Cards appear one per row, with media and text side by side on wide screens and stacked on small screens.

• Grid — uses two, three or four equal columns. It is the clearest choice for repeatable cards such as articles, services or team profiles.

• Masonry — preserves mixed image proportions and fills vertical gaps. It automatically uses Image only cards and is ideal for editorial galleries.

• Carousel — shows one to five slides at a time and adds optional arrows, dots, looping and autoplay. Pagination settings do not apply to this variation.

Grid and Masonry reduce columns automatically: a three-column desktop layout becomes two columns on tablet and one column on narrow mobile screens. Stack becomes vertical on mobile.

Choose exactly what content is listed

Content Path and Content Type solve different parts of the query. Content Path defines where Luna searches; Content Type defines what kind of item is allowed. Use either one alone or combine both.

Limit results to one folder

In Content Source, choose Browse and select the folder. Luna saves a path such as /news or /gallery and lists only direct children of that location. Use Clear to return to the entire site.

Do not add a trailing slash. A folder path is the cleanest way to isolate one gallery, portfolio, team or resource library.

Limit results to one content type

Open Content Type and choose one exact type such as Pages, Images, Files, Folder, Docs or Article. All content intentionally leaves the type empty and mixes every matching type.

For a strict query, combine both settings: for example, Content Path /gallery plus Content Type Images. The block will then show only Image items that are direct children of that folder.

Important: Content Type is its own setting. Do not recreate it as a fixed portal_type filter.

Pre-filter content with fixed filters

Fixed filters are author constraints stored with the block. Visitors do not see or change them. Click Add filter, choose an indexed field, select a valid operator, then provide the value.

Examples: Tags contains design; Author equals a selected author; Reading time is greater than 5; Publication date is newer than a chosen date. Multiple fixed filters narrow the same result set.

Add visitor-facing filtering

Public Filters are controls rendered above the results. They are separate from fixed filters: visitor choices update the visible result set and URL state, but do not rewrite the block configuration.

Enable Search for free-text discovery. Add up to eight public facets and choose Horizontal for a compact toolbar or Vertical for a filter panel.

Filter by Tags

Choose the indexed Tags field, set the visitor label, decide how many values are shown and their order, then optionally display tags as chips. Tags are multi-value, so visitors can narrow a collection without changing its folder or content type.

Filter by indexed custom metadata

1. In Manage Site → Content Types, create or edit the exact custom content type used by the Listing.

2. Add a new field such as Category, Region, Difficulty or Featured. Use a filterable field type such as text, list of values, boolean, integer or date, then enable Indexed for that field.

3. Add values to the content items and return to the Listing. Select that exact custom content type in Content Type; indexed custom fields are exposed only when a single type is selected.

4. Add the new field either as a Fixed Filter for an invisible author rule or as a Public Filter for a visitor control. If the field is not indexed, it will not appear in the field picker.

Build a gallery from a folder

1. Create a Folder dedicated to the gallery and upload every photograph as an Image item inside it.

2. Open the folder Settings and enable Exclude from navigation. The folder remains queryable by Listing, but it will not be added automatically to the site navigation.

3. Add a Listing, set Content Path to that folder and Content Type to Images.

4. Choose Masonry for mixed proportions, Grid for consistent cards, Carousel for a slideshow, or Stack when each image needs more accompanying text. Use Image only cards and disable item links if the gallery should not open individual Image pages.

Sorting, pagination and performance

Sort by a real sortable field and choose ascending or descending order. Infinite loads another batch continuously; Pages exposes page controls. Max Items limits the whole result set, while 0 means uncapped. Keep Page Size between 1 and 24 and use a unique pagination key when multiple listings appear on one page.

Style the results

Properties controls the query, layout and content shown on each card. Style controls the visual treatment of the Listing surface and its supported parts. Configure content first, then refine spacing, image ratio, card appearance, borders and hover states.

Accessibility checklist

• Keep filter labels explicit and preserve visible keyboard focus on search, facets, pagination and carousel controls.

• Give every meaningful gallery image useful alternative text on its Image item.

• Do not rely on color alone for selected filters; verify readable empty, loading and no-results states.

Common mistakes

• Querying the whole site when the collection belongs to one folder.

• Leaving Content Type on All content and expecting custom indexed fields to appear.

• Confusing fixed pre-filters with visitor-facing public filters.

• Styling cards before the source, field indexes and content model are correct.

Quick recipe

Choose the folder, choose one content type, add fixed author constraints, expose only useful public filters, select the matching display type, and verify the real results at desktop, tablet and mobile.