jbennecker / silverstripe-webp
Installs: 818
Dependents: 0
Suggesters: 0
Security: 0
Stars: 3
Watchers: 0
Forks: 1
Open Issues: 0
Type:silverstripe-vendormodule
Requires
- php: ^8.1
- ext-fileinfo: *
- rosell-dk/webp-convert: ^2.9.2
- silverstripe/framework: ^5.0
README
The Plugin provides a helper to create html <picture>
elements in Silverstripe templates. It supports WebP sources out of the box.
Requirements
- SilverStripe 5.x
- rosell-dk/webp-convert ^2.9
- PHP >= 8.1
Install
Install via composer.
composer require jbennecker/silverstripe-webp
Register the plugin as a data extension for the Assets\Image
class:
SilverStripe\Assets\Image: extensions: - jbennecker\Webp\WebpExtension
Usage
The jbennecker\Webp\Picture
class provides a flexible Api to manipulate your picture in your template file.
To access the Api, call the getPicture()
method from the WebpExtension
like so:
$MyImage.Picture
This will be enough to output a <picture>
with standard configuration.
Api methods
The class provides multiple methods that can be called in any order. You can chain the methods, as they return the instance of the Picture class.
setWidths(int ...$widths)
The method will set the widths in the srcset
attribute in each of the picture's <source>
tags.
Example:
$MyImage.Picture.setWidths(150, 230, 550)
Defaults to 350, 750, 1500
.
setSizes(string $sizes)
Set the sizes
attribute on the <source>
tags a media-query. Defaults to 100w
.
$MyImage.Picture.setWidths(370, 750, 1920).setSizes("(min-width: 280px) 100vw, (min-width: 640px) 50vw")
setFormats(string ...$formats)
Control what <source>
tags / formats will be present. Defaults to webp and jpeg.
Available options:
- webp
- jpg/jpeg
To e.g. disable webp and only get one <source>
with a jpg srcset
:
$MyImage.Picture.setFormats('jpg')
setAlt(string $value)
Sets the alt
parameter on the <img>
tag. Defaults to the Image's title from the CMS.
setCss(string $value)
Sets the class
parameter on the <img>
tag.
setWidth(int $width)
Set the width
attribute on the <img>
tag. Defaults to the Image's original width.
setHeight(int $height)
Set the height
attribute on the <img>
tag. Defaults to the Image's original height.
setParam(string $param, string $value)
Sets a parameter with the name $param
on the <img>
tag.
$MyImage.Picture.setClass("w-full border shadow-lg").setParam("title", "This is a title")
setLazyLoading($lazy = true)
Control the loading
attribute. Sets it to lazy
or eager
. Defaults to lazy loading.
The Webp-Method
If you just want to quickly convert the image to .webp and use it in your template, you can use the Webp method:
<img src="$MyImage.Webp(900)" alt="">