Responsive Images - Eleventy Plugin (powered by Cloudinary)

An Eleventy shortcode that enables you to add an image from your Cloudinary account.

What does it do?

Turns 11ty shortcodes like this:

{% respimg
    src="cat.jpg",
    width="320",
    height="256",
    alt="Cat Photo",
    sizes="320, 640, 960, 1280",
    class="border img-fluid"
%}

into a responsive <img> tag, like this:

<img
    width="320"
    height="256"
    src="https://res.cloudinary.com/your-cloud-name/image/fetch/q_auto,f_auto,w_320/https://domain.com/cat.jpg"
    srcset="
        https://res.cloudinary.com/your-cloud-name/image/fetch/q_auto,f_auto,w_320/https://domain.com/cat.jpg 320w,
        https://res.cloudinary.com/your-cloud-name/image/fetch/q_auto,f_auto,w_640/https://domain.com/cat.jpg 640w,
        https://res.cloudinary.com/your-cloud-name/image/fetch/q_auto,f_auto,w_960/https://domain.com/cat.jpg 960w,
        https://res.cloudinary.com/your-cloud-name/image/fetch/q_auto,f_auto,w_1280/https://domain.com/cat.jpg 1280w"
        sizes="(max-width: 1280px) 100vw, 1280px"
    alt="Cat Photo"
    loading="lazy"
    class="border img-fluid"
/>

Installation

Step 1 - Install the plugin

npm install eleventy-plugin-responsive-images

Step 2 - Open the Eleventy config file (probably .eleventy.js) and add in the require and addPlugin lines below toward the top of the file

const responsiveImages = require("eleventy-plugin-responsive-images");
eleventyConfig.addPlugin(responsiveImages);

Step 3 - In the same file, locate the module.exports = function(eleventyConfig) { line, pasting the following lines somewhere below that line and then change the values.

eleventyConfig.cloudinaryCloudName = "your-cloud-name";
eleventyConfig.hostname = "https://sitename.netlify.app";

Your Cloudinary CloudName can be found in Dashboard > Account Details > Cloud name

Your hostname will be a live url that you're deploying your JAMstack build to.

Usage

The following shortcode can be used with all the available options (only src and sizes are required).

{% respimg
    src="sample.jpg",
    width="300",
    height="200",
    sizes="300, 500, 700, 900",
    alt="Cat Photo",
    loading="lazy"
    class="border img-fluid"
%}

Output image:

Options

| Attribute | Example Value | Description | | ------ | ------ | ------ | | src [required] | "/images/cat.jpg" | path to image file | width [required] | "300" | largest image width (in pixels) | height | "250" | largest image height (in pixels) | sizes | "300, 400, 500, 600" | all sizes (in widths) you want to output | alt | "Cat Photo" | image alt tag | loading | "lazy" or "eager" | Lazy load the image or load immediatly | class | "class1 class2 class3" | single class names seperated by spaces

Notes

• variables can be used as attribute values. Syntax varies by the template rendering engine used
• error handling will print out in place of your image if you miss a required attribute

Helpful

• Make sure that the domains where you're hosting your photos are whitelisted in your Cloudinary settings, under Settings > Security > Allowed fetch domains. If you leave the field blank Cloudinary will fetch from any domain.
• Cloudinary Documentation
• Responsive Image Breakpoints Generator
• Some useful default image transformations to consider
  • Automatic format selection
  • Resizing and cropping images
  • Adjusting image quality

Todo

• add in default settings
• add in template shortcode syntax for attribute variables (nunjucks, liquid, etc.)
• remove sizes being required
• consider adding the other image attributes (crossorigin, ismap, longdesc, referrerpolicy, usemap)

Other great 11ty image plugins

• eleventy-respimg
• eleventy-plugin-cloudinary
• eleventy-plugin-images-responsiver