https://github.com/brandcom/silverstripe-webp
https://github.com/brandcom/silverstripe-webp
silverstripe silverstripe-module webp
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/brandcom/silverstripe-webp
- Owner: brandcom
- License: mit
- Created: 2021-08-30T08:29:44.000Z (almost 5 years ago)
- Default Branch: ss5
- Last Pushed: 2023-12-21T13:38:00.000Z (over 2 years ago)
- Last Synced: 2024-11-08T20:08:38.183Z (over 1 year ago)
- Topics: silverstripe, silverstripe-module, webp
- Language: PHP
- Homepage:
- Size: 20.5 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# silverstripe-webp
The Plugin provides a helper to create html `` 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:
```yaml
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 `` 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 `` tags.
Example:
```
$MyImage.Picture.setWidths(150, 230, 550)
```
Defaults to `350, 750, 1500`.
#### setSizes(string $sizes)
Set the `sizes` attribute on the `` 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 `` tags / formats will be present. Defaults to webp and jpeg.
Available options:
* webp
* jpg/jpeg
To e.g. disable webp and only get one `` with a jpg `srcset`:
```
$MyImage.Picture.setFormats('jpg')
```
#### setAlt(string $value)
Sets the `alt` parameter on the `![]()
` tag. Defaults to the Image's title from the CMS.
#### setCss(string $value)
Sets the `class` parameter on the `![]()
` tag.
#### setWidth(int $width)
Set the `width` attribute on the `![]()
` tag. Defaults to the Image's original width.
#### setHeight(int $height)
Set the `height` attribute on the `![]()
` tag. Defaults to the Image's original height.
#### setParam(string $param, string $value)
Sets a parameter with the name `$param` on the `![]()
` 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:
```ss
)
```