Srcset cropping and small source images

Kirby 3 Questions 🤔
1

I’ve got this srcset code that works fine generally. The images are cropped to a fixed landscape format.

<img srcset="
	<?= $projekt->images()->sortBy('sort')->first()->srcset([
		'400w'  => ['width' => 400, 'height' => 300, 'crop' => 'center', 'quality' => 80],
		'800w'  => ['width' => 800, 'height' => 600, 'crop' => 'center', 'quality' => 80]
	]) ?>"
	alt="<?= $projekt->images()->sortBy('sort')->first()->title() ?>"
/>

However if the source image is smaller than the output format, the image is apparently not cropped. In this case my user uploaded a source image with 640×480px, which seems to slip through the 800w-definition and is rendered in landscape mode thus:

Bildschirmfoto-2023-11-08-um-09.46.26
Bildschirmfoto-2023-11-08-um-09.46.261024×604 109 KB

One way to solve this would probably be to require a minimum size for the image. But can I also force a crop or maybe even a »blowup« of the image in order to get a landscape image?

Thanks for any hints!

2

You can resize images with $file->resize(). There are a lot more methods you can apply to files/images, such as cropping, changing JPEG quality, adding filters etc. See $file | Kirby CMS

3

Thanks. I would love to stick with srcset in this particular case. However I understand this might not be possible, just found the essential information »From a previous question I understand the srcset does not upscale images« from this thread Responsive images questions - #3 by Mark_E

I fixed the resulting layout-problem with css :slight_smile::

aspect-ratio: 4 / 3;
object-fit: cover;
object-position: 50%;
4

You can still resize all images that are smaller than required dimensions and then apply srcset on them.

1 Like