Images won't change in panel and front-end after selecting a new image

Hi,

I’ve got some strange behaviour after changing a product image in the product detail.

BP product overview:

    columns:
      left:
    #width: 2/3
    sections:
      Products:
        type: pages
        layout: cards

BP (piece of) Product detail:

        fields:
      image:
        label: Image
        type: files
        max: 1
        layout: cards

Template: (after looping through my collection of subpages)
<?= $item->image()->crop(500)->url() ?>

After replacing a product image with a new image in the product detail panel page the changes will not be passed through my product overview panel and my template at the front.

The new image is only visible in my product detail page.

This new image will only be visible on all places when I delete the old one from the folder.

Is this a bug?

It’s not a bug. You are using a reserved name for your field, so what this line does is fetch the first image from the folder instead of fetching the image stored in the field. Additionally, you have to convert the field value to a file:

2 options:

  • rename field
  • fetch image via content:
 <?= $item->content()->image()->toFile()->crop(500)->url() ?>

You should, however, check if the image exists before calling crop:

<?php if ( $image = $page->content()->image()->toFile() ) : ?>
<?php echo $image ?>
<?php endif ?>

Ah yes! Didn’t think about that actually. It is working now.

I renamed my ‘image’ field to avoid conflicts in the future.

Because there were more images available to select per product, my products overview in the panel was showing the first image in the card. not the selected one.

Tried to fix that with my field still calling ‘image’ but that didn’t work. Now with the new fieldname it is working like a charm!

Blueprint:

columns:
  left:
    sections:
      Products:
        type: pages
        layout: cards
        template: product
        image: page.item_image.toFile # this one!

Thanks for your quick reply

1 Like