How can I modify my default file/image template?

The CMS Questions
1

Hi there,

I would like to modify the default blueprints/file/image template, how can I do this and where should it be placed within the templates folder?

I would like to allow .mp4 to be used as the cover for each of my projects. So I need to be able to modify the file template. Here’s my code:

<?= $project->files()->findBy("template", "cover") ?>

2

There is no default file blueprint, you would have to create one in /site/blueprints/files

The image.yml file blueprint is in the same folder in the Starterkit.

You probably want to create a new blueprint if you want to filter by cover…

3

Thank you. I’ve done this. But how can I modify this? Where should image.php (or cover.php) be placed in the templates folder?

4

As I wrote above, all files blueprints go into /site/blueprints/files, unless you specifiy a another location.

Not in the templates folder!

5

yes, but i’d like to be able to have .mp4 as covers for my projects. If I cannot connect a template to the /cover.yml file then it just renders the video as text…

6

Hm, maybe we are misunderstanding each other. Please post the blueprint for the page where you want to add this cover file.

7

Sure, here’s my code. Right now, it’s just the standard blueprint used for a project page:

title: Project
preset: page

status:
  draft: Draft
  listed: Published

fields:
  headline:
    type: text
    width: 3/4
    required: true
  year:
    type: number
    min: 2000
    default: 2018
    required: true
    width: 1/4
  tags:
    type: tags
  intro:
    type: textarea
    size: small
  text:
    type: textarea
    size: large

sidebar:
  cover:
    type: files
    label: Cover
    layout: cards
    info: "{{ file.dimensions }}"
    template: cover
    min: 1

My goal is to be able to use various file types (e.g. .mp4) as well giving each ‘project cover’ it’s own individual class.

Thank you for your help!

8

Ok, here you use a files section to which you can upload multiple file types and as many files as you want.

You assign a file template called cover.

If this file does not yet exist in the /site/blueprint/files folder, you need to create it.

Then you can limit what sort of files can be uploaded and what sort of fields you want in there etc., see File blueprint | Kirby CMS.

Then in your template, you would fetch the first file with such a template assigned:

<?php if ($file =  $project->files()->template("cover")->first()): ?>
  <?php if ($file->mime() === 'xyz'): ?>
     <!-- do stuff depending on mime type here, or check by extension instead -->
  <?php endif ?>
<?php endif ?>
9

Thank you! However, as i’d like to apply a unique class to each cover via the file/image.yml blueprint, this suggestion doesn’t quite achieve what i’d like. Here’s my code for the file/image.yml blueprint:

title: Image

columns:
  main:
    width: 1/2
    sections:
      content:
        type: fields
        fields:
          caption:
            label: Caption
            type: writer
  sidebar:
    width: 1/2
    sections:
      meta:
        type: fields
        fields:
          class:
            label: Class
            type: text
          alt:
            label: Alternative Text
            type: text
          link:
            label: Link
            type: url

In the project.php template (below) how can I apply this class to the image as well as additional attributes like lazy loading?

<div id="page">
    <div class="projects-section-container">
        <div class="projects-grid-layout">
            <?php foreach ($page->children()->listed() as $project): ?>
                <div class="featured-grid-row">
                    <a href="<?= $project->url() ?>">
                        <div class="featured-grid-item">
                            <div class="image-container">
                                <?= $project->images()->findBy("template", "cover") ?>
                                <figcaption><?= $project->title() ?></figcaption>
                            </div>
                        </div>       
                    </a>
                </div>
            <?php endforeach ?>
        </div>
    </div>
</div>
10

Please use the code I provided above instead of echoing the file. Then you need to create the html for the image yourself, which gives you the possibility to add attributes to it.

And you have access to the file object, and thus to every field, .e.g $file->class()

11

Thank you. However, the code provided above produces the following error:
syntax error, unexpected token “:”

12

Fixed.