Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

myregistration's avatar

Is there a blade component for Filament's SpatieMediaLibraryImageColumn?

I would like to use the contents of SpatieMediaLibraryImageColumn in a Table custom ViewColumn. Does a blade component already exist for the package that I can use?

0 likes
2 replies
LaryAI's avatar
Level 58

To use the contents of SpatieMediaLibraryImageColumn in a custom Blade component for a Filament table, you can create a custom Blade component that leverages the Spatie Media Library package. While there isn't a pre-built Blade component specifically for this purpose, you can create one yourself.

Here's a step-by-step solution:

  1. Create a Custom Blade Component:

First, create a new Blade component. You can do this by running the following Artisan command:

php artisan make:component MediaLibraryImage

This will create a new component class in app/View/Components/MediaLibraryImage.php and a Blade view in resources/views/components/media-library-image.blade.php.

  1. Define the Component Logic:

In the MediaLibraryImage component class, add the necessary logic to retrieve the media item from the Spatie Media Library.

namespace App\View\Components;

use Illuminate\View\Component;
use Spatie\MediaLibrary\HasMedia;

class MediaLibraryImage extends Component
{
    public $model;
    public $collection;
    public $conversion;

    public function __construct(HasMedia $model, $collection = 'default', $conversion = '')
    {
        $this->model = $model;
        $this->collection = $collection;
        $this->conversion = $conversion;
    }

    public function render()
    {
        return view('components.media-library-image');
    }
}
  1. Create the Blade View:

In the resources/views/components/media-library-image.blade.php file, add the HTML to display the image.

@php
    $mediaItem = $model->getFirstMedia($collection);
@endphp

@if ($mediaItem)
    <img src="{{ $mediaItem->getUrl($conversion) }}" alt="{{ $mediaItem->name }}">
@endif
  1. Use the Component in Your Table View:

Now, you can use this custom component in your Filament table view. Here's an example of how to use it in a custom view column:

use App\View\Components\MediaLibraryImage;
use Filament\Tables\Columns\TextColumn;

TextColumn::make('image')
    ->label('Image')
    ->formatStateUsing(function ($record) {
        return view('components.media-library-image', [
            'model' => $record,
            'collection' => 'images', // specify your collection name
            'conversion' => 'thumb', // specify your conversion name if any
        ]);
    }),

This solution allows you to use the SpatieMediaLibraryImageColumn functionality within a custom Blade component in your Filament table. Adjust the collection and conversion parameters as needed to fit your specific use case.

myregistration's avatar
myregistration
OP
Best Answer
Level 14

That suggestion may work, I haven't tried it yet, but in my case I used the built-in avatar blade component:

 <x-filament::avatar src="{{ $getRecord()->user->profile->getFirstMediaUrl('avatars') }}"
                        alt="{{ $getRecord()->user->profile->full_name }}" />

Please or to participate in this conversation.