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

    6

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    6.91 kB

    Total Files

    5

    Last publish

    Collaborators

    • eeeps