https://github.com/bholmesdev/11ty-image-optimization-demo
A template to optimizing images based on markdown tags!
https://github.com/bholmesdev/11ty-image-optimization-demo
blog talk
Last synced: 10 months ago
JSON representation
A template to optimizing images based on markdown tags!
- Host: GitHub
- URL: https://github.com/bholmesdev/11ty-image-optimization-demo
- Owner: bholmesdev
- Created: 2021-08-19T18:48:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-28T16:23:04.000Z (about 4 years ago)
- Last Synced: 2025-03-31T08:39:24.442Z (11 months ago)
- Topics: blog, talk
- Language: JavaScript
- Homepage:
- Size: 182 KB
- Stars: 14
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 11ty image optimization by tag
This is a demo of how you can run [11ty's image plugin](https://www.11ty.dev/docs/plugins/image/) across any part of your site, no shortcodes required!
The goal:
1. Find all `img` tags in a given template
2. Replace with an optimized `picture` element
⚠️ **Note:** this only works in 11ty's latest v1.0 beta. You can install this by adding the `@beta` flag to your 11ty install: `npm i @11ty/eleventy@beta`
## Running and building
1. Install dependencies using `npm i`
2. Run `npm run dev` to spin up the dev server
3. Run `npm run build` for production builds
## The core setup
This code snippet (found in the `.eleventy.js` config) powers everything you're seeing:
```js
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('img')
eleventyConfig.addExtension('md', {
read: true,
compile(markdown) {
return async function render(data) {
// let 11ty process markdown how it normally would
const html = await this.defaultRenderer(markdown);
const $ = cheerio.load(html);
// if this markdown file has the "blog" tag applied...
if (data.tags?.includes('blog')) {
await Promise.all([
// loop over all the images in the document
$('img').toArray().map(async (img) => {
// grab the image attributes
const { src = '', alt = '', sizes = '100vw' } = img.attribs;
// convert to an optimized image
const optimizedImage = await imageShortcode(src, alt, sizes);
// and replace the image with an optimized one
$(img).replaceWith(optimizedImage);
})
])
}
return $.html();
}
}
})
}
```