Filament•5mo ago

Anybody find a decent solution for table images to a lightbox?

(I'm surprised filament doesn't have a builtin lightbox for table records...it seems to have everything else imaginable!) The 2 lightbox plugins are not solutions. - https://filamentphp.com/plugins/njxqlus-lightbox This plugin doesn't support use in tables, so that's of no help here. - https://filamentphp.com/plugins/solution-forest-simplelightbox This plugin simply doesn't work and doesn't seem to be actively maintained.

8 Replies

_andypeacock•2mo ago

Hi @bionary I found the same problem as you. Did you find a solution? Actually, thanks to Cursor, I've already got a solution:

Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->action(
                        Action::make('viewThumbnail')
                            ->label('View Thumbnail')
                            ->icon('heroicon-o-photograph')
                            ->modalHeading(fn ($record) => "Thumbnail for {$record->name}")
                            ->modalContent(fn ($record) => view('filament.tables.thumbnail-modal', [ 'imageUrl' => $record->thumbnail_url ]))
                            ->modalSubmitAction(false)
                            ->modalCancelAction(false)
                    ),

Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->action(
                        Action::make('viewThumbnail')
                            ->label('View Thumbnail')
                            ->icon('heroicon-o-photograph')
                            ->modalHeading(fn ($record) => "Thumbnail for {$record->name}")
                            ->modalContent(fn ($record) => view('filament.tables.thumbnail-modal', [ 'imageUrl' => $record->thumbnail_url ]))
                            ->modalSubmitAction(false)
                            ->modalCancelAction(false)
                    ),

Then the filament.tables.thumbnail_modal.blade.php:

<div class="flex justify-center">
    <img src="{{ $imageUrl }}" alt="Block Thumbnail" class="max-w-full max-h-[80vh]">
</div>

<div class="flex justify-center">
    <img src="{{ $imageUrl }}" alt="Block Thumbnail" class="max-w-full max-h-[80vh]">
</div>

awcodes•2mo ago

Just create a custom column whose action opens a modal with a custom view which is just an img tag with the src for the image.

_andypeacock•2mo ago

Thanks Adam - Just replied with the same.

awcodes•2mo ago

Don’t even need an additional script

_andypeacock•2mo ago

Obvious, now I see the solution

awcodes•2mo ago

😇

bionaryOP•2mo ago

@_andypeacock Your solution looks a lot smarter/cleaner than what I came up with. Thank you. I was doing something similar but packing it all in the Filament Resource like this:

SpatieMediaLibraryImageColumn::make($dotNotationMediaPath)
            ->action(
                Actions\Action::make($dotNotationMediaPath)
                    ->modalHeading(false)
                    ->extraModalWindowAttributes(['class'=>'justify-center h-[calc(100vh-100px)]', 'style'=>'flex-direction:inherit'])
                    ->modalContent(function($record){
                        $imageUrl = $record?->getFirstMedia($collection)?->getUrl('preview');
                        return new HtmlString("<img src='$imageUrl' class='object-scale-down max-h-full p-4'>");
                    })
                    ->modalFooterActions(fn() => [])

SpatieMediaLibraryImageColumn::make($dotNotationMediaPath)
            ->action(
                Actions\Action::make($dotNotationMediaPath)
                    ->modalHeading(false)
                    ->extraModalWindowAttributes(['class'=>'justify-center h-[calc(100vh-100px)]', 'style'=>'flex-direction:inherit'])
                    ->modalContent(function($record){
                        $imageUrl = $record?->getFirstMedia($collection)?->getUrl('preview');
                        return new HtmlString("<img src='$imageUrl' class='object-scale-down max-h-full p-4'>");
                    })
                    ->modalFooterActions(fn() => [])

I never quite found a way to scale the image properly. Even with my custom class added to the image, it was still not scaling properly and would get cut off if the aspect ratio was extreme. Also the white border around the image was never equal/balanced...but my tailwind skills are junk. Can't wait to try your solution, thanks!

_andypeacock•2mo ago

Hi, don't thank me, thank cursor😀 Also, mine doesn't scale either, I realised later. I've parked it for now, as it wasn't critical for me.

Gaming

Programming

Anybody find a decent solution for table images to a lightbox?