Getting a '-' before file name for background image after upload

Kirby 3 Solved ✅
1

Hi, I have added a field for an image upload for a background image for an element on my webpage. When i type into the txt file ‘image.jpg’ it loads fine. However after uploading a new image in panel a ‘-’ is added before file name:

Here is my HTML: <div style="background-image:url(./home/<?php echo $page->HeroBackground() ?>)">

Here is my YML: HeroBackground:
    type: files
    headline: Hero Background
    max: 1
    template: cover

After changing image in panel this is what is shown in the browser: <div style="background-image:url(./home/- image-2.jpg)">

2

Check out the documentation how to use the files field in your templates:

3

The background image referenced in the divider needed to be fetched using php like this:

<div style="background-image:url(<?= $page->HeroBackground()->toFile()->url()?>)">

4

Chaining syntax like above is not a good idea, always use an if statement like in the documentation to check if the image exists before calling the url() or any other class method.

5

Hi, thanks for the advice can you please provide an example?

6

In this case, we can best use the ternary operator.

<div style="background-image:url(<?= ($f = $page->HeroBackground()->toFile()) ? $f->url() : ''; ?>)">
7

Thank you for the help, Kirby is the best CMS in the world.

2 Likes