search

awcodes / filament-curator

A media picker plugin for Filament Panels.
MIT License
298 stars 79 forks source link

Unable to insert/select uploaded animated webp image #454

Open vstruhar opened 4 months ago

vstruhar commented 4 months ago

Filament Version

v3.2.35

Plugin Version

v3.5.0

PHP Version

PHP 8.3.3

Problem description

Unable to insert/select image after uploading animated webp images, because the Intervention Image package does not support it and throws an exception on src/Components/Forms/Uploader.php:109.

Intervention does support webp images, but it doesn't support animated webp images. Both have the same extension, that's why it is used by mistake with Intervention, by passing is_media_resizable check.

Is it possible to upload file and not use Intervention to get dimensions and exif?

Expected behavior

User should be able to insert/select animated webp images.

Steps to reproduce

  1. Select animated webp image
  2. After uploading click Insert button
  3. Exception is thrown

Reproduction repository

No response

Relevant log output

No response

awcodes commented 4 months ago

How would you propose getting those values without intervention?

awcodes commented 4 months ago

I'd prefer to use intervention because it handles the drivers for GD and Imagix. I really have no desire to support those natively. And the glide implementation uses it too. So even if it could be bypassed if you tried to output the media with the glider blade component I would think it would still throw an error.

vstruhar commented 4 months ago

I wouldn't mind if width, height and exif would be null, just add check inis_media_resizable when file has webp extension to also do a check if it is animated, if so then file is not resizable. Not sure if this would be desired since it would be unexpected to sometimes not have these values.

I also found a Wordpress function that can extract width, height and type from animated webp images, but I understand you don't want to go this route.

Another approach could be to enable the developer to manually handle this, something like saveUploadedFileUsing method that Filament has on FileUpload component.

awcodes commented 4 months ago

hmm. yea, but the width and height is important to have so that img tags can have the necessary attributes on them for proper html usage and things like preventing layout shift which can hurt Core Web Vitals.