Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

eleventy-plugin-respimg

0.1.2 • Public • Published

{% 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?

Keywords

Install

npm i eleventy-plugin-respimg

DownloadsWeekly Downloads

56

Version

0.1.2

License

MIT

Unpacked Size

6.91 kB

Total Files

5

Last publish

Collaborators

  • avatar