Eleventy Cloudflare Image Resizing plugin

Serve images through Cloudflare Image Resizing service with no hassle.

Install

npm i eleventy-plugin-cloudflare-image-resizing

Use

The plugin exports a function for configuring the shortcode:

const createCloudflareImageShortcode = require('eleventy-plugin-cloudflare-image-resizing');

module.exports = (config) => {
	config.addShortcode(
		'cloudflareImage',
		createCloudflareImageShortcode({
			zone: 'https://example.com', // optional
			mode: 'img', // optional, default
			directory: 'cloudflare-images', // optional, default
			bypass: () => process.env.NODE_ENV !== 'production', // optional, default
			cloudflareURL: () => zone + '/' + 'image' + originalURL // optional, usage example
		}),
	);
};

1. zone is the domain name of the website. It may be omitted and the domain will be taken from headers.
2. mode is the default shortcode mode (can be overwritten by the shortcode). Plugin supports three modes:
   1. img - shortcode outputs ready to use <img> tag.
   2. url - shortcode outputs only final Cloudflare URL.
   3. attributes - shortcode outputs <img> ready to use attributes as the object.
3. directory is the name of the directory under the output which will contain referenced images. Plugin copies images from source to the output directory by itself. Don't use the addPassthroughCopy option with images that are referenced by the plugin because you may end up with two copies.
4. bypass is a function that determines which image URL should be returned either from the Cloudflare service (for the production environment, by default) or from the local directory (see directory option). This function must return a boolean value. If true, a returned URL points to the Cloudflare service, otherwise - the local directory.
5. cloudflareURL is a function that allows you to customize your cloudflare URL. cloudflareURL must have the following arguments:
   • zone
   • domain
   • options - cloudflare URL options like: format, quality, width, anim, etc.
   • originalURL - URL of your image

Shortcode has the following signature:

const result = cloudflareImage(url, options);

1. url - it is the relative path to the image from the current page. You may set another relative from point by providing relativeTo property in options.
2. options - it includes all options that Cloudflare URL may accept and several additional options like:
   1. relativeTo - see above.
   2. emit - overrides the global mode option and accepts the same values.
   3. densities - list of all image densities for the srcset attribute. (sizes shouldn't be defined)
   4. sizes - list of all required image widths for the srcset attribute. (densities shouldn't be defined)
   5. attributes - a map of all additional <img> attributes.
   6. domain is the domain that acts as a place from where images are taken. It may be omitted, and in that case, it will be implying that images are hosted on the current domain (which serves the whole website).

srcset attribute if defined in the attributes is not used if densities or sizes is provided.

Word from author

Have fun ✌️