This is a 2-in-1 project: Filament admin panel to manage companies/cities/categories, and a front-end classified website to show that catalog of companies with filters and search.
It's an example of how you can use a totally different CSS like Bootstrap, in a website part of your application, outside the Filament panel.
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...