K3 srcset plugin together with focuscrop plugin

Kirby 3 Questions šŸ¤”
21

no. the w/h is not fixed in the config ā€“ you just let srcset know you want to use focuscrop in some cases. thatā€™s what the config value resize taking a callback does.

the new thing you need to create the the needsCrop filemethod in a tiny plugin of your own. it needs to check if a file needs focuscrop (based on template, name of field etc.) and use the width provided from the srcset plugin to calculate the width and height for it (the $c that will be used in the callback). or return null.

22

Oh myā€¦ this is starting to sound a bit out of my leagueā€¦ but keep talking, I might understand in a minuteā€¦

23

basiclly think of the srcset plugin as an issuer of thumbs. it does not create them itself. the default just happens to be the resize method used in the callback.
btw i did it like that so my thumb-image-optim plugin will be executed (on resize).

24

lets get more specific. which files will be focuscropped in you templates? all of them? just a header image? whats it fieldname?

25

All of them. I mostly do it with hero banners accross the top hence the large size above, but honestly, it could be any image, from anywhere, from a field or directly from the file iteself.

26

ah. check the focuscrop pluginā€¦ so each file with that uses it will have a field focus right? then just do thisā€¦

maybe @flokosiol can help you get the w/h right.

https://getkirby.com/docs/reference/plugins/extensions/file-methods

Kirby::plugin('my/plugin', [
    'fileMethods' => [
        'needCrop' => function ($width) {
            $focusFieldKey = option('flokosiol.focus.field.key', 'focus');
            if($this->$focusFieldKey()->isNotEmpty()) {
              // calcs here
              // use these https://github.com/flokosiol/kirby-focus#some-more-stuff-
               return [
                  'w' => $yourCalcWidthRatio * $width,
                  'h' => $yourCalcHeight,
               ];
            }
            return null;
        }
    ]
]);
27

Kind of ā€¦ the field goes in the meta file, set in the file blue print. The meta gets stamped with an X and Y coordinate.

28

i think its just one field. but it might not be named focus if you changed the config.

29

Sure, i was just making it clear the X and Y information gets stored in the files meta file, not the content file for the page.

30

ah ok. but thats fine. the filemethod is accessing the meta-data file (aka content file of file).
edited: i updated the sourcecode above to reflect the dynamic name of the field.

31

Unfortunately this wonā€™t work, because the Focus plugin wonā€™t calculate any height based on the width. Both values (width and height) are passed as arguments like ā€¦

<?= $image->focusCrop(200, 300) ?>

Using focusCrop() within the resize option might work if you can calculate the width and height by yourself, maybe based on the image file template (untested) ā€¦

'resize' => function ($file, $width, $type) {
    if ($file->template() == 'myTemplate') { 
        $height = floor($width * 0.6);
        return $file->focusCrop($width, $height);
    }
    return $file->resize($width);
}

ā€¦ or based on the page template ā€¦

if ($file->page()->intendedTemplate() == 'myTemplate') { ... }

Of course you can move your calculation to a custom file method like the needCrop() one above, but you will need to calculate the width and height by yourself.

32

@flokosiol thanks for taking the time to explain that.

1 Like
33

Thanks @flokosiol and @bnomei for the guidance but I fear it might be a little beyond my powers. Iā€™ll give it a go though.

@flokosiol I did notice that the K3 version doesnt seem to return the X and Y values when you use the image as a background and want to position it with background-position..

Edit: potentially my mistake, I donā€™t think i ran it through ->tofile()