Reorder operation with image

[ericjanofski]

Hello, I need a user to be able to drag and drop crud items with an image as a label. Here is my code:

protected function setupReorderOperation()
{
// define which model attribute will be shown on draggable elements
CRUD::set('reorder.label', 'image');

    // define how deep the admin is allowed to nest the items
    // for infinite levels, set it to 0
    CRUD::set('reorder.max_level', 1);

}

Unfortunately, that just displays the name of the image which is super cryptic. I was hoping for the image itself, which is stored on s3. The field contains just the file name.

Is there a way to specify that it's an image or worst case, inject the image tag around the label with the s3 bucket path?

[karandatwani92]

Hey @ericjanofski

You need to

1. Define Accessor:

use Illuminate\Database\Eloquent\Casts\Attribute;

public function imageThumb(): Attribute
{
  return Attribute::make(
    get: fn () => ("<img id='$this->id' src='https://picsum.photos/id/$this->id/50' /> $this->label"),
  );
}

2. Use it:
   CRUD::set('reorder.label', 'imageThumb');

[ericjanofski]

Thank you very much, great solution!