Fixes #271 #274
Fixes #271 #274
Conversation
| @@ -415,7 +415,8 @@ class Image { | |||
| "sharpWebpOptions", | |||
| "sharpPngOptions", | |||
| "sharpJpegOptions", | |||
| "sharpAvifOptions" | |||
| "sharpAvifOptions", | |||
| "cacheKey" | |||
There was a problem hiding this comment.
Instead of this we could duplicate the logic of https://github.com/11ty/eleventy-img/blob/main/src/image.js#L142 here, but this would mean a not pretty workaround like:
transform: {[cacheKey]: function(sharp, stats) {
sharp.resize({
width: stats.width,
height: Math.floor(stats.width / cropRatio),
fit: Sharp.fit.cover,
position: Sharp.strategy.entropy,
});
}}[cacheKey],where:
cacheKey: 16 / 9is way cleaner if you ask me 😅 So i arrived at the solution i pushed here, to be able to influence the hash part of the filename if needed. Please see the sample-crop.js for the usecase.
Also the naming of this option could maybe be improved, i.e. hashKey?
| const src = "../test/bio-2017.jpg"; | ||
| const cropRatio = 16 / 7; | ||
|
|
||
| async function sanitizeWidths(widths) { |
There was a problem hiding this comment.
This removes all widths that would cause upscaling of the original image.
I could probably go a step further and try to build this kind of sanitization into 11ty image.
| return sanitizedWidths; | ||
| } | ||
|
|
||
| function getMaxCropWidth(originalWidth, originalHeight) { |
There was a problem hiding this comment.
This gets the max width for cropping without upscaling the original image.
I guess this is also a nice thing to have in the core? Although an opt-in through an option is probably a good idea, as it is likely not the wanted behavior for all usecases.
| @@ -681,7 +682,7 @@ class Image { | |||
| throw new Error("Expected `function` type in `transform` option. Received: " + transform); | |||
| } | |||
|
|
|||
| await transform(sharpInstance); | |||
| await transform(sharpInstance, { ...stat }); | |||
There was a problem hiding this comment.
Probably better to pass a clone instead of a reference here?
@zachleat This is the PR for #271, it optimizes the js api for cropping.
I left some comments in the code to start some discussions.