Filament•3mo ago

Spatie media library responsive images

Could somebody please walk me through the process of creating responsive images using spatie media library plugin for filament on v3? ~~all of a sudden the live version of my blog decided to stop showing images on mobile devices so now i have to generate images with different sizes.~~ this turned out to be a faulty css (my mistake) Even though i refreshed the browser a few times on my phone nothing worked. Desktop version is doing fine. So anyway, i decided to try the spatie media library plugin but already it seems impossible to comprehend off of just the documentation. 😎 https://filamentphp.com/plugins/filament-spatie-media-library

Filament

Spatie Media Library by Filament - Filament

Filament support for Spatie's Laravel Media Library package.

8 Replies

warpigOP•3mo ago

My form component looks like this:

SpatieMediaLibraryFileUpload::make('thumbnail')
                        ->required()
                        ->collection('thumbnails')
                        ->responsiveImages(),

SpatieMediaLibraryFileUpload::make('thumbnail')
                        ->required()
                        ->collection('thumbnails')
                        ->responsiveImages(),

Form component: https://filamentphp.com/plugins/filament-spatie-media-library#form-component Generating responsive images: https://filamentphp.com/plugins/filament-spatie-media-library#generating-responsive-images I learnt that you have to have a collection otherwise responsive images won't work.

Filament

Spatie Media Library by Filament - Filament

Filament support for Spatie's Laravel Media Library package.

warpigOP•3mo ago

Table component:

SpatieMediaLibraryImageColumn::make('thumbnail')
                    ->collection('thumbnails'),

SpatieMediaLibraryImageColumn::make('thumbnail')
                    ->collection('thumbnails'),

at first i couldn't display anything but later found out about the APP_ENV thing, so now i can show images. changed my variable to

(APP_URL=http://127.0.0.1)

(APP_URL=http://127.0.0.1)

warpigOP•3mo ago

the method on my Post model has all of the classes imported and i am utilizing just one conversion 'thumb':

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;

class implements HasMedia
use InteractsWithMedia;

public function registerMediaConversions(Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(368)
            ->height(232)
            ->withResponsiveImages();
    }

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;

class implements HasMedia
use InteractsWithMedia;

public function registerMediaConversions(Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(368)
            ->height(232)
            ->withResponsiveImages();
    }

Preparing my model:https://spatie.be/docs/laravel-medialibrary/v11/basic-usage/preparing-your-model https://spatie.be/docs/laravel-medialibrary/v11/converting-images/defining-conversions what i understand now is that,

registerMediaConversion

registerMediaConversion

method is used to specify "conversions" and you can apply several methods to it, since i need to have several responsive images, i am using

withResponsiveImages()

withResponsiveImages()

~~filament will then auto generate medium, large and extra large versions for my post images.~~ edit: i actually had to add several conversions, for example:

$this->addMediaConversion('small')
            ->width(320)
            ->height(240)
            ->nonQueued(); <- this part saved the day basically

$this->addMediaConversion('small')
            ->width(320)
            ->height(240)
            ->nonQueued(); <- this part saved the day basically

Preparing your model | laravel-medialibrary

laravel-medialibrary

Defining conversions | laravel-medialibrary

laravel-medialibrary

warpigOP•3mo ago

and finally, the blade:

<img
                src="{{ $post->getFirstMediaUrl('thumbnails') }}"
                srcset="{{ $post->getFirstMedia('thumbnails')->getSrcset('thumb') }}"
                alt="{{ $post->title }}"
            >

<img
                src="{{ $post->getFirstMediaUrl('thumbnails') }}"
                srcset="{{ $post->getFirstMedia('thumbnails')->getSrcset('thumb') }}"
                alt="{{ $post->title }}"
            >

https://spatie.be/docs/laravel-medialibrary/v11/responsive-images/getting-started-with-responsive-images what i understand from this is that i can use srcset to display the collection of responsive images which depending on the context the image should resize and have to reference the collection as well as the conversion as you can see.

Getting started with responsive images | laravel-medialibrary

laravel-medialibrary

warpigOP•3mo ago

what is the problem? several. actually. 1) one single image gets stored within the

storage/app/public/1

storage/app/public/1

route, no collection of images are created. i learnt that the desired outcome should output something like this:

storage/app/public/1/
├── conversions/
├── responsive-images/
└── original_image.webp

storage/app/public/1/
├── conversions/
├── responsive-images/
└── original_image.webp

this is the result on the html:

<img src="http://127.0.0.1/storage/1/01J7VAF1JW0B3FPZ6BHAX2YQS5.webp" srcset="" alt="Beatae ut ut rerum cupiditate similique omnis.">

<img src="http://127.0.0.1/storage/1/01J7VAF1JW0B3FPZ6BHAX2YQS5.webp" srcset="" alt="Beatae ut ut rerum cupiditate similique omnis.">

all i get is a blank srcset and can only grab the original image. 🥳 also, no conversions nor responsive-images folders are created either. 2) the thumbnail doesn't preview my image if i want to edit a post, the thumbnail preview on the form fails to load any image inside the thumbnail box. i really don't know what's going on here probably something outside the scope of filament?? so basically, that's it, thanks for reading this long ass post. i am usually not very good at deciphering plugins and get really anxious and skeptical about documentations as the end result almost never ever ever ever ever works out as they intended. probably because every situation is different than the controlled environment they propose, and i can understand that. i also understand there could be a few things im not considering before trying out these concepts, hope someone can help.

warpigOP•3mo ago

found a solution for creating folders: https://stackoverflow.com/questions/78482222/laravel-media-library-responsive-images basically add this to your env

QUEUE_CONVERSIONS_BY_DEFAULT=false

QUEUE_CONVERSIONS_BY_DEFAULT=false

by default the plugin processes image conversions using queues by default. if you do not have queues configured or running, then conversions and/or responsive images will not be generated.

Stack Overflow

Laravel media-library responsive images

I'm attempting to implement the responsive images feature of Laravel Spatie Media Library, but for some reason, it's not generating the images. I've tried registering a media conversion and applying

toeknee•3mo ago

or run php artisan queue:work

warpigOP•3mo ago

or add this at the end of your registered media conversions

->nonQueued();

->nonQueued();

Gaming

Programming

Spatie media library responsive images