How about presets?

[stuartcusackie]

I think it was mentioned before but, are there any plans to add presets to this package? Similar to Statamic's presets

I was thinking that it might solve a lot of errors with image-heavy websites. I'm still using this package to generate images when launching sites and deploying design changes, otherwise my server will crash for hours until all images are manipulated.

[ncla]

In v3.0.0 I PR'd in extensible dimension calculator #193. In theory, reusing presets could be possible if you return dimensions equal to the ones defined in presets. Make sure you match up all Glide params 1:1. Technically, it is already possible.

Your package is still a decent solution to the problem IMO.

[ncla]

However once again, and continuing the conversation on Statamic Discord, doubt that you need this addon anymore. You are flying too close to the sun to not have a custom partial for this stuff, e.g. something what Peak starter-kit has.

[stuartcusackie]

The Peak docs are interesting. They say:
"php please static:warm --queue. That command will generate the static cache and generate all missing asset variants."
This doesn't seem true. If it is then static:warm it's already doing what my package does.

I guess I could build my own responsive components but it seems like a lot of work and code to maintain.

[ncla]

What if I told you, in my opinion, with current Antlers engine it would be possible to build a gigantic partial that does what this addon does? Crazy, huh? 😅

I cannot comment on static:warm command as I do not use it, not sure what exactly it does and not.

[stuartcusackie]

I would believe you. Peak seems to be half way there with it. Personally I don't like having lots of logic and complex functions in my template files. It also makes preset generation impossible.

static:warm fetches all of your entry's public urls with Guzzle, meaning that your first visitor is getting a faster, cached version of the page. Peak docs says that it also pre-warms responsive Glide manipulations but I don't believe it.

EDIT: It does warm them because Peak has glide caching enabled - Simply visiting an entry's url will generate all the images. However, when glide caching is off, this won't happen and you might need a solution like the package I am using.

[ncla]

Best ask on Peak repository then. Maybe an error in docs.

[stuartcusackie]

Interesting... I'm probably misunderstanding but does that mean this package could use the Statamic presets defined in config/assets.php, rather than new ones defined in config/responsive-images.php? I'm struggling to see how that would work when using different ratios per breakpoint.

[ncla]

Why do you want to define presets in responsive-images config? You can already do that in assets config.

[stuartcusackie]

Because Statamic uses pixel dimensions and this package uses ratios. I suppose this package could convert pixels in the config file to ratios automatically but there's another problem. Take this example:

@responsive($image, ['ratio' => '2/3', 'sm:ratio' => '1/1', 'md:ratio' => '4/3', 'lg:ratio' => '5/3', 'xl:ratio' => '2/1', '2xl:ratio' => '3/1'])

I don't think Statamic's presets could handle this easily:

'presets' => [
            'hero' => ['w' => 1500, 'h' => 500, 'fit' => 'crop_focal', 'fm' => 'webp'],
            'hero_sm' => ['w' => 1000, 'h' => 1000, 'fit' => 'crop_focal', 'fm' => 'webp'],
            ...?? How would this work for each breakpoint.

But config/reponsive-images.php could:

'presets' => [
            'hero' => ['ratio' => '2/3', 'sm:ratio' => '1/1', 'md:ratio' => '4/3', 'lg:ratio' => '5/3', 'xl:ratio' => '2/1', '2xl:ratio' => '3/1']), 'fit' => 'crop_focal', 'fm' => 'webp'],

[ncla]

Assuming the hero and hero_sm are valid dimensions which you use and know in advance, here is an example, untested code, how would you use dimensions specified in presets. You specify this code in ServideProvider.

$this->app->bind(DimensionCalculator::class, function () {
    return new class extends ResponsiveDimensionCalculator {
        public function calculateForBreakpoint(Source $source): Collection
        {
            // Let's say we are only interested in webp images
            if ($source->getFormat() === 'webp') {
                $presets = config('statamic.assets.image_manipulation.presets', []);

                $dimensionsFromPresets = collect($presets)->map(function ($preset) {
                    return new Dimensions($preset['w'], $preset['h']);
                })->values();

                return $dimensionsFromPresets;
            }

            // Default behavior
            return parent::calculateForBreakpoint($source);
            // or you can return no dimensions at all, the breakpoint/source will not output then
            // return collect([]);
        }
    };
});

I am not sure about the 'fit' => 'crop_focal' part tho, cus this addon explicitly defines crop focus.

[stuartcusackie]

Hmmm... Not quite sure if I'm getting this but on first glance it seems like we would lose some of the handy ratio per breakpoint stuff provided by the current blade directive / antlers tag. Also manual calculations might be a pain if I have 50+ sizes to calculate. I'll try it out when I get a chance.

[stuartcusackie]

I messed around with this for a while. I copied the GenerateResponsiveVersionsCommand and made a simple modification:

$assets->each(function (Asset $asset) {

  // Utilise custom presets
  foreach(config('statamic.responsive-images.presets') as $params) {
    
    // Pass custom preset as params
    $responsive = new Responsive($asset, new Parameters($params));

    $responsive->breakPoints()->each(function (Breakpoint $breakpoint) {
      $breakpoint->sources()->each(function (Source $source) {
      $source->dispatchImageJobs();
    });
  });

  $this->getOutput()->progressAdvance();

  }

});

This requires a new array variable in config/statamic/responsive-images.php. Example:

'presets' => [
  'hero' => ['ratio' => '2/3', 'sm:ratio' => '1/1', 'md:ratio' => '4/3', 'lg:ratio' => '5/3', 'xl:ratio' => '2/1', '2xl:ratio' => '3/1']
]

It works but it takes 3 minutes per image with the single preset as defined above. This particular preset would be the most demanding out of all of them - I wouldn't normally have a different ratio for every breakpoint.

Slowness is probably down to the fact that I am running this command locally and the image in question is 1mb on Digital Ocean storage. Glide seems to be re-fetching the image over and over from DO for every single manipulation.

There are 144 manipulations produced by this preset. If I had 10 presets likes this then I would imagine it could take 10 minutes per image. I have 1000 images = 166 hours! So this idea doesn't seem feasible without major optimisation on Glide's / Statamic's part, i.e. don't re-retrieve the file for every manipulation. Perhaps I can add a custom job to generate all manipulations at once... 🤔