Filament•2y ago

How to manually pick a single image to display on a column from multiple images?

Lets say I have 3 images, by default in the table the last image is picket. How do I control this and pick the first one?

             Tables\Columns\SpatieMediaLibraryImageColumn::make('images')
                    ->collection('products')
                    ->conversion('small')
                    ->height(82),

             Tables\Columns\SpatieMediaLibraryImageColumn::make('images')
                    ->collection('products')
                    ->conversion('small')
                    ->height(82),

6 Replies

awcodes•2y ago

Maybe with getStateUsing(). https://filamentphp.com/docs/2.x/tables/columns/getting-started#calculated-state

Filament

Getting started - Columns - Table Builder - Filament

The elegant TALL stack table builder for Laravel artisans.

Crylar•2y ago

Yeh, it looks like it worked but behaviour is a bit odd.

Crylar•2y ago

By default I expect that this is the first image in orderable image component, but actually it's the last one. :/

Crylar•2y ago

@awcodes also do you know if it's possible to get ->collection('products') property value inside a getStateUsing so I would not need to repeat myself? Ah, managed to get it, just leaving for reference if anyone will need it. 🙂

                Tables\Columns\SpatieMediaLibraryImageColumn::make('images')
                    ->getStateUsing(
                        fn (Product $record, Tables\Columns\SpatieMediaLibraryImageColumn $column) =>
                            $record->getMedia($column->getCollection())->last()?->getUrl($column->getConversion()))
                    ->collection('products')
                    ->conversion('small')
                    ->height(82),

                Tables\Columns\SpatieMediaLibraryImageColumn::make('images')
                    ->getStateUsing(
                        fn (Product $record, Tables\Columns\SpatieMediaLibraryImageColumn $column) =>
                            $record->getMedia($column->getCollection())->last()?->getUrl($column->getConversion()))
                    ->collection('products')
                    ->conversion('small')
                    ->height(82),

josef•2y ago

Well, you're using last() to get the image from the collection. If you want the first one, use first() instead

Crylar•2y ago

Yeh but it's the other way around, with the last I ma getting first, and with the first I am getting last right now. 😄 Atleast in my case, each product can have multiple images, and normally the first one in the grid should be the main one but for some odd reason first for the component is the last item in the grid. 🤔

Gaming

Programming

How to manually pick a single image to display on a column from multiple images?