Alternative Text with Kirby Images Type

The CMS Questions
1

I am using the new image type to store images for pages and I am wondering how I would accomplish adding an alt tag to these images. Below is my blueprint.

  Cars:
    label: Cars
    type: structure
    style: table
    entry: >
      {{name}}
      {{details}}
      {{picture}}
    fields:
      name:
        label: Name
        type: text
      details:
        label: Details
        type: textarea
      picture:
        label: Vehicle Image
        type: image

and here is how I am accessing the image in the template.

<?php echo $car->picture()->toFile() ?>

Where do I place the alt tag at?

2

The alt tag can be attached directly to your images.

See here for more information: https://getkirby.com/docs/panel/blueprints/file-settings#file-fields

1 Like
3

In this case you would have to modify your code a bit:

<img src="<?= $car->picture()->toFile()->url() ?>" alt="<?= $page->title() ?>">

Edit: Or use any other field for the alt tag, i.e. file meta data.

<?php
$image =  $car->picture()->toFile(); 
?>
<img src="<?= $image->url() ?>" alt="<?= $image->caption() ?>">
4

So the alt tag is working but I cannot get the image to show. Is toFile()->url() valid?

5

Have you turned on debugging? Do you get an error?

In my last example I had the $ sign missing in front of the variable … I corrected it above.

And yes, toFile()->url() is valid code.

6

This is the error.

PHP Fatal error: Call to a member function url() on a non-object

7

Does the image exist? In cases like this, it’s always safer to use an if statement before using a method on an object.

Does it work if you use

$page->image($car->picture())->url()

instead?

1 Like
8

That was it. I needed to check if the file existed since some items had images and some did not.

9

Yeah, that is a quite common problem … :wink:

1 Like
10

I didn’t think about that because just using the picture->toFile alone it didn’t care if there was an image or not. Add the url() and it has a fatal error.

11

It takes a while to make a habit of using if statements whenever something might break otherwise. Even if your code works for the moment, any user might e.g. delete a file at a later stage. So you are always on the safe side if you make sure an object exists.