Wondering what’s next for npm?Check out our public roadmap! »

eleventy-plugin-responsive-images

0.0.5 • Public • Published

Responsive Images - Eleventy Plugin (powered by Cloudinary)

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

Maintained Size Stars Issues License

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:

Cloudinary Sample 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

Install

npm i eleventy-plugin-responsive-images

DownloadsWeekly Downloads

18

Version

0.0.5

License

MIT

Unpacked Size

9.53 kB

Total Files

5

Last publish

Collaborators

  • avatar