Preview image on Panel


I’d like to preview my cover image as a thumbnail (like starterkit)


    width: 1/3
        type: files
        label: Cover
        layout: cards
        max: 1
        multiple: false
        query: page.previewCover
        required: true
        uploads: cover

Post model

final class PostPage extends Page
    public function previewCover()
        return $this->image()?->thumb('cover') ?? false;

I’ve uploaded an image but the field remains empty. I guess the issue is with the thumb() method but I don’t know what I need to add to make it work.

Your syntax is wrong, this query needs to go within the image property, see docs:

Thanks for the answer, but I don’t know what I should use instead

  query: page.previewCover

But somehow this doesn’t make sense in a files section, where the selected file should be previewed.

I’m not really sure what you want to achieve here. Could you please elaborate?

For each post, I add a cover image.
Usually this image is larger, and I use the thumb() method to crop it to the correct size.

I try, in the panel, to display this thumbnail

Right, but this is the blueprint for your posts. And it looks as if you want to select a cover image for your post. Therefore, you can either use a files section like you are currently doing, or maybe even better a files field. In any case, this section/field would then show the selected image.

Therefore, I do not understand the purpose of your query in this context. The query for a files section or field would have to return a files collection, i.e. multiple files, not a single file.

I think I got it all mixed up.

I’d rather find a way to overload the rendering!