Installation
On package installation/start the following will happen:
- a total of five ThumbnailTypes will be installed, corresponding in size to the default Bootstrap breakpoints
- a new listener is introduced on 'ThumbnailGenerate' that will add a WebP version
- a second listener is introduced on 'ThumbnailDelete' that will remove the WebP version
- adds a template for the block "Image" called "Webp"
- adds a job for recreating all WebP Thumbnails
The core functionality of image uploads and thumbnail generation is not touched, only expanded. Ideally the user wont even know about WebP formats and gets much lighter images displayed.
WebP versions now get created on thumbnail creation and deleted on Thumbnail deletion. That means that existing thumbnails prior to package installation won't have a WebP sibling until the are recreated by the installed automated job.
What this package won't do:
The upload of WebP Images (even if allowed on the FileManager) will not get recognized as an image and won't have thumbnail versions. The goal of this package is not to enable WebP uploads but to present WebP in the frontend. It also don't creates WebP Images for the source files, just for the thumbnail.
Usage (quick)
install Package > upload image > add Block "Image" with uploaded Image > select template "Webp" for Block "Image"
If you wanna use the already uploaded Images you need to recreate the WebP Image siblings for them by running an automated job manually (/dashboard/system/optimization/jobs - "Create webp Thumbnails")
Get served the smallest-possible, as-big-as-required WebP thumbnail on all different screen sizes
Usage (custom, developer)
As in the template for the Block "Image" you can use LemonbrainWebp\ImageBrewer in your template. This provides ImageBrewer::get($fileID, $altText, $ratio, $objectFit, $misc, $classes) that returns a wrapped <picture> element with a <source> for both webp and the original file format.
Parameters:
- $fileID (required): Concrete File ID of your Media Item
- $altText (required): alt Text for your Image
- $ratio (default: auto): define a fixed ratio as X:Y or use auto to use the original ratio
- $objectFit (default: contain): use ['fill', 'cover', 'contain', 'none', 'scale-down'] according to CSS properties
- $misc: optional array of attributes you want on your element. ex: ['data-yourcustomstuff' => 'veryCustomStuff']
- $classes: string of additional classes
So it would be easy to create a new BlockType using an Image and have some ratios matching your design as a user selectable value and pass that to the ImageBrewer::get() function.
There is also a function for a json response ImageBrewer::getJson($fileID, $enableAddContent)
Parameters:
- $fileID (required): Concrete File ID of your Media Item
- $enableAddContent: If possible includes the content of the main image. Handy for SVG-Images.
Output:
The urls are just showing up, if a file is really existing on the filesystem. The last entry is alsways the source file
[ { 'name' => 'X-Large', 'handler' => 'xlarge', 'width' => 2000, 'url' => ..., 'url_webp' => ..., 'url_2x' => ..., 'url_webp_2x' => ..., }, { 'name' => 'Large', 'handler' => 'large', 'width' => 1200, 'url' => ..., 'url_webp' => ..., 'url_2x' => ..., 'url_webp_2x' => ..., }, { 'name' => 'Medium', 'handler' => 'medium', 'width' => 1000, 'url' => ..., 'url_webp' => ..., 'url_2x' => ..., 'url_webp_2x' => ..., }, { 'name' => 'Small', 'handler' => 'small', 'width' => 800, 'url' => ..., 'url_webp' => ..., 'url_2x' => ..., 'url_webp_2x' => ..., }, { 'name' => 'X-Small', 'handler' => 'xsmall', 'width' => 3000, 'url' => ..., 'url_webp' => ..., 'url_2x' => ..., 'url_webp_2x' => ..., }, { 'name' => 'Source', 'handler' => 'source', 'width' => $image->getWidth(), 'url' => $image->getURL(), 'content' => $content } ]
Feedback
We love to hear your thoughts via Mail.
Haveš„³Fun