New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Resize and/or crop images? #65
Comments
@gbouteiller – Yes, you can resize and crop images using |
@Melzmr Can't figure out how to achieve that, can you share a snippet perhaps? |
@Melzmr I think @gbouteiller was looking for ways to specify crop parameters at the URI-level. eg if I have a responsive background image in a hero section, I want to the height to be fixed as I generate crops of different widths. |
So sharp has params for I guess it's possible to supply our own adapter, copying this one: https://github.com/herrstucki/responsive-loader/blob/master/src/adapters/sharp.js and then including all the args to One strategy would be to use the width param as an integer key:
that specifies one of a variety of settings used in our own site:
which then calls:
a la http://sharp.dimens.io/en/stable/api-resize/#parameters |
See #70 (comment) |
Here is my "works today" solution. It's somewhat of a hack (using the width parameter as an index into some presets), but it will work until there is a better way to do this. I'm using this with
// ./lib/sharp-adapter.js
const sharp = require("sharp");
/**
* Factory to make a sharp adapter function for use in response-loader.
* Width is interpreted as an integer index into the presets list supplied to the factory function.
*
* Usage:
*
* next.config.js
*
* const resizeOptions = {
* 1: {
* width: 1024,
* height: 682,
* fit: "cover"
* },
* 2: {
* width: 496,
* height: 593,
* fit: "cover"
* }
* };
*
* // make the adapter
* adapter: require("./lib/sharp-adapter")(resizeOptions)
*
* // usage
* const main = require(`./images/some-image.jpg?resize&sizes[]=1`);
* const thumb = require(`./images/some-image.jpg?resize&sizes[]=2`);
*/
function adapterFactory(resizeOptions) {
return imagePath => {
const image = sharp(imagePath);
return {
metadata: () => image.metadata(),
resize: ({ width, mime, options }) =>
new Promise((resolve, reject) => {
const resizeOpts = resizeOptions[width] || { width: width };
// console.log(width, mime, options, resizeOpts);
let resized = image.clone().resize(resizeOpts);
if (options.background) {
resized = resized.background(options.background).flatten();
}
if (mime === "image/jpeg") {
resized = resized.jpeg({
quality: options.quality
});
}
resized.toBuffer((err, data, { height }) => {
if (err) {
reject(err);
} else {
resolve({
data,
width: resizeOpts.width,
height: height
});
}
});
})
};
};
}
module.exports = adapterFactory; |
+1, I also need this! I want to pass the height / crop width/height via URL, like |
Is it possible to use this loader to also resize/crop images? For instance, it could be great to use it to create thumbnails with different ratio, ...
Thank you
The text was updated successfully, but these errors were encountered: