Skip to content

Kirby 4.3.0


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

What is the pages field?

The pages field is basically a select/multiselect field specialized to allow you to select one or more pages out of a given set of options. A reference to the selected pages(s) is stored in the content file of the respective model (page, user, file). It has a handy navigator to go through the entire site tree and select the pages you want.

Usage examples: Select related pages of the current page to show in a related pages widget on the frontend, select one or more articles to feature on the homepage, etc.

Basic field definition

    label: Related Pages
    type: pages

Field properties

Name Type Default Description
default 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 The placeholder text if none have been selected yet
help Optional help text below the field
image Image settings for each item
info string Info text for each item
label The field label can be set as string or associative array with translations
layout string list Changes the layout of the selected entries.
link bool true Whether each item should be clickable
max int The maximum number of allowed selected
min int The minimum number of required selected
multiple bool true If false, only a single one 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.
search bool true Enable/disable the search field in the picker
size string auto Layout size for cards: tiny, small, medium, large, huge, full
store string uuid Whether to store UUID or ID in the content file of the model
subpages bool true Optionally include subpages of pages
text string Main text for each item
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 Conditions when the field will be shown (since 3.1.0)
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)

    label: Related Pages
    type: pages
    multiple: false

Maximum number of pages

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

    label: Related Pages
    type: pages
    max: 3

Query pages

By default, the pages field lets you select pages from the complete page index. You can limit these options using the query property:

Only children of a given page

    label: Related Pages
    type: pages
    query: site.find('notes')

Only pages with a given template

    label: Related Pages
    type: pages
    query: page.index.filterBy('template', 'in', ['template-a', 'template-b'])

By default, users can also select subpages of the given selection. Use the subpages property to prevent this.

Include subpages

With the subpages property you can control whether or not you want to navigate the subpages of the given parent. The default is set to true:

  label: Select a related page.
  max: 3
  subpages: false

This will deactivate the subpage navigation and only show the first level pages (or the children of the page set in the query option).

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")

Preview image from files field of subpage

You can use the image of each subpage's files field as preview image:

image: page.myFilesField.toFile

For more examples of how to use the query language, see the guide.

Preview image from assets folder

You can also provide an image from the assets folder via a page model, for example as a fallback if the page has no images:


class AlbumPage extends Page
    public function previewImage()
        if ($image = $this->images()->first()) {
          return $image;
        if (file_exists(kirby()->root('assets') . "/images/default.jpg")) {
            return new Asset("assets/images/default.jpg");
        return false;


And then in your blueprint

image: page.previewImage

Note that a model only works for pages that share the same blueprint. For pages with different blueprints, use a custom page method instead.

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


An image query, default page.image

  query: page.children.first.image


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

  cover: true


A freely selectable image ratio

  ratio: 16/9


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

  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:

  query: false

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

Info and text

The info and text properties allow you to define what information is shown for each selected item (and in the modal). You can use Kirby's query language to query any information you need.


The text property shows the main information for the page, by default that is the page title. You can however either modify what is shown and how:

text: "{{ page.title.upper }}"
text: "{{ page.title }} | {{ page.description.excerpt(20) }}"


With the info property, you can show additional information:

info: "{{ page.images.count }}"
info: "{{ page.tags }}"


Options in the pages picker are paginated. You can set the number of items per pagination page in the picker using the limit property. The default setting is 20.

    type: pages
    label: Select an item
    limit: 10

The pages picker shows a search field by default. If you want to remove it, you can switch it off with the search option:

    type: pages
    label: Select an item
    search: false

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:

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

More information

Related articles