diff --git a/src/assets/og-images/post-with-an-image-preview.jpeg b/src/assets/og-images/post-with-an-image-preview.jpeg index df65754..74ea523 100644 Binary files a/src/assets/og-images/post-with-an-image-preview.jpeg and b/src/assets/og-images/post-with-an-image-preview.jpeg differ diff --git a/src/posts/2022/2022-10-12-post-with-image.md b/src/posts/2022/2022-10-12-post-with-image.md deleted file mode 100644 index a2acc5c..0000000 --- a/src/posts/2022/2022-10-12-post-with-image.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: 'Post with an image ' -description: "Eleventy's own build-time image transformations. Find more info on11ty.dev/docs/plugins/image/ and edit settings in config-folder." -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. ---- - -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. - -{% raw %} - -```jinja2 -{% image "path to image", "alt text", "caption text" %} -``` - -{% endraw %} - -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 `` or `
` element (`
` is added if you set a caption). - -{% raw %} - -```jinja2 -{% 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" %} -``` - -{% endraw %} - -### Example image with a caption - -{% raw %} - -```jinja2 -{% 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" %} -``` - -{% endraw %} - -{% 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" %} - -### Example image with all the arguments - -{% raw %} - -```jinja2 -{% 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] %} -``` - -{% endraw %} - -{% 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](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`. - -### Picture element - -```markdown -![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) - -### Figure element with caption - -```markdown -![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') -``` - -![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') diff --git a/src/posts/2025/2025-01-09-post-with-image/asturias-1.jpg b/src/posts/2025/2025-01-09-post-with-image/asturias-1.jpg new file mode 100644 index 0000000..b7e4afe Binary files /dev/null and b/src/posts/2025/2025-01-09-post-with-image/asturias-1.jpg differ diff --git a/src/posts/2025/2025-01-09-post-with-image/post-with-image.md b/src/posts/2025/2025-01-09-post-with-image/post-with-image.md new file mode 100644 index 0000000..91d78c6 --- /dev/null +++ b/src/posts/2025/2025-01-09-post-with-image/post-with-image.md @@ -0,0 +1,76 @@ +--- +title: 'Post with an image' +description: "You can use Markdown, a Nunjucks shortcode or pure HTML to add images to your posts and pages." +date: 2025-01-09 +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: A photo I took. +--- + +## With HTML Transform + +Transforms any `` or `` tags in HTML files as a post-processing step. + +```jinja2 +alt text +``` + +We can pass in overrides for every instance and use attributes like loading and decoding + +```jinja2 +alt text +``` + +A picturesque valley showcasing majestic mountains and lush forests, creating a serene and captivating landscape + +More info: https://www.11ty.dev/docs/plugins/image/#html-transform + +## With a shortcode + +The shortcode is for situations where you need full control of the output of the image. The most basic version contains the path to the image and alt text (can be an empty string if the image is decorative). + +{% raw %} + +```jinja2 +{% image "path to image", "alt text" %} +``` + +{% endraw %} + +It defaults to `loading = 'lazy'`, the picture element gets its set of images from `widths = [650, 960, 1200]` and compares to a condition of `100vw`. +You can pass in manually all the conditions, add `null` to skip. +You can pass classes to the outer container ( `` or `
` element), and to the `` element itself. + +The shortcode is stored in `src/_config/shortcodes/image.js`. + +{% raw %} + +```jinja2 +{% image "path to image", "alt text", "caption text", "eager", "container class names", "img class names", "(min-width:30em) 50vw, 100vw", [200, 400] %} +{% image "path to image", "alt text", null, "eager" %} +``` + +{% endraw %} + +{% image "./src/assets/images/gallery/asturias-3.jpg", "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains", "What a nice old house in black and white", "lazy", "text-center", "grayscale", "(min-width:30em) 50vw, 100vw", [200, 400] %} + +## Markdown syntax + +This also uses [Image HTML Transform ](https://www.11ty.dev/docs/plugins/image/#html-transform). As the usual markdown sytnax for images creates the image element the plugin is looking for, it transforms it to the rich picture format. + +In `src/_config/plugins/markdown.js` I customized the Markdown rendering for images slightly. What normally would become a `title` attribute is used to create a caption. + +In Markdown files like this blog post here, the Markdown syntax or plain HTML works best. + +```markdown +![alt text](/path/to/image 'caption text') +![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) 'I used a portrait lens for this one' +``` + +![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 'I used a portrait lens for this one') + +Recommended reads: +- https://www.11ty.dev/docs/plugins/image/ +- https://www.aleksandrhovhannisyan.com/blog/eleventy-image-transform/ +- https://coryd.dev/posts/2024/setting-up-image-transforms-in-eleventy \ No newline at end of file