Filament•15mo ago

Responsive Images in table rows

Context: I'm building a Video repository with Filament, and I'd like to show each video resource pore like a card than a row. I've been able to accomplish this by using the layout options. So far so good. My problem comes with different devices, because I've not been able to set responsiveness to the image in the row, so when the viewport changes the images don't resize. Here is the table configuration:

    public static function table(Table $table): Table
    {
        return $table
            ->contentGrid([
                'md' => 2,
            ])
            ->columns([
                Tables\Columns\Layout\Stack::make([
                    Tables\Columns\SpatieMediaLibraryImageColumn::make('thumbnail')
                        ->height(290)
                        ->defaultImageUrl(url('images/thumbnail-placeholder.webp'))
                        ->collection('thumbnails')
                        ->alignCenter(),
                    Tables\Columns\TextColumn::make('name')
                        ->alignCenter(),
                ])
                    ->space(3),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\ViewAction::make()
                    ->extraAttributes(['style' => 'display:none;']),
                Tables\Actions\EditAction::make(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->contentGrid([
                'md' => 2,
            ])
            ->columns([
                Tables\Columns\Layout\Stack::make([
                    Tables\Columns\SpatieMediaLibraryImageColumn::make('thumbnail')
                        ->height(290)
                        ->defaultImageUrl(url('images/thumbnail-placeholder.webp'))
                        ->collection('thumbnails')
                        ->alignCenter(),
                    Tables\Columns\TextColumn::make('name')
                        ->alignCenter(),
                ])
                    ->space(3),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\ViewAction::make()
                    ->extraAttributes(['style' => 'display:none;']),
                Tables\Actions\EditAction::make(),
            ]);
    }

I'm using Spatie Media Library Plugin, I've even set responsiveImages() to the form component, but without specifying a height for the image, the image will be always too small for what I want to accomplish. Can anyone point me in the right direction to make the image responsive? I know I can pass a closuer to the height() option, I just don't know which way to use it properly (I tought of returning a specific height based on the breakpoint, but no clue how to get the breakpoint) Tahnk you very much in advance!

Solution:

Currently using size('100%') it's doing the trick (I promise I've been banging my head with this for at least 2h, but didn't thought this would actually work so I didn't try it until now 🤡 😂 ) I'll mark it as solved and leave this post over here in case anyone gets stuck with this issue.

Jump to solution

1 Reply

Solution

Esteban Ojeda•15mo ago

Gaming

Programming

Responsive Images in table rows