Can I combine the new srcset() with crop()?

Kirby 3 Solved ✅
1

I’m trying something like this:

<?php $articleimage = $articlelist->images()->first()->crop(500,300)?>
      <img
          srcset="<?= $articleimage->srcset()?>"
          class="lazyload"
          data-sizes="auto"
          alt="<?= $articlelist->title()?>"/>

unfortunately this doesn’t work.

2

No, that doesn’t work. You can’t create thumbs from thumbs.

3

Hm ok. Is there a way to implement the “crop function” in the “srcset”? Or does anyone have any other idea how I can solve this?

4

I tried some things yesterday but they didn’t work. Can’t think of a workaround for the moment apart from creating a custom file method that does the same we would’ve done to create the srcset before the srcset method was introduced.

5

Need the same thing. There are always images, that need to be cropped. One possible solution is to use css object-fit: cover css property for image. This way you can “cut” image without actually cutting it. Con is that you have bigger file size, than you could, if it was actually cut, but on the other hand, if you resize image with srcset, it’s still smaller.

6

As I said above, the alternative is to create the srcset manually from the original file…

7

Has anyone actually proceeded and did something to made this work?

I see it’s also requested on github, but it’s only prio “mid”.

Thanks!

1 Like
8

I guess you could potentially use a file upload hook to duplicate the image, crop it as part of the dupe and store it in the content folder, then do your srcset from that file? That way it will be an image in its own right, rather then a thumb.

Not quite as slick, but might do until support for this is built in.

9

Then I’ll add up with hooks-spaghetti and duplicated files which I should keep in sync somehow too (again with hooks?)? Also for editors it would be confusing to have 2 images pop up (seamingly random) for them, just because I would be able to chain srcset() after crop()?

Imho this is not really “solved”.

10

I think currently your best option is to set up your array of source sizes and then loop through that array to render your srcset using crop on the original image. The height can be calculated from the ratio between width and height.

I’d probably create a custom method that adapts the srcset method for cropped images, i.e. using crop() instead of resize().

Mid priority doesn’t mean it can’t land in 3.2, it’s all still pretty much in flux. However, the reason that it is only mid priority is probably that the missing options are not really a show-stopper but rather “nice to have”.

1 Like
11

Adding for anyone coming later that this landed in Kirby 3.2: https://github.com/getkirby/kirby/pull/1806

12

thx @nilshoerrmann !