Filament: Classifieds with Bootstrap Front-Page

For the Filament Panel, we have three resources to manage Category, City, and Company.

The company uses the spatie/laravel-medialibrary package to manage images. For the image field in the form for the company, we are using the official Filament plugin Spatie Media Library.

For image upload, we call the SpatieMediaLibraryFileUpload() method.

Forms\Components\SpatieMediaLibraryFileUpload::make('logo'),

To show the image, the SpatieMediaLibraryImageColumn() method is used with the conversion() to show the generated thumbnail.

Tables\Columns\SpatieMediaLibraryImageColumn::make('logo')
    ->conversion('thumb'),

We are creating an image conversation called thumb.

app/Models/Company.php:

use Spatie\Image\Manipulations;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
 
class Company extends Model implements HasMedia
{
    use InteractsWithMedia;
 
    public function registerMediaConversions(Media $media = null): void
    {
        $this
            ->addMediaConversion('thumb')
            ->fit(Manipulations::FIT_CONTAIN, 300, 300)
            ->nonQueued();
    }
}

In the frontend, we are showing...