$file->srcset()
Create a srcset definition for the given sizes Sizes can be defined as a simple array. They can also be set up in the config with the thumbs.srcsets option.
$file->srcset(array|string|null $sizes = null): string|nullParameters
| Name | Type | Default |
|---|---|---|
| $sizes | arrayorstringornull |
null
|
Return types
stringornull
This method modifies the existing $file object it is applied to and returns it again.
Parent class
Example
<img
src="<?= $image->url() ?>"
srcset="<?= $image->srcset([300, 800, 1024]) ?>" />Modify width definition
$image->srcset([
800 => '1x',
1600 => '1.5x'
]);More complex sizes options
The $sizes parameter also accepts an associated array of options:
$image->srcset([
'1x' => [
'width' => 38,
'height' => 38,
'crop' => 'center'
],
'2x' => [
'width' => 76,
'height' => 76,
'crop' => 'center'
],
'3x' => [
'width' => 152,
'height' => 152,
'crop' => 'center'
]
]);Convert image format
$image->srcset([
'400w' => ['width' => 400, 'format' => 'webp'],
'800w' => ['width' => 800, 'format' => 'webp'],
'1200w' => ['width' => 1200, 'format' => 'webp']
])Crop around focus point
Instead of passing a general crop area like 'center', you can set the crop option to true and Kirby will use each image's focus point:
$image->srcset([
'1x' => [
'width' => 38,
'height' => 38,
'crop' => true
],
'2x' => [
'width' => 76,
'height' => 76,
'crop' => true
]
]);Define presets
Simple example
return [
'thumbs' => [
'srcsets' => [
'default' => [300, 800, 1024],
'cover' => [800, 1024, 2048]
]
]
];Extended example
return [
'thumbs' => [
'srcsets' => [
'default' => [
'800w' => ['width' => 800, 'quality' => 80],
'1024w' => ['width' => 1024, 'quality' => 80],
'1440w' => ['width' => 1440, 'quality' => 80],
'2048w' => ['width' => 2048, 'quality' => 80]
]
]
]
];// default preset
$image->srcset();
// particular preset
$image->srcset('cover');