K3 srcset plugin together with focuscrop plugin

jimbobrjames · January 21, 2019, 12:56pm

@bnomei Did a great job with the srcset plugin for Kirby 3, but I cant seem to chain it after focus crop. I’m also using it inside the Builder plugin, which may or may not be contributing to it not working.

This works…

<?= $data->imagefield()->toFile()->srcset([320, 480, 640, 800, 960, 1140]) ?>

This does not…

<?= $data->imagefield()->toFile()->focusCrop(1600,550)->srcset([320, 480, 640, 800, 960, 1140]) ?>

Is there a way around this?

bnomei · January 21, 2019, 12:58pm

what does focusCrop return? a field or a file/fileversion object?

jimbobrjames · January 21, 2019, 1:00pm

Hrmm… now you getting technical

I know you can do things like ->url() and hit up things in the original files meta file like alt text, after focusCrop so i guess its a file.

bnomei · January 21, 2019, 1:03pm

you could try removing the type \Kirby\Cms\File here:

github.com

bnomei/kirby3-srcset/blob/master/classes/Srcset.php#L7


<?php


namespace Bnomei;


class Srcset
{
public static function srcset(\Kirby\Cms\File $file, $preset = 'default', $lazy = null)
{
    if (!$file || !is_a($file, 'Kirby\Cms\File')) {
        return null;
    }


    $lazy = !is_null($lazy) ? $lazy : option('bnomei.srcset.lazy', false);
    $isLazy = $lazy !== null && $lazy !== false;
    $snippet = trim(option('bnomei.srcset.snippet', 'plugin-srcset'));
    return snippet($snippet, [
        'file' => $file,

github.com

bnomei/kirby3-srcset/blob/master/classes/Srcset.php#L27


        'file' => $file,
        'lazy' => (is_string($lazy) ? $lazy : ($lazy?'lazyload':'')),
        'isLazy' => $isLazy,
        'preset' => is_array($preset) ? implode(', ', $preset) : $preset,
        'img' => \Bnomei\Srcset::img($file, $preset, $lazy),
        'sources' => \Bnomei\Srcset::sources($file, $preset, $lazy),
        'autoSizes' => option('bnomei.srcset.autosizes')
    ], true);
}


public static function resizeWithType(\Kirby\Cms\File $file, int $width, string $type)
{
    if (!$file || !is_a($file, 'Kirby\Cms\File')) {
        return null;
    }


    $resize = option('bnomei.srcset.resize', null);
    if ($resize && is_callable($resize)) {
        return $resize($file, $width, $type);
    } else {
        return $file->resize($width);

github.com

bnomei/kirby3-srcset/blob/master/classes/Srcset.php#L53


    $presets = option('bnomei.srcset.presets');
    $presetWidths = is_array($preset) ? $preset : \Kirby\Toolkit\A::get($presets, $preset, []);
    if (in_array(0, $presetWidths) || count($presetWidths) == 0) {
        $presetWidths[] = intval($file->width());
    }
    sort($presetWidths, SORT_NUMERIC);
    $presetWidths = array_unique($presetWidths);
    return $presetWidths;
}


public static function img(\Kirby\Cms\File $file, $preset = 'default', $lazy = false)
{
    if (!$file && !is_a($file, 'Kirby\Cms\File')) {
        return null;
    }
    $captionFieldname = option('bnomei.srcset.img.alt.fieldname', 'caption');
    $presetWidths = self::presetWidthsForFile($file, $preset);
    return [
        'src' => $file->resize($presetWidths[count($presetWidths)-1])->url(), // trigger thumb if needed
        'alt' => $file->$captionFieldname()->isNotEmpty() ? $file->$captionFieldname()->value() : $file->filename(),
    ];

github.com

bnomei/kirby3-srcset/blob/master/classes/Srcset.php#L66


        return null;
    }
    $captionFieldname = option('bnomei.srcset.img.alt.fieldname', 'caption');
    $presetWidths = self::presetWidthsForFile($file, $preset);
    return [
        'src' => $file->resize($presetWidths[count($presetWidths)-1])->url(), // trigger thumb if needed
        'alt' => $file->$captionFieldname()->isNotEmpty() ? $file->$captionFieldname()->value() : $file->filename(),
    ];
}


public static function sources(\Kirby\Cms\File $file, $preset = 'default', $lazy = false)
{
    if (!$file && !is_a($file, 'Kirby\Cms\File')) {
        return null;
    }


    $presetWidths = self::presetWidthsForFile($file, $preset);


    $types = option('bnomei.srcset.types', []);
    if (count($types) == 0 || option('bnomei.srcset.types.addsource', false)) {
        $types[] = $file->mime();

bnomei · January 21, 2019, 1:06pm

and these as few times well… if it works i can try to fix it in next version today or tomorrow.

if (!$file && !is_a($file, 'Kirby\Cms\File')) {
  return null;
}

jimbobrjames · January 21, 2019, 1:09pm

So its like this instead?

public static function srcset($file, $preset = 'default', $lazy = null)

bnomei · January 21, 2019, 1:11pm

yes. (more text more text)

jimbobrjames · January 21, 2019, 1:12pm

It did not work unfourtunatly.

bnomei · January 21, 2019, 1:13pm

ok. what does this yield…

$f = $data->imagefield()->toFile()->focusCrop(1600,550);
echo gettype($f);
dump($f);

jimbobrjames · January 21, 2019, 1:14pm

bnomei · January 21, 2019, 1:17pm

so its a Kirby\Cms\FileVersion as i expected. i will take a look why the hack above did not work. but since i need to setup the focus plugin to do proper testing i might not be able to fix it today.

bnomei · January 21, 2019, 1:18pm

@distantnative could it be that chaining the focus and srcset plugin leads to chainign thumb calls? can resize be called on FileVersion object at all?

jimbobrjames · January 21, 2019, 1:21pm

Thanks @bnomei no huge rush but sometime soon would be awesome

flokosiol · January 21, 2019, 1:32pm

This might be the problem. As far as I know thumbs can’t be modified again.

@jimbobrjames: Since the focusCrop() method returns the same object as the crop() method, does it work with crop()?

flokosiol · January 21, 2019, 1:33pm

@bnomei Please let me know if there’s anything I could change in the Focus Plugin to make it work together with your plugin!

jimbobrjames · January 21, 2019, 1:36pm

Nope, it does not work with the ->crop() method either.

flokosiol · January 21, 2019, 6:17pm

Alright. Thanks for testing.

distantnative · January 21, 2019, 7:13pm

Let me dive into the code for a moment…

Edit:

Ok, so yes it seems like a FileVersion cannot be as simply chained as you would like to do it. It’s maybe something we could work on… but my own understanding is too limited at the moment to get onto it.

However, a quick idea I have: In your plugins, you could check whether you get a FileVersion object instead of a File object. If so, my train of thought is as follows:

FileVersion->original() should get you the original File object from the beginning of the chain
FileVersion->modifications() get you an array of the modifications that have been applied, basically the options for thumb generation from the previous step.
Take the modifications, merge them with your own modifications and apply them to the original File object.
That gives you a new FileVersion object, but this one now reflects modifications from all chain steps.
Return that one.

As said, I haven’t been able to test that thought process. But I’d be very curious to hear your thoughts or if this even works for you. Or maybe I am all wrong XD

bnomei · January 22, 2019, 5:08pm

@distantnative @jimbobrjames @flokosiol
i gave this some thought… as much as i like the idea of chaining it seems quiet complex for thumbs in concern to multiple plugins. but in our case this might not be needed. my srcset plugin already provides a hook for other resize calls. maybe you could think of focuscrop just like one single resize call.

github.com

bnomei/kirby3-srcset/blob/master/config.php#L13


Kirby::plugin('bnomei/srcset', [
'options' => [
    'lazy' => false, // bool or class-name
    'autosizes' => false, // https://github.com/aFarkas/lazysizes#markup-api
    'presets' => [
        'default' => [320, 0],
        'breakpoints' => [576, 768, 992, 1200],
    ],
    'snippet' => 'plugin-srcset-picture',
    'types' => [],
    'resize' => function ($file, $width, $type) {
        // NOTE: override and do something with $type
        return $file->resize($width);
    }
],
'snippets' => [
    'plugin-srcset-picture' => __DIR__ . '/snippets/srcset-picture.php',
    'plugin-srcset-img' => __DIR__ . '/snippets/srcset-img.php',
    'plugin-srcset-image' => __DIR__ . '/snippets/srcset-img.php',
],
'fileMethods' => [

so maybe using this config:

    'resize' => function ($file, $width, $type) {
        /* 
         *  @jimbobrjames: custom filemethod return null or [w,h]
         * you need to take care of calculations from 1600,550 to a w/h like 320,110
         */
        if($c = $file->needsCrop($width)) { 
            return $file->focusCrop($c['w'], $c['h']);
        }
        return $file->resize($width);
    }

and a call like this:

<?= $data->imagefield()->toFile()->srcset([320, 480, 640, 800, 960, 1140]); ?>

jimbobrjames · January 22, 2019, 5:33pm

Thanks for giving it thought. However if i understand you correctly, wouldnt that make it a “one shot wonder” - I could only ever do it for that specific size becuase it would be set in the config?

How hard would it be to meld the two plugins, so that your natively looks up the focus point and handles the crop around that point?

Topic		Replies	Views
V3.1.0-rc1 image srcset Solved ✅	16	1099	March 16, 2019
Problem getting kirby-builder to work with kirby3-srcset Solved ✅	6	591	October 16, 2019
Using crop with srcset	4	447	March 24, 2023
Srcset Plugin based on Documentation / Small error in documentation Solved ✅	1	281	May 23, 2019
Newbie question about $image->srcset() method Solved ✅	2	278	September 10, 2021

K3 srcset plugin together with focuscrop plugin

Related topics