Pages can have any number and kind of images, videos, documents or other files. Those files are stored directly in the page's folder.
Supported file types
You can access the page's files using handy methods for each common file type:
|Archives||gz, gzip, tar, tgz, zip||
|Audio||aif, aiff, m4a, midi, mp3, wav||
|Code||css, js, json, java, htm, html, php, rb, py, scss, xml, yml||
|Documents||csv, doc, docx, dotx, indd, md, mdown, pdf, ppt, pptx, rtf, xl, xls, xlsx, xltx||
|Images||ai, bmp, gif, eps, ico, jpeg, jpg, jpe, png, ps, psd, svg, tif, tiff, webp||
|Videos||avi, flv, m4v, mov, movie, mpe, mpg, mp4, ogg, ogv, swf, webm||
Other file types are of course also supported.
Files cannot only be uploaded to a page, but also to the site object, i.e. directly into the
/content folder. To upload images to the site object in the Panel, you have to create a files section in the
You can add/upload files to a page manually by placing it into the corresponding page folder.
Note that if you upload files to a page and want to use them later in the Panel, you have to define files sections in your blueprints. Otherwise, these files will not show up.
You can upload files via the Panel to pages that allow file uploads. To upload a file in the Panel, click on the
Add button above the files section and select a file from your file system. If the file validates, it will be uploaded.
Files can be linked or embedded in any field with KirbyTags or used in templates to build complex galeries, download sections, etc.
Kirby provides many ways to render files in your templates. Here are some examples:
Fetching all images of a page:
<?php foreach($page->images() as $file): ?> <img src="<?= $file->url() ?>"> <?php endforeach ?>
Fetching a single file
<?php if($file = $page->file()): ?> <?= $file->filename() ?> <?php endif ?>
Fetching files from site
<?php foreach($site->images() as $file): ?> <img src="<?= $file->url() ?>"> <?php endforeach ?>
Fetching all images from subpages
<?php foreach($page->children()->images() as $file): ?> <img src="<?= $file->url() ?>"> <?php endforeach ?>
Filter images by template:
<?php foreach($page->images()->template('gallery') as $file): ?> <img src="<?= $file->url() ?>"> <?php endforeach ?>
These are just some basic examples to give you an idea. You can filter and find files by type, template, by their meta data etc. More information on the available file and files methods in the Reference.
A meta data file is stored next to the file and named after the following pattern:
|Media file||Meta data file|
Meta data files follow the same scheme for fields like the main text files for pages. Like with pages, the number of fields is not limited. The possibilities to add meta data to files are endless.
Meta data is instantly available from each
$file object in your templates and snippets.
Meta data fields for files to be used in the Panel are defined in file blueprints. They are stored in
Meta data blueprints are assigned to a files section using the
A typical files blueprint looks like this:
title: Image accept: mime: image/jpeg, image/png, image/svg+xml fields: alt: label: Alt Text type: text width: 1/2 required: true link: label: Link type: url width: 1/2 caption: label: Caption type: textarea
The title is required. It will appear in the file view to indicate the selected template for the current file. The template name can be used to filter files in your controllers/templates.
A meta data blueprint can contain different options to define what sort of files can be uploaded etc. For details see field types as in page blueprints.