Filament•9mo ago

Opening images from a URL in a list

Hi sorry if this is a question that is easily answered reading the docs - a pointer to the relevant part would be great if an answer is not forthcoming here 🙂 So I have a filament resource that is listing table contents - here is the function

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('id')
                    ->label('ID')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('file_created')
                    ->dateTime()
                    ->sortable(),
                Tables\Columns\TextColumn::make('file_updated')
                    ->dateTime()
                    ->sortable(),
                    Tables\Columns\TextColumn::make('filename')
                    ->searchable()
                    ->sortable(),
                    Tables\Columns\TextColumn::make('url')
                    ,
                Tables\Columns\TextColumn::make('folder')->searchable()

                    ->sortable(),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('id')
                    ->label('ID')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('file_created')
                    ->dateTime()
                    ->sortable(),
                Tables\Columns\TextColumn::make('file_updated')
                    ->dateTime()
                    ->sortable(),
                    Tables\Columns\TextColumn::make('filename')
                    ->searchable()
                    ->sortable(),
                    Tables\Columns\TextColumn::make('url')
                    ,
                Tables\Columns\TextColumn::make('folder')->searchable()

                    ->sortable(),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

I am only displaying the url as I evolve this. I'd like the filename column to become a hypertext link which when clicked opens the url or an icon alongside it if that's the more current method. I'd like the link to be opened into a pop-up window (not a new browser window / tab) and ideally it would have "next / prev" options on it which would correspond to the next / previous records in the table as displayed at the time. I'm guessing this is easy to do and a common use case - pointers appreciated! many thanks, j

3 Replies

christmex•9mo ago

hey man, wht about using this plugin? https://filamentphp.com/plugins/njxqlus-lightbox havent try it but it seems to work with ur stuff

Filament

Lightbox by Mikael Ahabalyants - Filament

Lightbox components for Filament. Supports Spatie Media Library

jjo63OP•9mo ago

Thanks for the suggestion! I think my problem is even before this though - which is that I don't know how to embed usage of this (or anything equivalent) within my filament resources. If I were to guess I'd assume that it might be within this code within the table class

                  Tables\Columns\TextColumn::make('filename')
                    ->searchable()
                    ->sortable(),

                  Tables\Columns\TextColumn::make('filename')
                    ->searchable()
                    ->sortable(),

...but I really don't know where to start. Any pointers on this? I have had a look through the v3 docs and still cannot see how to turn the content of a column into a clickable icon or link to open the URL - I have discovered (and this is all really cool) how to show icons, display badges with the content in, set badge colours etc. - but this (what I assume is pretty fundamental) escapes me at present! Hi I didn't manage to make any progress with this (but have made big progress elsewhere with my project 🙂 ) - anyone able to help me with this question? I can only imagine it's simple.... if you know how!

awcodes•9mo ago

->formatStateUsing() and return new HtmlString(‘<a …></a>’) Maybe.

Gaming

Programming

Opening images from a URL in a list