eleventy-plugin-responsive-images

An Eleventy plugin that adds a shortcode to enable you to add a responsive image from your Cloudinary account.

MIT License

Downloads
14
Stars
13
Committers
2

Responsive Images - Eleventy Plugin (powered by Cloudinary)

An Eleventy plugin that adds a shortcode to enable you to add a responsive 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

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

Package Rankings
Top 16.88% on Npmjs.org
Badges
Extracted from project README
Maintained Size Stars Issues License
Related Projects