Search code examples
laraveloctobercmsoctobercms-backend

Show Thumbnails in Backend Model Columns

I'm using OctoberCMS with Laravel.

I use File Upload / Media Finder to attach an image. I'm trying to add thumbnails to the Backend Model columns.

I tried following these guides:
https://octobercms.com/forum/post/how-to-display-pictures-in-backend-lists
https://octobercms.com/docs/database/attachments

File Upload

file upload

Columns Thumbnail

photo

Model

I have in my Model Catalog.php

public $attachOne = [
    'photo' => 'System\Models\File'
];

In columns.yamal

Field photo set to partial and added path.

In the partial _photo.htm I have

<?php echo $this->photo->getThumb(100, 100, ['mode' => 'crop']); ?>

Error

I get Error: Call to a member function getThumb() on null.

If I use <img src="" /> in the partial it will display an empty image in the columns, but I don't know what php to put as the src.

Solution

  • According to column widget when you are using partial it will pass $record variable corresponding to that row, [ do not use $this there ]

    means for that row $record will point to current record so you can use $record

    your _photo.htm should be like this

    <img src="<?php echo $record->photo->getThumb(100, 100, ['mode' => 'crop']); ?>" />
<!-- OR -->
<img src="<?= $record->photo->getThumb(100, 100, ['mode' => 'crop']) ?>" />

    update

    If you are using media finder then you can not use getThumb on the file as it will be just path for that file so its not possible to resize that image using getThumb [ Its only possible with relational attachments (attachMany, attachone etc...) ]

    Although you can use this to show small image

    <img height="64" width="64" src="<?= 'https://october-plaza.com/storage/app/media/' 
. $model->photo ?>"` />

    you can add this height="64" width="64" to show image as thumbnail (but it will be full image just scale down using attributes).

    if any doubts please comment