laravellaravel-filamentfilamentphp

Show images in view and editing with Filament Laravel


I am using Filament for first time, for Larvavel and I cannot see the images in the view and in the edit... If I can see them in the table like in the following screenshots: Table View

Mi code:

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\VenueResource\Pages;
use App\Filament\Resources\VenueResource\RelationManagers;
use App\Models\Venue;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;
use Filament\Tables\Columns\ImageColumn;


class VenueResource extends Resource
{
    protected static ?string $model = Venue::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('address')
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('region')
                ->required()
                ->maxLength(255),
                Forms\Components\TextInput::make('socials')
                ->required()
                ->maxLength(255),
                Forms\Components\TextInput::make('website')
                ->required()
                ->maxLength(255),
                Forms\Components\FileUpload::make('photos')
                ->label('Photosssss')
                ->multiple() 
                ->image() 
                ->directory('venue_photos')
                ->required(),
                Forms\Components\TextInput::make('description')
                    ->maxLength(255),
                Forms\Components\Select::make('created_by')
                    ->label('Created By')
                    ->required()
                    ->relationship('createdBy', 'name') // relationship to the User model
                    ->searchable() // alows searching
                    ->placeholder('Select a user'),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->searchable(),
                Tables\Columns\TextColumn::make('address')
                    ->searchable(),
                Tables\Columns\TextColumn::make('description')
                    ->searchable()
                    ->formatStateUsing(function ($state) {
                        return \Str::limit($state, 35, '...'); // Limit a string to a maximum of  10 characters
                    }),
                Tables\Columns\TextColumn::make('createdBy.name')
                    ->label('Created By')
                    ->numeric()
                    ->sortable(),
                Tables\Columns\TextColumn::make('region')
                ->searchable(),
                Tables\Columns\TextColumn::make('socials')
                ->url(fn ($record) => $record->socials, shouldOpenInNewTab: true)
                    ->sortable(),

                Tables\Columns\ImageColumn::make('photos.photo_url')
                ->circular()
                ->stacked()
                ->limit(3)
                ->limitedRemainingText(isSeparate: true),
                
                Tables\Columns\TextColumn::make('website')
                ->url(fn ($record) => $record->socials, shouldOpenInNewTab: true)
                    ->sortable(),
                        
                Tables\Columns\TextColumn::make('created_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
                Tables\Columns\TextColumn::make('updated_at')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\ViewAction::make(),
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListVenues::route('/'),
            'create' => Pages\CreateVenue::route('/create'),
            'view' => Pages\ViewVenue::route('/{record}'),
            'edit' => Pages\EditVenue::route('/{record}/edit'),
        ];
    }
}

Images are saved correctly in storage/public/venue_photos

where could the problem be?

How do I get the images to be seen in the views? Thank you


Solution

  • To control details view of the resource, you can use Infolists. Filament's infolist package allows you to render a read-only list of data about a particular entity. Infolists provide extensive control over the images. You can do something like this:

    public static function infolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema([
                //Other fields..
                ImageEntry::make('photots.photo_url')
            ]);
    }
    

    There are ton of customization options in the official documentation I provided above.