Post with an image
![A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape](/assets/images/asturias-1-1920w.jpeg)
Photo by Kristaps Ungurs on Unsplash
Photo by Kateryna Hliznitsova on Unsplash
Photo by Patrick Konior on Unsplash
Photo by Pawel Czerwinski on Unsplash
Photo by Pawel Czerwinski on Unsplash
Photo by Paul Applegate
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/image
.
Syntax
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.
{% image "path to image", "alt text", "caption text" %}
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).
{% image "path to image", "alt text", "caption text", "eager", "class names", "(min-width:30em) 50vw, 100vw", [200, 400] %}
{% image "path to image", "alt text", null, "eager" %}
Example image with a caption
{% image "./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" %}
![Close-up of a delicate white flower with a yellow center, surrounded by green leaves](/assets/images/asturias-2-1920w.jpeg)
Example image with all the arguments
{% image "./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 syntax
Thanks to the markdown-it-eleventy-img package markdown also has it own image syntax. src
is already prepended here, see config/plugins/markdown.js
.
Picture element
![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)
Figure element with caption
![alt text](/path/to/image 'caption text')
![A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape](/assets/images/gallery/asturias-1.jpg 'Inside the Somiedo Natural Park, Asturias')
![Inside the Somiedo Natural Park, Asturias A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape](/assets/images/F54o5PK949-120.jpeg)