Show Thumbnails in Backend Model Columns

1
votes

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.

2
laraveloctobercmsoctobercms-backend

2 Answers

1
votes

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

1
votes

You can do this with OCTOBER IMAGE RESIZER plugin in your columns.yaml file

Usage in Backend List

The image resizer can also be used on backend lists with the type of thumb, e.g.

image:
 label: Image
 type: thumb
 sortable: false

This works with:

  • AttachMany (uses first image) Docs
  • AttachOne Docs
  • Mediafinder Docs

You can also optionally pass width (default 50), height (default 50) and options as follows:

image:
  label: Image
  type: thumb
  sortable: false
  width: 75
  height: 100
  options:
     mode: crop