Skip to content

A responsive-image Eleventy shortcode, powered by Cloudinary

License

Notifications You must be signed in to change notification settings

eeeps/eleventy-respimg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

{% respimg %}

What does it do?

It turns config like this:

eleventyConfig.cloudinaryCloudName = 'your-cloud-name-here';
eleventyConfig.srcsetWidths = [ 320, 640, 960, 1280, 1600, 1920, 2240, 2560 ];
eleventyConfig.fallbackWidth = 640;

and shortcodes like this:

{% respimg
	"https://cool.img/here.jpg",
	"A cool image",
	"(min-width: 48em) 48em, 100vw"
%}

into responsive <img> tags, like this:

<img
	srcset="
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_320/https://cool.img/here.jpg 320w,
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_640/https://cool.img/here.jpg 640w,
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_960/https://cool.img/here.jpg 960w,
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_1280/https://cool.img/here.jpg 1280w,
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_1600/https://cool.img/here.jpg 1600w,
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_1920/https://cool.img/here.jpg 1920w,
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_2240/https://cool.img/here.jpg 2240w,
		https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_2560/https://cool.img/here.jpg 2560w"
	sizes="(min-width: 48em) 48em, 100vw"
	src="https://res.cloudinary.com/your-cloud-name-here/image/fetch/q_auto,f_auto,w_640/https://cool.img/here.jpg"
	alt="A cool image"
/>

The resulting <img>s are “responsive” in the following ways:

Installation

The plugin is available on npm.

npm install eleventy-plugin-respimg

After npm installing, open up your Eleventy config file (probably .eleventy.js) and

  1. require it
  2. set the mandatory config parameters, and
  3. use addPlugin.
// ①
const pluginRespimg = require( "eleventy-plugin-respimg" );

module.exports = function( eleventyConfig ) {

	// ②
	eleventyConfig.cloudinaryCloudName = 'your-cloud-name-here';
	eleventyConfig.srcsetWidths = [ 320, 640, 960, 1280, 1600, 1920, 2240, 2560 ];
	eleventyConfig.fallbackWidth = 640;

	// ③
	eleventyConfig.addPlugin( pluginRespimg );
	
};

Also! Make sure that the domains where you’ll be hosting your originals are whitelisted in your Cloudinary settings, under “Security » Allowed fetch domains”. Alternatively, leave the field blank, and Cloudinary will happily fetch from any domain.

Example

Here’s a quick, actual example, that uses a couple of these in a couple of contexts.

TODO

  • limit srcset breakpoints to the intrinsic width of the original (don’t let Cloudinary upscale)
  • allow relative src paths
  • don’t fetch images that are already in your Cloudinary media library
  • smarter srcset breakpoints, using Cloudinary’s automatic responsive image breakpoint features
  • automatic sizes‽ (probably using Puppeteer and @ausi’s logic?)
  • what should it do with animated Gifs?

About

A responsive-image Eleventy shortcode, powered by Cloudinary

Resources

License

Stars

Watchers

Forks

Packages

No packages published