Pagekit Finder doesn't support WebP image format

[humantex]

WebP images can be uploaded to storage once the webp extension has been added to the system settings for an accepted file type - but - they can't be used when trying to insert them into a page or blog post, or anywhere that the (Vue/Pagekit) Finder is used.

They can be seen in the popup in list or grid view, but selecting them or ticking their box is as far as you can get. 'Select' is not available to complete the insertion.

Developer solution, with the following caveats...

• Keep in mind that this will definitely break if you need to update Pagekit later on, so be warned that you'll need to do this all again until 'someone' decides to fix the core files to add this.
• This fix does NOT provide a fallback option to serve JPG or PNG files for browsers that dont accept WebP images. If you want to manually edit the page/widget source to include a fallback code block, refer to this code for using a <picture> element.
• This fix assumes that you're using the default editor. It may or may not produce the same results with TinyMCE.

1. Find the javaScript for the Finder to add the 'webp' mime type. Locate it at: /app/system/modules/finder/app/bundle/panel-finder.js. PLEASE make a copy before you edit the file.
2. It's a 'minified' script file, so unless you're comfortable editing it that way, use an online unminify tool - or your favorite code editor - to reformat it back to a readable/searchable state.
3. On, or near, line 154 is the function that checks for an acceptable mime type that the Finder can use.

The block, before:

isImage: function(e) {
                return e.match(/\.(?:gif|jpe?g|png|svg|ico)$/i)
            },

And after:

isImage: function(e) {
                return e.match(/\.(?:gif|jpe?g|png|svg|ico|webp)$/i)
            },

If you're editing raw, just locate the '|ico' text and append it with '|webp'. You may have to clear your browser and/or site cache once or twice before the images become visible as real images in the finder (assuming you're using a browser that supports WebP), and they become selectable.

If you only see the generic 'file' icon in the finder view when you should see an actual image, there's an issue with your edited script or your cache.