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);
|
||
} |