From 959b13c678b7c41bc22d1bc8100d1c204e4a4c24 Mon Sep 17 00:00:00 2001 From: madrilene Date: Wed, 7 Feb 2024 16:54:03 +0100 Subject: [PATCH] add missing alt texts --- src/posts/2022-10-12-post-with-image.md | 14 +++++++++++--- src/posts/2022-11-02-markdown.md | 2 +- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/posts/2022-10-12-post-with-image.md b/src/posts/2022-10-12-post-with-image.md index 954a0bb..b574ed3 100644 --- a/src/posts/2022-10-12-post-with-image.md +++ b/src/posts/2022-10-12-post-with-image.md @@ -4,6 +4,7 @@ description: "Eleventy's own build-time image transformations. Find more info on date: 2022-10-12 tags: ['image', 'feature'] image: './src/assets/images/gallery/asturias-1.jpg' +alt: 'A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape' credit: Lene took this photo. --- @@ -18,7 +19,7 @@ If you want to adjust the wrapper width you should also adjust the image size in ## Syntax -This is the most basic version: it contains the path to the image, alt text (can be an empty string if the image is decorative), and optionally hold a caption. It defaults to `loading = 'lazy'`, and holds no class name. The picture element gets its set of images from `widths = [320, 570, 880, 1024, 1248]` and compares to a condition of `90vw`. +This is the most basic version: it contains the path to the image, alt text (can be an empty string if the image is decorative), and optionally hold a caption. It defaults to `loading = 'lazy'`, and holds no class name. The picture element gets its set of images from `widths = [440, 880, 1024, 1360]` and compares to a condition of `90vw`. {% raw %} @@ -42,8 +43,15 @@ The class names are passed in the outer container, the `` or `
` ### Example image with a caption -{% eleventyImage "./src/assets/images/gallery/asturias-2.jpg", "The preview for social media", "An interesting caption text." %} +{% eleventyImage "./src/assets/images/gallery/asturias-2.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves", "Jasmine nightshades blooming in July" %} ### Example image with all the arguments -{% eleventyImage "./src/assets/images/gallery/asturias-3.jpg", "alt text", null, "lazy", "popout", "(min-width:30em) 50vw, 100vw", [200, 400] %} +{% eleventyImage "./src/assets/images/gallery/asturias-3.jpg", "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains", null, "lazy", "class-that-does-nothing", "(min-width:30em) 50vw, 100vw", [200, 400] %} + +## Markdown sytnax + +Thanks to the [markdown-it-eleventy-img](https://github.com/solution-loisir/markdown-it-eleventy-img) package markdown also has it own image syntax. +`src` is already prepended here, see `config/plugins/markdown.js`. + +![Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green gras](/assets/images/gallery/asturias-4.jpg) \ No newline at end of file diff --git a/src/posts/2022-11-02-markdown.md b/src/posts/2022-11-02-markdown.md index 992e4f5..0ef1eca 100644 --- a/src/posts/2022-11-02-markdown.md +++ b/src/posts/2022-11-02-markdown.md @@ -136,4 +136,4 @@ Footnote 2 link[^second]. Consider that `src` is already prepended in the settings. -![](/assets/images/gallery/asturias-4.jpg) +![Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green grass](/assets/images/gallery/asturias-4.jpg)