$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.

• Since 3.1.0
• kirby/src/Cms/FileModifications.php#L131

$file->srcset(array|string|null $sizes = null): string|null

Copy

Parameters

Name	Type	Default
$sizes	array|string|null	null

Return type

string|null

Parent class

Kirby\Cms\File

Example

<img
src="<?= $image->url() ?>"
srcset="<?= $image->srcset([300, 800, 1024]) ?>" />

Copy

Modify width definition

$image->srcset([
  800  => '1x',
  1600 => '1.5x'
]);

Copy

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'
    ]
]);

Copy

Convert image format

$image->srcset([
  '400w'  => ['width' => 400, 'format' => 'webp'],
  '800w'  => ['width' => 800, 'format' => 'webp'],
  '1200w' => ['width' => 1200, 'format' => 'webp']
])

Copy

Define presets

Simple example

site/config/config.php

return [
  'thumbs' => [
    'srcsets' => [
            'default' => [300, 800, 1024],
            'cover' => [800, 1024, 2048]
        ]
  ]
];

Copy

Extended example

/site/config/config.php

return [
  'thumbs' => [
    'srcsets' => [
      'default' => [
        '800w' => ['width' => 800, 'quality' => 80],
        '1024w' => ['width' => 1024, 'quality' => 80],
        '1440w' => ['width' => 1440, 'quality' => 80],
        '2048w' => ['width' => 2048, 'quality' => 80]
      ]
  ]
  ]
];

Copy

// default preset
$image->srcset();

// particular preset
$image->srcset('cover');

Copy