52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
const Image = require('@11ty/eleventy-img');
|
|||
|
|
|
|||
|
|
const defaultSizes = `
|
|||
|
|
(max-width: 600px) 300px,
|
|||
|
|
(max-width: 1000px) 600px,
|
|||
|
|
(max-width: 1440px) 1000px,
|
|||
|
|
1440px
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
const imageShortcode = (src, alt, cls, sizes = defaultSizes, widths = [300, 600, 1000, 1440]) => {
|
|||
|
|
let options = {
|
|||
|
|
widths: widths,
|
|||
|
|
formats: ['webp', 'jpeg'],
|
|||
|
|
outputDir: "./_site/img",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// generate images, while this is async we don’t wait
|
|||
|
|
Image(src, options);
|
|||
|
|
|
|||
|
|
let imageAttributes = {
|
|||
|
|
class: cls,
|
|||
|
|
alt,
|
|||
|
|
sizes,
|
|||
|
|
decoding: "async",
|
|||
|
|
};
|
|||
|
|
// get metadata even the images are not fully generated
|
|||
|
|
let metadata = Image.statsSync(src, options);
|
|||
|
|
return Image.generateHTML(metadata, imageAttributes);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const remoteImageShortcode = async (src, alt, cls, sizes = defaultSizes, widths = [300, 600, 1000, 1440, 2500, 3840]) => {
|
|||
|
|
let metadata = await Image(src, {
|
|||
|
|
widths,
|
|||
|
|
formats: ["webp", "avif", "jpeg", "png"],
|
|||
|
|
outputDir: "./_site/img",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let imageAttributes = {
|
|||
|
|
alt,
|
|||
|
|
class: cls,
|
|||
|
|
sizes,
|
|||
|
|
loading: "lazy",
|
|||
|
|
decoding: "async",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
|
|||
|
|
return Image.generateHTML(metadata, imageAttributes);
|
|||
|
|
}
|
|||
|
|
module.exports = function(eleventyConfig) {
|
|||
|
|
eleventyConfig.addShortcode("image", imageShortcode);
|
|||
|
|
eleventyConfig.addAsyncShortcode("remoteImage", remoteImageShortcode);
|
|||
|
|
}
|