29 lines
		
	
	
	
		
			773 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			29 lines
		
	
	
	
		
			773 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| const Image = require("@11ty/eleventy-img");
 | |
| const imagePath = "./collection";
 | |
| const imageOutputPath = "./_site/img/";
 | |
| const imageFormats = ["auto"];
 | |
| const imageSizes = [650];
 | |
| 
 | |
| module.exports = function (eleventyConfig) {
 | |
|   eleventyConfig.addShortcode(
 | |
|     "image",
 | |
|     async function (src, alt, sizes, classes = "") {
 | |
|       let metadata = await Image(`${imagePath}/${src}`, {
 | |
|         widths: imageSizes,
 | |
|         formats: imageFormats,
 | |
|         outputDir: imageOutputPath,
 | |
|       });
 | |
| 
 | |
|       let imageAttributes = {
 | |
|         alt,
 | |
|         sizes,
 | |
|         loading: "lazy",
 | |
|         decoding: "async",
 | |
|         class: classes,
 | |
|       };
 | |
| 
 | |
|       // You bet we throw an error on a missing alt (alt="" works okay)
 | |
|       return Image.generateHTML(metadata, imageAttributes);
 | |
|     }
 | |
|   );
 | |
| };
 | 
