Pages can have any number and kind of images, videos, documents or other files. Those files are stored directly in the page's folder.
Example page with files
Supported file types
You can access the page's files using handy methods for each common file type:
|Audio||aif, aiff, m4a, midi, mp3, wav||
|Code||css, js, json, java, htm, html, php, rb, py, scss, xml, yaml, yml||
|Documents||csv, doc, docx, dotx, indd, md, mdown, pdf, ppt, pptx, rtf, txt, xl, xls, xlsx, xltx||
|Images||ai, avif, bmp, gif, eps, ico, j2k, jp2, 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
Manually uploading files
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.
Uploading files via the Panel
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.
Linking to files in your content
Files can be linked or embedded in any field with KirbyTags or used in templates to build complex galeries, download sections, etc.
Rendering files in your templates
Kirby provides many ways to render files in your templates. Here are some examples:
Fetching all images of a page
Fetching a single file
Fetching files from site
Fetching all images from subpages
Filter images by template
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.
The default sorting order of files is based on their order in the file system. To retrieve files in the order they appear in the Panel, you can use
sort is the field that stores the sorting number from the Panel.
Adding meta data to your files
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.
Example meta data file
Accessing meta data in templates
Meta data is available from each
$file object in your templates and snippets.
Meta data blueprints for the Panel
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:
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 files blueprint options
Finally, a meta data blueprint can have a set of fields. You are free to define any number of fields and the same field types as in page blueprints.