From 99c59b597193a33a93f2894409931d587a7a5609 Mon Sep 17 00:00:00 2001 From: madrilene Date: Fri, 24 Oct 2025 14:02:23 +0200 Subject: [PATCH] add imageKeys shortcode to image docs --- src/docs/images.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/docs/images.md b/src/docs/images.md index 8bc9fe0..c1e34c0 100644 --- a/src/docs/images.md +++ b/src/docs/images.md @@ -2,7 +2,7 @@ title: Images --- -Using the [Eleventy Image](https://www.11ty.dev/docs/plugins/image/) plugin, there are three ways to handle image optimization: HTML Transform, Markdown syntax, and a Nunjucks shortcode. [See the dedicated blog post to dive deeper.](/blog/post-with-an-image/) +Using the [Eleventy Image](https://www.11ty.dev/docs/plugins/image/) plugin, there are three ways to handle image optimization: HTML Transform, Markdown syntax, and Nunjucks shortcodes. [See the dedicated blog post to dive (much) deeper.](/blog/post-with-an-image/) Have a look at the [Attribute Overrides](https://www.11ty.dev/docs/plugins/image/#attribute-overrides) for the HTML Transform methods (1 and 2) for per instance overrides. Adding `eleventy:ignore` to an `` element for example, skips this image. @@ -21,14 +21,18 @@ The Markdown syntax creates the `` element that the _HTML Transform plugin_ ![alt text](/path/to/image.jpg) ``` -### 3. Nunjucks Shortcode +### 3. Nunjucks Shortcodes -In Nunjucks templates you can also use a shortcode. +In Nunjucks templates you can also use shortcodes (`image` and `imageKeys`). {% raw %} ```jinja2 {% image '/path/to/image.jpg', 'alt text' %} +{% imageKeys { + "alt": "alt text", + "src": "/path/to/image.jpg" +} %} ``` {% endraw %}