eleventy-plugin-srcset

This Eleventy plugin generates responsive image markup along with the corresponding image files.

It can be used in two ways:

The manually inserted shortcode, {% srcset %}
The automatic filter mode, which finds images based on a provided CSS selector

Configuration

The plugin can be configured by passing a config object when adding the plugin, e.g.:

eleventyConfig.addPlugin( pluginSrcsetImg, {
  srcsetWidths: [540, 900, 1024],
  autoselector: '.post-content img',
  createCaptions: true
});

Configuration added will override the defaults given in the table below.

Value	Details	Default
autoselector	Specifies the CSS selector used to automatically find elements you want to generate images and markup for. Set this to null if you do not want to find images automatically.	'.page-body img'
srcsetWidths	An array of the breakpoint widths used to generate images	[ 320, 480, 640, 960, 1280, 1600 ]
fallbackWidth	The width for the fallback 'src' image	640
fallbackHeight	The height for the fallback 'src' image, when null the image will be automatic based on the aspect ratio and fallbackWidth	null
createCaptions	When true, automatic mode wraps outputted tags in a tag with a whose text is a copy of the image's title attribute. This makes generating captions from markdown possible.	false
resizeOriginal	When true, the original image will be resized.	true
cropPosition	Specifies the default crop position for Sharp to use when cropping. Can be overridden on shortcode	gravity.centre
dirs.input	Path to input directory	./src
dirs.output	Path to output directory	./dist

The shortcode syntax is:

{% srcset image, alt, className, width, height, sizes, cropPosition %}

Attribute	Details
image	Path to input image
alt	Image alt text
className	Desired class of output image
width	Image width (used to establish image aspect ratio)
height	Image height (used to establish image aspect ratio)
sizes	Image sizes attribute, e.g. "(min-width: 600px) 50vw, 100vw"
cropPosition	Sharp crop position, e.g. gravity.centre
lazyload	Set this to be true to lazyload images.