Where am I going wrong with access image data

The CMS Questions
1

So I have added to properties to an image and I am having trouble accessing them, can someone point out where I’m going wrong please?

This is part of my blueprint:

files:
    fields:
        textalt:
            label:
                en:  Alt Text
                de:  Alt Text
            type:    text
        maincolor:
            label:
                en:  Main Image Color
                de:  Main Image Color
            type:    text

fields:
    heroimage:
        label:
            en:      Hero Image
            de:      Hero Image
        type:        image
        width:       1/3
        required:    true

This is how I am trying to render it on the front-end. The URL works, but the image data of maincolor doesn’t come through. It has created the needed text file inside the content folder with the image name etc… So I can see the data is saving.

<section class="site-hero container-fluid" style="background-image: url('<?php echo imgix($page->heroimage()->toFile(), array('blur' => 200, 'px' => 16, 'auto' => 'format')) ?>'); background-color: <?php $page->heroimage()->maincolor()->html() ?>;">

2

You have to use the ->toFile() method to get the image Object before accessing the fields, the same way you did in the imgix function :

$page->heroimage()->toFile()->maincolor()->html()
3

Make sure you really have an image object, using an if statement:

if($image = $page->heroimage()->toFile()) {
  echo $image->maincolor()->html();
}

Same with your imagix function, it will probably fail if you don’t feed it an image…

4

So using

$page->heroimage()->toFile()->maincolor()->html()

Doesn’t actually return anything either - I had already tried that, but using the if statement @texnixe suggests works.

Is it best practice to put that inline?

<section class="site-hero container-fluid" style="background-image: url('<?php echo imgix($page->heroimage()->toFile(), array('blur' => 200, 'px' => 16, 'auto' => 'format')) ?>'); background-color: <?php if($image = $page->heroimage()->toFile()) { echo $image->maincolor()->html(); } ?>;">

5

You could do it like this instead:

<?php
if($image = $page->heroimage()->toFile()) {
  $color = $image->maincolor()->html();
}
else {
  $color = ''; // or use a default color here
}

The just echo the $color variable in your section styles.

Please not that you should always, always, always use this kind of check, no matter if you are dealing with images (image objects), pages (page objects) or any other object. PHP otherwise throws an error if you try to call an object method on a non-existing object.

1 Like
6

To make it shorter, you can use the ternary operator like this:

<section class="site-hero container-fluid" style="background-image: url('<?php echo imgix($page->heroimage()->toFile(), array('blur' => 200, 'px' => 16, 'auto' => 'format')) ?>'); background-color: <?= ($image = $page->heroimage()->toFile())? $image->maincolor()->html(): 'blue' ; ?>;">

Without inlining:

$color = ($image = $page->heroimage()->toFile())? $image->url(): 'blue' ;
1 Like
7

Thank you very much. I will use the head type method, that way when I get around to it I can add in all the checks needed.

So… even if a field type has *required I should still test to see if it exists for best practice?

8

Well, yes, because even if the field is required, its value might not yield anything, for example, the user selected an image as heroimage. Later, the image is deleted but the value is still there, but it does not point to an image anymore. Therefore, requiring a field alone is no guarantee for anything.

I’m a bit surprised you did not get any errors before. Have you turned on debugging. If not, I strongly suggest to do so in your config.php during development.

c::set('debug', true);
9

Yes debug is set on, and I’ve not had any errors regarding this bit of code/dev. It was just outputting background-color: ; with no value, the image could change and was outputting correctly, just that main color attr would not come through.

I will keep in mind to add in checks even if the field is required.