How do Panel images work in combination with Templates?

Kirby 3 Solved ✅
1

Questions regarding the panel -> images.

1 - How do I display one specific image on a page using the panel? The example only has album’s of images. Not just one image.

/site/blueprints/pages/product.yml

  slider_image_11:
    label: slider_image_11
    type: files

This displays the file selector in the Panel of current files in the same directory.

/site/template/product.php

	<img src="<?php echo $page->image($slider_image_11)->url() ?>" alt="">

2 - How do I upload additional images via the Panel?

3 - What is the difference between ‘image’ and ‘file-image’?

Thanks once again! :slight_smile:

2

Your question isnt completly clear but I will assume you have just one file stored in a field:

<?php if($img = $page->slider_image_11()->toFile()): ?>
  <img src="<?= $img->url() ?>" alt="<?= $img->alt() ?>">
<?php endif ?>

On a side note, i forget if underscores are allowed in names or not. If the above doesnt work, try taking the undescores out and saving the page again in the panel.

1 Like
3

Underscores yes, dashes no.

4

I don’t understand the question. What are you referring to?

You can upload images either via the context menu when you click the “Add” button of a files field or via a files section.

5

My apologies if the question is difficult to understand. I will try to make it understandable.

Think of an image about_us.png, that contains the photo of our team. Just that image, how does one create a panel where Admin can upload this image so that it is displayed on the about page in location where I want it to be.

Not an album. All examples I saw were related to Albums.

Normally I would have a content folder /about/ with the image about_us.png and use <?php echo $page->image('about_us.png')->url() ?> to display it on the page.

How do I create a panel component to change that image and what do I put in the blueprint?

The page blueprint only has icon (images) https://getkirby.com/docs/reference/panel/blueprints/page

I’m not sure how the File blueprint relates to the Page blueprint.

6

You can set up a files field, like the cover field in the Starterkit album.yml

7

Ok, but why is there no image type in the page blueprint? What do I define in File blueprint and what in Page blueprint? Why are they separate.

8

You dont need a file blueprint unless you want to store meta data or limit what type of files can be uploaded. The purpose is to keep your page blueprints clean

1 Like
9

This code works from https://getkirby.com/docs/reference/templates/field-methods/to-file

  <?php if ($header = $page->header()->toFile()): ?>
<figure class="header">
  <img src="<?= $header->url() ?>" alt="<?= $header->alt() ?>">
</figure>
<?php endif ?>

Is there a faster way to do this? Or do I need to PHP to file every time for an image? Before I could just do <?php echo $page->image('header.jpg')->url() ?>

10

You could do that but it is not recommended coding style. If you simplify your code like in your above example, it means that it will throw an error if the file doesn‘t exist.

1 Like
11

Yes, but that’s fine. Thank you for your help.