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

infos were deprecated

Browse source
This commit is contained in:
madrilene 2024-02-08 09:46:32 +01:00
parent 2ad496ecf2
commit a96e8dc18c
1 changed files with 32 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,29 +8,27 @@ alt: 'A picturesque valley showcasing majestic mountains and lush forests, creat
credit: Lene took this photo.
---
This starter uses Eleventy's build-time image transformations. Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/eleventyImage`.
This starter uses Eleventy's build-time image transformations.
For now there are three image sizes: 320px, 570px and 820px.
820px is the maximum size, equivalent to the width set for our content wrapper in `prose.css`: `--wrapper-width: clamp(16rem, 93vw, 55rem);`.
The `sizes` attribute is set to `sizes = '(min-width: 55rem) 820px, 100vw'`.
If you want to adjust the wrapper width you should also adjust the image size in the shortcode accordingly.
Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/image`.
## 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 = [440, 880, 1024, 1360]` and compares to a condition of `90vw`.
In the most basic version it contains the path to the image, alt text (can be an empty string if the image is decorative), and may hold a caption.
{% raw %}
```
{% eleventyImage "path to image", "alt text", "caption - optional!" %}
{% eleventyImage "path to image", "alt text", "caption text" %}
```
{% endraw %}
If you want to be very specific you can pass in manually all the conditions, add `null` to skip.
The class names are passed in the outer container, the `<picture>` or `<figure>` element.
It defaults to `loading = 'lazy'`, the picture element gets its set of images from `widths = [440, 880, 1024, 1360]` and compares to a condition of `90vw`.
If you want to be very specific, you can pass in manually all the conditions, add `null` to skip.
The class names are passed in the outer container, the `<picture>` or `<figure>` element (`<figure>` is added if you set a caption).
{% raw %}
@ -43,15 +41,35 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
### Example image with a caption
{% raw %}
```
{% 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" %}
```
{% endraw %}
{% 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
{% raw %}
```
{% 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] %}
```
{% endraw %}
{% 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`.
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)
```
![alt text](path to image)
![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)
```
![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)