How to modify width definition of srcset

Kirby 3 Solved ✅
1

I am trying to modify width definitions of srcset and having trouble. The following code works for me.

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

but I want to choose what image size to delivery at those breakpoints, and crop the image in the center. The ‘associated array of options’ is exactly what I need. Mentioned here in the docs.

Do I need both this:

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

AND this?

$album->cover()->srcset([
    '1x' => [
        'width' => 38,
        'height' => 38,
        'crop' => 'center'
    ],
    '2x' => [
        'width' => 76,
        'height' => 76,
        'crop' => 'center'
    ],
    '3x' => [
        'width' => 152,
        'height' => 152,
        'crop' => 'center'
    ]
]);

I tried to put use the associated array inline like this:

  <img
  src="<?= $album->cover()->url() ?>"
  srcset="<?= $album->cover()->srcset([
  '1x' => [
      'width' => 38,
      'height' => 38,
      'crop' => 'center'
  ],
  '2x' => [
      'width' => 76,
      'height' => 76,
      'crop' => 'center'
  ],
  '3x' => [
      'width' => 152,
      'height' => 152,
      'crop' => 'center'
  ]
  ]); ?>" 
  />

It doesn’t break entirely, but only delivers the 1x version. I don’t see how the browser would know what to do with ‘1x’ without something like this code block linking the two together.

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

but again, I don’t know where this would fit into the syntax, because the srcset attribute of the img tag is already full. Maybe it goes into the config file?

What is the syntax to implement what the second to last code block attempts to?

2

What exactly do you want to achieve? Have certain image width at given viewpoints (400w, 800w etc)? For example, because your layout changes from single column to three columns. Or provide image widths for different screen resolutions. Or both?

Because both examples you quote above do the exact same thing (only the longer one has a bit more settings). So it wouldn’t make sense to combine them. What you probably want is an additional sizes attribute like in this example: https://getkirby.com/docs/reference/objects/file/srcset#define-presets__extended-example?

1 Like
3

Thanks for the reply. What I want to be able to do is:
at 400px screen size, I want the image to load in at 200x200px center cropped.
at 600px screen size, I want the image to load in at 600x600px center cropped.

I would need a couple more break points but you get the gist.

Right now I can only get it to load 400x400px images at 400px screen size, 600x600px images at 600px screen size, etc, using the following block.

<img
 src="<?= $album->cover()->url() ?>"
 srcset="<?= $album->cover()->srcset([400, 600, 800]) ?>"/>

I just want to have custom sizes for the numbers in srcset([400, 600, 800])

I tried to put this into config.php to modify the definitions with avail.

return [
  'thumbs' => [
    'srcsets' => [
      'default' => [
        '400' => ['width' => 200, 'quality' => 80],
        '600' => ['width' => 600, 'quality' => 80],
        '800' => ['width' => 1440, 'quality' => 80]
      ]
  ]
  ]
];

How do I achieve this?

4

Set 400w, 600w and 800w and then add the height and crop center in the array, like in the example linked above.

   'srcsets' => [
      'default' => [
        '400w' => ['width' => 200, 'quality' => 80, 'height' => '200', 'crop' => 'center'],
        '600w' => ['width' => 600, 'quality' => 80, 'height' => '600', 'crop' => 'center'],
        '800w' => ['width' => 1440, 'quality' => 80, 'height' => '1440', 'crop' => 'center']
      ]
  ]
5

Still can’t figure out how to reference this inside my php file. This doesn’t work:

  <img
  src="<?= $album->cover()->url() ?>"
  srcset="<?= $album->cover()->srcset([400, 600, 800]) ?>" />

neither does this.

  <img
  src="<?= $album->cover()->url() ?>"
  srcset="<?= $album->cover()->srcset(['400w', '600w', '800w']) ?>" />

My config file looks like this:

return [
  'thumbs' => [
    'srcsets' => [
      'default' => [
        '400w' => ['width' => 200, 'quality' => 80, 'height' => '200', 'crop' => 'center'],
        '600w' => ['width' => 600, 'quality' => 80, 'height' => '600', 'crop' => 'center'],
        '800w' => ['width' => 1440, 'quality' => 80, 'height' => '1440', 'crop' => 'center']
      ]
  ]
  ]
];

How do I reference the defaults declared in the config file? Is my syntax wrong, or is there something I am misunderstanding here?

6

You then have to use your default set in your srcset call, otherwise it only does what you pass to it.

srcset="<?= $album->cover()->srcset('default') ?>"
2 Likes
7

Thank you, that is the syntax I was looking for. Have a good day :slight_smile: