Adding new images leads to "Error: Call to a member function url() on null"

Hello,

our marketing page runs on Kirby (www.appointmed.com) and we are in the process of updating a couple of things right now. I took over the project from another dev and I’m having issues adding a new image to a page.

There are already multiple images available and all I did was duplicate the respective code and change the variables.

Here’s an example of code that works:

Blueprint:
imageMain:
label: Bild
type: image
required: true
width: 1/2
help: Optimale Größe 1210 x 963px

Content / txt file
Imagemain: teaser-terminkalender.jpg

Template/Snippet
$imageMain = $section->image($section->imageMain()); // getting the image
<img srcset="<?= $imageMain->url(); ?> 1x" alt="<?= $imageMain->altText()->html(); ?>" // showing the image

What I want to do is add another retina sized image ($imageMain2x) to the “img srcset” tag. Duplicating (and renaming all the fields/variable to $imageMain2x) results in an error:

Error
Call to a member function url() on null

Any ideas where I went wrong here?

I don’t quite understand what you are trying to do, where is the $imageMain2x variable defined? You only have that one field with one image.

And by the way your code is missing an if-statement that checks if the image exists. The above code should be

<??php if($imageMain = $section->image($section->imageMain()): ?>
<img srcset="<?= $imageMain->url(); ?> 1x" alt="<?= $imageMain->altText()->html(); ?>" 
<?php endif ?>

Thanks for the quick reply and the advice about the if statement - will definitely add that!

Here’s what I got so far (in a more legible format):

Blueprint:

imageMain:
  label: Bild
  type: image
  required: true
  width: 1/2
  help: Optimale Größe 1210 x 963px 
imageMain2x:
  label: Bild
  type: image
  required: true
  width: 1/2
  help: Optimale Größe 1210 x 963px

Content File:

----

Imagemain: teaser-terminkalender.jpg

----

Imagemain2x: teaser-terminkalender_2x.jpg

----

php snippet:

<?php
  $imageMain     = $section->image($section->imageMain());
  $imageMain2x   = $section->image($section->imageMain2x());
?>

<picture>
  <source srcset="<?= $imageThumb->url(); ?>" media="(max-width: 600px)">
  <img srcset="<?= $imageMain->url(); ?> 1x, <?= $imageMain2x->url(); ?> 2x" alt="<?= $imageMain->altText()->html(); ?>">
</picture>

The weird thing is that $imageMain works as expected, but as soon as I try to add the $imageMain2x in the srcset tag, I get the error mentioned above. (File is definitely available in the content folder)

For this second image, you also need your if statement (or ternary operator…). Guess that happens on a page where you have multiple sections with their teaser images, and if not all fields of all images are filled in, this error appears.

Whenever you deal with class methods like url() etc. always, always, always check, if you have an instance of that class before calling any of the class methods.

Adding the if statement did the trick - Thanks for your help Sonja! :raised_hands:

(even though I’m not sure I fully understand how the if statement alone could fix that? It did work without the statement on the other files as well?)

As I said above, as a general rule, never ever call a class method without making sure you have an instance of the class, in this case a file object, first.

The reason in this case is that if you save a filename in your content file and the file is later deleted, or the field is empty in one of the pages, then you don’t get a file object if you call $section->image($section->imageMain());

Without knowing the complete structure of your template, I can’t tell you exactly what’s happening. But this kind of error (“Call to a member function url() on null”, or "Call to a member function xxx() on boolean) is always thrown if the object is missing.

Gotcha! Thanks again, Sonja :+1: