eehondas / silverstripe-webp
Installs: 85
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 0
Forks: 1
Type:silverstripe-vendormodule
Requires
- rosell-dk/webp-convert: ^2.6.0
- silverstripe/framework: ^4
This package is auto-updated.
Last update: 2024-12-04 07:02:33 UTC
README
The Plugin integrates simple WebP image conversion into Silverstripe.
Requirements
- SilverStripe 4.x
- rosell-dk/webp-convert ^2.6
- php >= 7.4
Install
Install via composer.
composer require jbennecker/silverstripe-webp
Register the plugin as a data extension for the Image
asset:
SilverStripe\Assets\Image: extensions: - jbennecker\Webp\WebpExtension
Usage
Convert images on the go in a Template, e.g. Example.ss
.
Create a responsive <picture>
element
You can create picture elements with responsive Webp and fallback sources:
$Image.WebpPicture(string $params, int ...$widths)
e.g.
$Image.WebpPicture('class="example" width="100" height="50"', 370, 550, 1200).RAW
Don't forget to append .RAW
in order to get unescaped html.
This will create the following html output (for .jpg input):
<picture> <source type="image/webp" srcset=" /webp/.../path/image.jpg-370px.webp 370w, /webp/.../path/image.jpg-550px.webp 550w, /webp/.../path/image.jpg-1200px.webp 1200w " /> <source type="image/jpeg" srcset=" /.../path/XYZimage__ScaleMaxWidth....jpg 370w, /.../path/XZXimage__ScaleMaxWidth....jpg 550w, /.../path/ABCimage__ScaleMaxWidth....jpg 1200w " /> <img src="/.../path/ABXimage__ScaleMaxWidth....jpg" class="example" width="100" height="50" alt="[$Image.Title]" /> </picture>
The fallback <img>
will have the average width of your defined ...$widths
.
Note: The alt
parameter is set automatically as no variables can be added to the $params
string.
Get srcset
string or a single WebP-Link
You can get srcset
sources with widths by using the $Image.WebpSet(120, 550, 700)
method and insert the string in a srcset
parameter of an <img>
tag.
Additionally, you can call $Image.Webp
to get a single url to the converted Webp file.
You will find additional help in the WebpExtension.php
file.