Esteban Ojeda Posts - Answer Overflow

Esteban Ojeda

•Created by Esteban Ojeda on 10/4/2023 in #❓┊help

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!

4 replies

FFilament

•Created by Esteban Ojeda on 9/1/2023 in #❓┊help

Conditionally disabling form fields

Hi all! I'm a beginner in Laravel and quite new on Filament, and I'm trying to conditionally disable some form fields on certain conditions. I've been using the ->disabledOn() method in form fields to disable them on edit page or create page, for example, but I now need to disable a FileUpload form in the Edit view only if it already has a file, and I have no clue of how to do this. Any push in the right direction would be a bless. I'm using Spatie Media Library and Shield Plugins (Maybe in the near future I have to conditionally disable a form field based on the user role) Thanks in advance!

7 replies

Gaming

Programming