Filament•11mo ago

Spatie Media Library Conversions

So I already have collections setup and have them automatically convert/crop to a particular resolution and currently handle png, jpg, and webp, but I I would also like to be able to accept HEIC and AVIF files. With that said though, I think i would prefer to just convert them all over to jpg before resizing. Shouldnt i be able to do something like so and then just referencing the registered collection at the spatie upload field? As far as I can see, latest versions of imagick support heic and avif.

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('additional')
            ->useDisk('s3')
            ->registerMediaConversions(function (Media $media) {
                $this
                    ->addMediaConversion('850w')
                    ->format(Manipulations::FORMAT_JPG)
                    ->fit(Manipulations::FIT_CROP, 850, 500)
                    ->background('dddddd');
            });
    }

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('additional')
            ->useDisk('s3')
            ->registerMediaConversions(function (Media $media) {
                $this
                    ->addMediaConversion('850w')
                    ->format(Manipulations::FORMAT_JPG)
                    ->fit(Manipulations::FIT_CROP, 850, 500)
                    ->background('dddddd');
            });
    }

and

SpatieMediaLibraryFileUpload::make('additional')
    ->collection('additional')
    ->acceptedFileTypes(
        ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'image/bmp', 'image/heic', 'image/avif']
    )
    ->disk('s3')
    ->conversionsDisk('s3')
    ->visibility('public')
    ->multiple(),

SpatieMediaLibraryFileUpload::make('additional')
    ->collection('additional')
    ->acceptedFileTypes(
        ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'image/bmp', 'image/heic', 'image/avif']
    )
    ->disk('s3')
    ->conversionsDisk('s3')
    ->visibility('public')
    ->multiple(),

29 Replies

DrByte•10mo ago

Yes, that looks about right. Looks a lot like what I use for generating some simple thumbnails.

Mark Chaney•10mo ago

idk why its not doing it then. guess i need to dig deeper

DrByte•10mo ago

DrByte•10mo ago

Here's my code from a current Filament project, in case it helps you. I'm using .env to config the disk to s3, which is why it's not mentioned here.

Mark Chaney•10mo ago

@drbyte i dont see where you are converting the file types to another type before you manipulate the dimensions. Thats the entier point of this thread. I am already cropping them just fine. Am i missing something?

DrByte•10mo ago

Right. Apologies, I lost sight of that factor when I re-read the post today. I'm inclined to think that the problem there is unrelated to Filament/Livewire,and you might therefore find some issues/discussions about it in the Spatie media-library repo. I just tested in my current app forcing conversion to JPG, and it seems to work fine for JPG BMP GIF images, but HEIC is just stalling without error messaging. Hmmm... It does indeed upload the file to the filesystem via livewire, but doesn't finish the conversion and save the association. Oh duh. HEIC is stalling here because my local install is using GD cuz it doesn't have Imagick installed. At least it's flagging up an error saying it can't convert because GD doesn't support it ... which confirms that the mediaConversion rule is firing.

Mark Chaney•10mo ago

@drbyte so you were able to convert to JPG and change dimensions, etc? I even tried with a bmp and it seemed to stay at the original

DrByte•10mo ago

Yes, my large png images converted to smaller 300x300 jpg's, and had the "-preview.jpg" suffix applied to them and then they were uploaded to S3.

                  $this
                    ->addMediaConversion('preview')
                    ->format(Manipulations::FORMAT_JPG)
                    ->fit(Manipulations::FIT_CROP, 300, 300)

                  $this
                    ->addMediaConversion('preview')
                    ->format(Manipulations::FORMAT_JPG)
                    ->fit(Manipulations::FIT_CROP, 300, 300)

wyChoong•10mo ago

i have these and its working for me

$this
            ->addMediaCollection('banner')
            ->registerMediaConversions(function (Media $media) {
                $thumb = $this
                    ->addMediaConversion('thumbnail')
                    ->nonQueued()
                    ->format(Manipulations::FORMAT_WEBP)
                    ->height(350);

                $ratio = 3 / 2;
                $width = 400;
                $height = round(400 / $ratio, 2);

                $photo = $this
                    ->addMediaConversion('mobile')
                    ->format(Manipulations::FORMAT_WEBP)
                    ->nonQueued()
                    ->fit(Manipulations::FIT_CONTAIN, $width);

                $this->addMediaConversion('mobile-cropped')
                    ->format(Manipulations::FORMAT_WEBP)
                    ->nonQueued()
                    ->crop(Manipulations::CROP_CENTER, $width, $height);
            });

SpatieMediaLibraryFileUpload::make('banner')
                            ->collection('banner')
                            ->image()
                            ->maxFiles(1)

$this
            ->addMediaCollection('banner')
            ->registerMediaConversions(function (Media $media) {
                $thumb = $this
                    ->addMediaConversion('thumbnail')
                    ->nonQueued()
                    ->format(Manipulations::FORMAT_WEBP)
                    ->height(350);

                $ratio = 3 / 2;
                $width = 400;
                $height = round(400 / $ratio, 2);

                $photo = $this
                    ->addMediaConversion('mobile')
                    ->format(Manipulations::FORMAT_WEBP)
                    ->nonQueued()
                    ->fit(Manipulations::FIT_CONTAIN, $width);

                $this->addMediaConversion('mobile-cropped')
                    ->format(Manipulations::FORMAT_WEBP)
                    ->nonQueued()
                    ->crop(Manipulations::CROP_CENTER, $width, $height);
            });

SpatieMediaLibraryFileUpload::make('banner')
                            ->collection('banner')
                            ->image()
                            ->maxFiles(1)

so could be your environment issue? seeing your conversion is without ->nonQueued is your queue running?

DrByte•10mo ago

Regarding HEIC, I just had something happen I didn't expect: I had reverted all the changes I'd posted here, so wasn't doing any format conversions, just cropping like this:

    $this->addMediaConversion('preview')
        ->fit(Manipulations::FIT_CROP, 300, 300)
        ->nonQueued();

    $this->addMediaConversion('preview')
        ->fit(Manipulations::FIT_CROP, 300, 300)
        ->nonQueued();

and on the form I have ->acceptedFileTypes(['image/jpeg', 'image/png']) ... and the browser let me pick an HEIC file, and it converted it to JPG before storing it. Granted, it also mangled/changed the filename to tempImageuw3Ro8-preview.jpg instead of IMG_4830.HEIC. Subsequent tests with additional heic images are doing the same. I can't say I understand "why" it did this, but if the side-effect is that my app also now accepts HEIC without side-effects, I'm not going to complain.

Mark Chaney•10mo ago

that doesnt make sense though. you obviously wouldnt want something converting things unless you told it to do so and to what formats, etc. Has to be some config somewhere else controlling it also, you both are just using GD and dont have the drive setup to use imagick in the config?

DrByte•10mo ago

Correct. Ya, it's strange. Source Control doesn't show anything off either.

awcodes•10mo ago

Looking at the code for spatie media library doesn’t look like they offer any support for heic in their image converter. And freek said he recommends people convert them before uploading them. Granted that comment was like a year ago.

awcodes•10mo ago

https://github.com/spatie/laravel-medialibrary/blob/main/src/Conversions/ImageGenerators/Image.php

GitHub

laravel-medialibrary/src/Conversions/ImageGenerators/Image.php at m...

Associate files with Eloquent models. Contribute to spatie/laravel-medialibrary development by creating an account on GitHub.

DrByte•10mo ago

Ya, I was reading a few Issues and PRs about it last night. One of the PRs that got closed had no tests ... and wouldn't have worked fully anyway unless the heic support was pushed into the imagick loop (which didn't exist at the time of that PR anyway). Further, they also currently rely on league/glide for conversions, and it doesn't support HEIC either.

awcodes•10mo ago

Pretty sure they are using intervention image for the conversions. Glide also uses it. And Image relies on GD or imagik. And I don’t even think GD truly has support for it.

Mark Chaney•10mo ago

Imagick supports heic and avif. I think you can thrown in any conversion solution that it executes as part of a process in general.

awcodes•10mo ago

It has to support reading it too though. I know imagick supports it. But even that would still depend on what version is installed on your “server”

awcodes•10mo ago

Given the fact that it has to go through 3 different packages that all don’t have unified support though, it may be better to run them through something like https://laravel-news.com/php-heic-to-jpg in an observer though, if there’s a way to do it before it goes to spatie’s image converter.

Laravel News

Convert HEIC Images to JPEG in PHP

The php-heic-to-jpg PHP package is the easiest way to convert HEIC (High-Efficiency Image Container) images to JPEG with PHP and Laravel framework.

Mark Chaney•10mo ago

At that point, what not use imagik that does support all the different image types. I see no reason to use one package to handle one type unless you simply can’t get a newer version of imagick

awcodes•10mo ago

The point is that you’re counting on 3 other packages to possibly do something that you can force with 1 package. I don’t totally disagree with you, but if those 3 packages don’t do what you need then you have to intervene. They should do this or that and I agree but they don’t. So you have to bend them to your will.

Mark Chaney•10mo ago

right, but this package doesn solve it running at the right time either. If i can solve this standalone option for heic, i might as well do another option that would solve other types as well

wyChoong•10mo ago

Probably there is some heic sharing compatibility that auto convert for you on macOS And yes using Herd with GD I suppose Have not tested with HEIC specifically if that’s a concern

Albert Lens•10mo ago

And where exactly does this code go? I mean, in which file is this code in? I am starting to use Spatie Media Library and don't know where to customize this. Thank you.

DrByte•10mo ago

On your model. See https://spatie.be/docs/laravel-medialibrary/v10/converting-images/defining-conversions

Defining conversions | laravel-medialibrary

laravel-medialibrary

Albert Lens•10mo ago

Thanks!

DrByte•9mo ago

FYI, a PR was merged into the Spatie Media Library today which adds HEIC support. Still requires Imagick of course. https://github.com/spatie/laravel-medialibrary/pull/3399/files

GitHub

added HEIC support by boryn · Pull Request #3399 · spatie/laravel-m...

HEIC is supported by ImageMagick for more than two years already: added HEIC support when using 'imagick' extension HEIC test

Josh777•9mo ago

Should you want a simple solution: https://github.com/joshembling/image-optimizer

Gaming

Programming

Spatie Media Library Conversions