F
Filament•15mo ago
Mark Chaney

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
DrByte•15mo ago
Yes, that looks about right. Looks a lot like what I use for generating some simple thumbnails.
Mark Chaney
Mark ChaneyOP•15mo ago
idk why its not doing it then. guess i need to dig deeper
DrByte
DrByte•15mo ago
No description
DrByte
DrByte•15mo ago
No description
DrByte
DrByte•15mo 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
Mark ChaneyOP•15mo 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
DrByte•15mo 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
Mark ChaneyOP•15mo 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
DrByte•15mo 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
wyChoong•15mo 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
DrByte•15mo 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
Mark ChaneyOP•15mo 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
DrByte•15mo ago
Correct. Ya, it's strange. Source Control doesn't show anything off either.
awcodes
awcodes•15mo 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
awcodes•15mo 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
DrByte•15mo 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
awcodes•15mo 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
Mark ChaneyOP•15mo 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
awcodes•15mo 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
awcodes•15mo 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
Mark ChaneyOP•15mo 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
awcodes•15mo 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
Mark ChaneyOP•15mo 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
wyChoong•15mo 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
Albert Lens•15mo 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
DrByte•15mo ago
Albert Lens
Albert Lens•15mo ago
Thanks!
DrByte
DrByte•14mo 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
Josh777•14mo ago
Should you want a simple solution: https://github.com/joshembling/image-optimizer
Want results from more Discord servers?
Add your server