diff --git a/eleventy.config.images.js b/eleventy.config.images.js index 32a0269..0b4a823 100644 --- a/eleventy.config.images.js +++ b/eleventy.config.images.js @@ -1,22 +1,38 @@ const path = require("path"); const eleventyImage = require("@11ty/eleventy-img"); -module.exports = eleventyConfig => { - function relativeToInputPath(inputPath, relativeFilePath) { - let split = inputPath.split("/"); - split.pop(); +function relativeToInputPath(inputPath, relativeFilePath) { + let split = inputPath.split("/"); + split.pop(); - return path.resolve(split.join(path.sep), relativeFilePath); + return path.resolve(split.join(path.sep), relativeFilePath); + +} + +function isFullUrl(url) { + try { + new URL(url); + return true; + } catch(e) { + return false; } +} +module.exports = function(eleventyConfig) { // Eleventy Image shortcode // https://www.11ty.dev/docs/plugins/image/ eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) { // Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats // Warning: Avif can be resource-intensive so take care! let formats = ["avif", "webp", "auto"]; - let file = relativeToInputPath(this.page.inputPath, src); - let metadata = await eleventyImage(file, { + let input; + if(isFullUrl(src)) { + input = src; + } else { + input = relativeToInputPath(this.page.inputPath, src); + } + + let metadata = await eleventyImage(input, { widths: widths || ["auto"], formats, outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin. @@ -29,6 +45,7 @@ module.exports = eleventyConfig => { loading: "lazy", decoding: "async", }; + return eleventyImage.generateHTML(metadata, imageAttributes); }); };