Reference

Guide

Pages

A pages select field that allows to select one or multiple related pages

The pages field allows you to select one or more related pages. It has a handy navigator to go through the entire site tree and select the pages you want

Example

fields:
  related:
    label: Related Pages
    type: pages

Field properties

Property Type Required Default Description
default mixed Default selected page(s) when a new Page/File/User is created
disabled bool If true, the field is no longer editable and will not be saved
empty mixed The placeholder text if no pages have been selected yet
help mixed Optional help text below the field
image array Image settings for each item
info string Info text
label mixed The field label can be set as string or associative array with translations
layout string list Changes the layout of the selected files. Available layouts: list, cards
max int The maximum number of allowed selected pages
min int The minimum number of required selected pages
multiple bool true If false, only a single page can be selected
query string Optional query to select a specific set of pages
required bool If true, the field has to be filled in correctly to be saved.
size string Layout size for cards
text string Main text
translate bool true If false, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.
when mixed Conditions when the field will be shown
width string 1/1 The width of the field in the field grid. Available widths: 1/1, 1/2, 1/3, 1/4, 2/3, 3/4

Limit the selection

Multiple or single mode

If you only want to select a single page, set multiple mode to false (default is true)

fields:
  related:
    label: Related Pages
    type: pages
    multiple: false

Maximum number of pages

You can set the maximum number of pages that can be selected:

fields:
  related:
    label: Related Pages
    type: pages
    max: 3

Preview images

The default (preview) image is the first image in the folder. You can configure the (preview) image for each item using the image option:

image: page.image.findBy("name", "cover")

For more fine-grained control you can set further options:

query

An image query, default page.image

image:
  query: page.children.first.image

cover

Whether or not the image will cover the available space.
Options: true, false (default)

image:
  cover: true

ratio

A freely selectable image ratio

image:
  ratio: 16/9

back

Set an image background.
Options: pattern (default), black, white

image:
  query: page.image.findBy("name", "cover")
  cover: true
  ratio: 1/1
  back: black

No image

If you don't want to show an image but the icon selected for the page, you can set the query option to false:

image:
  query: false

Kirby will then either show a default page icon or the icon defined in the page blueprint.

How to use in templates/snippets

Single page

To convert a single page to a page object, use the toPage() method:

<?php if($relatedPage = $page->related()->toPage()): ?>
  <?= $relatedPage->title() ?>
<?php endif ?>

Multiple pages

To convert multiple pages to a pages collection, use the toPages() method:

<?php
$relatedPages =  $page->related()->toPages();
foreach($relatedPages as $relatedPage): ?>
  <?= $relatedPage->title() ?>
<?php endforeach ?>