Per image sizes and maybe cropping

[joshkpeterson]

Hi there,

Just a heads up, I'm interested in being able to define per-image what the sizes should be in the template rather than in kirby's options, and also whether or not to crop them. I may end up trying this myself, although I'm new to kirby and php so it's taking me a little longer to grok how to modify this plugin.

Was curious what you think about one design decision pertaining to that. Would it be better to crop the images upon file upload, before they even hit the plugin? This seems more logical, but maybe harder to do because all the machinery is already in place to crop with the plugin per-image if you're already defining the sizes per-image.

Thanks!

Edit: clarifying, I want to be able to define the width and the height of the source images that are created and defined (e.g. 480w), not the sizes attribute

[jancbeck]

Hi @joshkpeterson thanks for your suggestion. While I like the idea of having control over the generated sizes on a per-image basis, I worry that this might become a very convoluted syntax.

How would you express the default sizes for example in markdown?

$sources_arr = array(
            'small'  => array('width' => 480),
            'medium' => array('width' => 768),
            'large'  => array('width' => 1200),
        );

Any solution I can come up with is less than ideal to write or read not to mention remember. What are your thoughts on that?

[joshkpeterson]

Thanks @jancbeck!

I came up with a different solution. My use-case is I made a brochureware site for a business where I wanted them to be able to swap out text and image content, but not really add new pieces of content. And the client isn't creating new blog posts, or really writing markdown for anything.

I ended up just doing this:

1. For each image, make a Selector plugin field
2. Use srcset (include picturefill for IE)
3. Use kirby's crop() for each source. Kirby crops at runtime, but these images are saved in the thumbnails folder so in practice in production, they should already be created for 99% of users.

Sample code below!

<img sizes="(min-width: 550px) calc(50vw - 48px), calc(100vw - 24px)" srcset=" <?php echo $person->headshot()->toFile()->crop(351, 435, 70)->url() ?> 351w, <?php echo $person->headshot()->toFile()->crop(703, 872, 80)->url() ?> 703w, <?php echo $person->headshot()->toFile()->crop(904, 1121, 80)->url() ?> 904w, <?php echo $person->headshot()->toFile()->crop(684, 848, 70)->url() ?> 684w, <?php echo $person->headshot()->toFile()->crop(1364, 1992, 80)->url() ?> 1364w" alt="<?php echo $person->name()->html() ?>">

So if the client wants, they can select a new image, and it'll just get produced at each size using crop().

Cheers