Post with an image

October 12, 2022

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/imagePlaceholder.

Syntax

{% imagePlaceholder "path to image", "alt text", "caption - optional!" %}

Or add your own sizes attribute (note how I set an empty string for the caption):

{% imagePlaceholder "path to image", "alt text", "", "(min-width:30em)  50vw, 100vw" %}

Example image with a caption

The preview for social media — An interesting caption text.

CSS

You can change the CSS for the page and blog post images in ./src/assets/css/blocks/page.css and ./src/assets/css/blocks/blog.css:

.page img {
  width: 100%;
  height: auto;
}

.blog img {
  width: 100%;
  height: auto;
}