feat: add image shortcode
This commit is contained in:
parent
189cc0a829
commit
ad435a16db
6 changed files with 446 additions and 9 deletions
33
config/shortcodes/image.js
Normal file
33
config/shortcodes/image.js
Normal file
|
@ -0,0 +1,33 @@
|
|||
const Image = require("@11ty/eleventy-img");
|
||||
|
||||
const imageShortcode = async (
|
||||
src,
|
||||
alt,
|
||||
className = undefined,
|
||||
widths = [400, 800, 1280],
|
||||
formats = ["webp", "jpeg"],
|
||||
sizes = "100vw",
|
||||
) => {
|
||||
const metadata = await Image(src, {
|
||||
widths: [...widths, null],
|
||||
formats: [...formats, null],
|
||||
outputDir: "dist/assets/images",
|
||||
urlPath: "/assets/images",
|
||||
});
|
||||
|
||||
let imageAttributes = {
|
||||
alt,
|
||||
sizes,
|
||||
loading: "lazy",
|
||||
decoding: "async",
|
||||
};
|
||||
|
||||
if (className) {
|
||||
imageAttributes.className = className;
|
||||
}
|
||||
|
||||
// You bet we throw an error on a missing alt (alt="" works okay)
|
||||
return Image.generateHTML(metadata, imageAttributes);
|
||||
};
|
||||
|
||||
module.exports = imageShortcode;
|
Loading…
Add table
Add a link
Reference in a new issue