wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add missing alt texts

Browse source
This commit is contained in:
madrilene 2024-02-07 16:54:03 +01:00
parent 6b1a49f438
commit 959b13c678
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/posts/2022-10-12-post-with-image.md
View file

@ -4,6 +4,7 @@ description: "Eleventy's own build-time image transformations. Find more info on
date: 2022-10-12 date: 2022-10-12
tags: ['image', 'feature'] tags: ['image', 'feature']
image: './src/assets/images/gallery/asturias-1.jpg' 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. 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 ## 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 %} {% raw %}
@ -42,8 +43,15 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
### Example image with a caption ### 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 ### 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)

2
src/posts/2022-11-02-markdown.md
View file

@ -136,4 +136,4 @@ Footnote 2 link[^second].
Consider that `src` is already prepended in the settings. 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)