eleventy-plugin-responsive-images v0.0.5
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
)