I am re-using the blog structure from the starter kit.
But for some reason the images are not showing up in the CMS when a cover is filled in:
This is my code:
<?php?>
<?php if ($cover = $page->cover()->toFile()): ?>
<img src="<?= $cover->crop(1376, 574)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>
What does that mean regarding blueprints?
This is the blueprint I use:
# Each page blueprint must have a title, the title may be different from the file name
title: Verhaal
# Sorting number scheme that is applied when page status is changed to `listed`
# More about page sorting: https://getkirby.com/docs/reference/panel/blueprints/page#sorting
num: date
# Each page can have an icon that is shown in page listings when no preview image is available.
icon: đź“–
# Custom descriptions for each page status depending on use case
# More about page status: https://getkirby.com/docs/reference/panel/blueprints/page#statuses
status:
draft:
label: Draft
text: The verhaal is still in draft mode. It can only be seen by editors with panel access.
unlisted:
label: In Review
text: The verhaal is online and can be visited with the direct URL. The team must still give the final go to publish it.
listed:
label: Published
text: The verhaal is online and listed in the blog
# Define the form layout with two columns
# Columns are optional but help structure the form layout
# More about columns: https://getkirby.com/docs/guide/blueprints/layout#defining-columns
columns:
- width: 2/3
# This columns only has a single field
fields:
description:
label: Card description
type: text
subheading:
label: Intro
type: textarea
buttons: false
size: medium
text:
type: blocks
- width: 1/3
# This second column holds a fields section with multiple fields
# More about fields sections: https://getkirby.com/docs/reference/panel/sections/fields
sections:
meta:
type: fields
fields:
# If you need the same field in multiple locations, you can define them once and reuse whereever needed.
# Here we use a files field defined in `/site/blueprints/field/cover.yml`
cover: fields/cover
date:
type: date
time: false
default: now
author:
type: users
# Fields types can be added using the shortcut `fieldname: true`
# (however, you can only use a fieldname once per page and this only makes sense for simple fields without configuration)
tags: true
files:
type: files
template: blocks/image
Well, what I really wanted to know if you re-used the blueprints/models from the Starterkit and if yes, then which one?
Yes I did. All related to notes + note
Then the reason why the example does not work is that there is a Page model note.php, which already converts the cover field to file and if it doesn’t exist falls back to the first image in the page.
So calling toFile() on $page->cover() will not work and it should be only
<?php if ($cover = $page->cover()): ?>
Or you need to remove the cover() method from the model.
I changed it:
<div class="mask">
<?php?>
<?php if ($cover = $page->cover()): ?>
<img src="<?= $cover->crop(1376, 574)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>
</div>
but I get on the page itself now a image error:
<img src="- file://i3DgXcDlMiSZoGRt" alt="- file://i3DgXcDlMiSZoGRt">
Also in the CMS I still dont see the image
I just don’t get it. I compared everything can’t see anything wrong.
My “verhaal” snippet:
<?php ?>
<article class="rounded-2xl overflow-hidden w-full bg-brand-neutral-50 flex flex-col">
<?php if ($cover = $verhaal->cover()): ?>
<img src="<?= $cover->crop(446, 276)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>
<div class="p-10 flex-grow flex flex-wrap flex-row justify-start items-start">
<time class="font-primary font-semibold text-brand-neutral-600" datetime="<?= $verhaal->date()->toDate('c') ?>"><?= $verhaal->date()->esc() ?></time>
<h4 class="font-primary font-bold text-2xl text-brand-neutral-900 mb-4 w-full"><?= $verhaal->title()->esc() ?></h4>
<?php if (($excerpt ?? true) !== false): ?>
<p class="font-primary font-normal text-base text-brand-neutral-400 mb-8 w-full">
<?= $verhaal->description()->esc() ?>
</p>
<?php endif ?>
<a class="group animate-top-bottom btn-secondary self-end" href="<?= $verhaal->url() ?>">
<div class="btn-container button-children">
<span>Lees meer</span>
<svg class="fill-brand-black group-hover:fill-brand-neutral-900" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.46967 1.53033C8.17678 1.23744 8.17678 0.762563 8.46967 0.46967C8.76256 0.176777 9.23744 0.176777 9.53033 0.46967L13.5303 4.46967C13.8232 4.76256 13.8232 5.23744 13.5303 5.53033L9.53033 9.53033C9.23744 9.82322 8.76256 9.82322 8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967L11.1893 5.75H1.5C1.08579 5.75 0.75 5.41421 0.75 5C0.75 4.58579 1.08579 4.25 1.5 4.25H11.1893L8.46967 1.53033Z"/>
</svg>
</div>
</a>
</div>
</article>
My “verhaal” template:
<!DOCTYPE html>
<html lang="nl">
<?php snippet('head') ?>
<body class="p-0 m-0 selection:bg-brand-neutral-400 font-primary cursor-default" id="body">
<?php snippet('header-dark') ?>
<main class="overflow-hidden">
<section class="bg-brand-neutral-900 pt-32 pb-10 lg:pt-64 box-border flex justify-center items-center relative">
<div class="container mx-auto z-10 px-8 box-border">
<div class="lg:grid lg:grid-cols-12 lg:gap-6">
<div class="lg:col-span-12">
<div class="mask">
<?php if ($cover = $page->cover()): ?>
<img src="<?= $cover->crop(1376, 574)->url() ?>" alt="<?= $cover->alt()->esc() ?>">
<?php endif ?>
</div>
</div>
</div>
</div>
</section>
<section class="bg-brand-neutral-900">
<div class="container mx-auto px-8 box-border">
<div class="grid grid-cols-1 gap-6 lg:grid lg:grid-cols-12 lg:gap-6">
<div class="lg:col-span-4 flex flex-col justify-start">
<div class="mask mb-8">
<p class="m-0 to-brand-neutral-50 font-primary font-normal">
<time class="font-primary font-semibold text-brand-neutral-600" datetime="<?= $page->date()->toDate('c') ?>"><?= $page->date()->esc() ?></time>
</p>
</div>
<div class="mask">
<h3 class="font-secondary text-5xl lg:text-6xl uppercase text-brand-neutral-50"><?= $page->title()->esc() ?></h3>
</div>
</div>
<div class="lg:col-span-8">
<div class="grid grid-cols-1 gap-6">
<div class="mask">
<?php if ($page->subheading()->isNotEmpty()): ?>
<p class="text-lg lg:text-2xl font-semibold font-primary text-brand-neutral-50 indent-[16.66%] mb-10"><?= $page->subheading()->esc() ?></p>
<?php endif ?>
<div class="cms-content-dark">
<?= $page->text()->toBlocks() ?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-brand-neutral-900 pt-10 pb-20 box-border flex justify-center items-center relative">
<div class="container mx-auto z-10 px-8 box-border">
<div class="grid grid-cols-1 lg:grid lg:grid-cols-12 lg:gap-x-5 mt-10">
<div class="lg:col-span-12 border-y border-brand-neutral-500 py-10 lg:py-12 flex flex-col justify-center items-center">
<?php if (!empty($tags)): ?>
<div class="flex gap-4">
<?php foreach ($tags as $tag): ?>
<a href="<?= $page->parent()->url(['params' => ['tag' => $tag]]) ?>" class="bg-brand-neutral-300 text-brand-neutral-900 rounded-2xl py-2 px-4 flex box-border text-base"><?= esc($tag) ?></a>
<?php endforeach ?>
</div>
<?php endif ?>
</div>
</div>
</div>
</section>
<section class="bg-brand-neutral-200 pt-20 pb-20 box-border flex justify-center items-center relative">
<div class="container mx-auto z-10 px-8 box-border">
<h5 class="font-primary text-2xl text-brand-neutral-900 font-bold leading-none mb-10 text-center tracking-tight">Meer verhalen</h5>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<?php snippet('related') ?>
</div>
<div class="grid grid-cols-1 lg:grid lg:grid-cols-12 lg:gap-x-5 mt-10">
<div class="lg:col-span-12 border-y border-brand-neutral-500 pt-10 pb-4 lg:pt-10 lg:pb-8 flex flex-col justify-center items-center">
<a href="/verhalen" class="font-secondary text-5xl lg:text-6xl uppercase text-brand-neutral-900 leading-none">Naar overzicht</a>
</div>
</div>
</div>
</section>
<?php snippet('faq') ?>
<?php snippet('aanmelden') ?>
</main>
<?php snippet('footer') ?>
<?php snippet('scripts') ?>
</body>
</html>
My “verhaal” yml file
# Each page blueprint must have a title, the title may be different from the file name
title: Verhaal
# Sorting number scheme that is applied when page status is changed to `listed`
# More about page sorting: https://getkirby.com/docs/reference/panel/blueprints/page#sorting
num: date
# Each page can have an icon that is shown in page listings when no preview image is available.
icon: đź“–
# Custom descriptions for each page status depending on use case
# More about page status: https://getkirby.com/docs/reference/panel/blueprints/page#statuses
status:
draft:
label: Draft
text: The verhaal is still in draft mode. It can only be seen by editors with panel access.
unlisted:
label: In Review
text: The verhaal is online and can be visited with the direct URL. The team must still give the final go to publish it.
listed:
label: Published
text: The verhaal is online and listed in the blog
# Define the form layout with two columns
# Columns are optional but help structure the form layout
# More about columns: https://getkirby.com/docs/guide/blueprints/layout#defining-columns
columns:
- width: 2/3
# This columns only has a single field
fields:
description:
label: Card description
type: text
subheading:
label: Intro
type: textarea
buttons: false
size: medium
text:
type: blocks
- width: 1/3
# This second column holds a fields section with multiple fields
# More about fields sections: https://getkirby.com/docs/reference/panel/sections/fields
sections:
meta:
type: fields
fields:
# If you need the same field in multiple locations, you can define them once and reuse whereever needed.
# Here we use a files field defined in `/site/blueprints/field/cover.yml`
cover: fields/cover
date:
type: date
time: false
default: now
author:
type: users
# Fields types can be added using the shortcut `fieldname: true`
# (however, you can only use a fieldname once per page and this only makes sense for simple fields without configuration)
tags: true
files:
type: files
template: blocks/image
So is there now also a verhaal model?
And where is the verhaal snippet used?
Yes this is my verhaal model:
<?php
/**
* Page models extend Kirby's default page object.
*
* In page models you can define methods that are then available
* everywhere in Kirby where you call a page of the extended type.
*
* In this example, we define the cover method that either returns
* an image selected in the cover field or the first image in the folder.
*
* You can see the method in use in the `note.php` snippet.
* and in the `site/blueprints/sections/notes.yml` image query
*
* We also define a custom date handler here, which keeps date formatting
* for the published date consistent in templates, snippets and blueprints.
*
* More about models: https://getkirby.com/docs/guide/templates/page-models
*/
class NotePage extends Page
{
public function cover()
{
return $this->content()->cover()->toFile() ?? $this->image();
}
public function published($format = null)
{
return parent::date()->toDate($format ?? 'd M, Y');
}
}
And snippet is used in “verhalen” template:
<section class="bg-brand-neutral-900 pt-10 pb-20 box-border flex justify-center items-center relative">
<div class="container mx-auto z-10 px-8 box-border">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<?php foreach ($verhalen as $verhaal): ?>
<?php snippet('verhaal', ['verhaal' => $verhaal]) ?>
<?php endforeach ?>
</div>
<?php snippet('pagination', ['pagination' => $verhalen->pagination()]) ?>
</div>
</section>
It’s called NotePage, so if your template is called Verhaal now, you need to change this
YESSSS! OFCOURSE 
THANX SO MUCH!! 