Hi,
I’m super new to Kirby. I’m trying to add basically content containers that hold information and images for a single-page application.
So for example, I have a project name, description, cover image, a logo and an image gallery. I’d like to render the cover images on the home page, then later query more information as the user clicks and opens an overlay slider type of thing with the actual gallery of images.
So I already noticed I can just get JSON for the extra info (like the gallery of images), but I’m struggling to actually get the cover image into my template.
I set up a blueprint to contain this information, and I was able to upload an image into the cover image field, but I just can’t seem to figure out how to get the image into my template.
fields:
title:
label: Name
type: text
text:
label: Description
type: textarea
image:
label: Cover
type: image
How would I get the image url of “Cover” into my template?
If your blueprint contains this:
fields:
title:
label: Name
type: text
text:
label: Description
type: textarea
image:
label: Cover
type: image
title, text and image are your field names. The label only describes the text shown in the panel.
To get the content of a field, you simply start with the $page variable and call a method with the same name as your field, by using the -> operator. So your code would be:
$page->image() to get the content of this field.
Since this is only a string with the filename, you must convert this in an image object.
I used this code:
$img = $page->images()->find($page->image());
echo $img->url(); // example
PS: perhaps you must rename your image field to something like coverage, if image is reserved by the CMS itself. But I’m not sure about this now.
(I assume, you have the right intend in your file, but only posted it “wrong”)
1 Like
Perfect! This works exactly as intended. Thanks.
How would this work with multiple images in the same field though? Is that even possible?
You can even shorten this:
$img = $page->image($page->image());
echo $img->url(); // example
Or, if you rename the field to “coverimage”.
$img = $page->coverimage()->toFile();
echo $img->url(); // example
The image field only takes one image, you would then have to use another field type, e.g. the multi-select field.
I’m not sure if this would produce the intended behavior. Would I be able to drag and drop images from the side into the field?
No, that won’t work, why do you need the drag & drop behaviour? Another even better option - still not drag and drop, is the [selector field] (https://github.com/storypioneers/kirby-selector)
The thing is, for an image slider I don’t want to manually put files into the field. I want to just drop 100 images in and forget.
But then, why use a field at all? You can output all images in your page folder via your template. If you have different sorts of images, gives them a special file name you can filter by.
<?php
foreach($page->images() as $image: ?>
<img src="<?= $image->url() ?>" >
<?php endforeach ?>
Manual file naming is error prone though. I would like to separate out the images into different sections.
OK, last idea for today 
: put the images into different subfolders to separate them, then fetch them for each slider from those subpages.
Is there any way to create sub folders in the panel?
Yes, there is usually an add page button in the sidebar.
Ah, you mean manually add another page with template “gallery” or something and then store images there? I guess that makes sense. One last question then. Can I auto-generate a sub-page when a page is created?
Makes sense! Awesome. Kirby is officially fucking awesome in my book from now on.
1 Like