Images, videos, documents…

Pages can have any number and kind of images, videos, documents or other files. Those files are being stored directly in the page folder.

/content/1-projects/project-a
/content/1-projects/project-a/project.txt
/content/1-projects/project-a/image-1.jpg
/content/1-projects/project-a/image-2.jpg
/content/1-projects/project-a/image-3.jpg
/content/1-projects/project-a/project-info.pdf
/content/1-projects/project-a/project-data.xls
/content/1-projects/project-a/some-video.mp4
…

File types

Type Extensions Api method
Images jpg, gif, png, svg, ico, tiff, bmp, psd, ai $page->images()
Documents md, pdf, doc, docx, xls, xlsx, ppt, csv, rtf $page->documents()
Archives zip, tar, gz, gzip, tgz $page->archives()
Code js, css, html, xml, json $page->code()
Videos mov, avi, ogg, ogv, webm, flv, swf, mp4, mv4 $page->videos()
Audio mp3, m4a, wav, aiff, midi $page->audio()

Files can be linked or embedded in any field with Kirbytags or used in templates to build complex galeries, download sections, etc.

Adding meta data to your files

Files in Kirby can have their own content file with additional meta data, such as image captions, photographers, notes or anything else you want to store with a file.

A meta data file is stored next to the file and named after the following pattern:

{filename}.txt
File Meta data
lake.jpg lake.jpg.txt
infosheet.pdf infosheet.pdf.txt
numbers.xls numbers.xls.txt

Meta data files follow the same scheme for fields like the main text files for pages. Like with pages you are not limited to any number of fields. The possibilities to add meta data to files are endless.

Here's an example for a meta data file:

/content/projects/project-a/lake.jpg.txt
Title: A day at the lake
----
Caption: We spent an entire day at the lake. The weather was nice.
----
Photographer: Ansel Adams' cat

Accessing meta data in templates

Meta data is instantly available from the $file object in your templates and snippets.

<?php if($image = $page->image('lake.jpg')): ?>
<figure>
  <img src="<?= $image->url() ?>" alt="<?= html($image->title()) ?>">
  <figcaption>
    <span class="caption">
      <?= html($image->caption()) ?>
    </span>
    <span class="photographer">
      <?= html($image->photographer()) ?>
    </span>
  </figcaption>
</figure>
<?php endif ?>