`{% cloudinaryImage %}`

An Eleventy shortcode that allows you to add an image from your cloudinary account.

What does it do?

Turns the config like this:

  eleventyConfig.cloudinaryCloudName = 'cloud-name-here'
  eleventyConfig.addShortcode('cloudinaryImage', function (path, transforms, alt) {
    return `<img src="https://res.cloudinary.com/${eleventyConfig.cloudinaryCloudName}/${transforms}/${path}" alt="${alt}">`
  })

and shortcodes like this:

{% cloudinaryImage
  "cat-photo.jpg",
  "f_auto",
  "Picture of a cat"
%}

into an <img> tag, like this:

<img src="https://res.cloudinary.com/cloud-name-here/f_auto/cat-photo.jpg" alt="Picture of a cat">

Installation

Option 1:

Copy the config above and open up your Eleventy config file (probably .eleventy.js) and then set your cloudinaryCloudName

Option 2:

Install via NPM The plugin is now available on npm.

npm install eleventy-plugin-cloudinary

After you've ran npm install, open up your Eleventy config file (.eleventy.js) then

Require it
Set your Cloudinary CloudName config parameter
Use addPlugin.

// ①
const pluginCloudinaryImage = require( "eleventy-plugin-cloudinary" )

module.exports = function( eleventyConfig ) {

  // ②
  eleventyConfig.cloudinaryCloudName = 'cloud-name-here'

  // ③
  eleventyConfig.addPlugin( pluginCloudinaryImage )

};

Usage

Use the following shortcode snippet in your Markdown file:

{% cloudinaryImage "sample.jpg", "w_320,f_auto", "Cloudinary Sample Image" %}

Helpful

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.
Check out the cloudinary documentation
Some useful default image transformations to consider

Todo

setup fallback settings

Thanks

@zachleat for creating the excellent 11ty
@FrankTldr for pointing out what I was doing wrong and sending me tons of useful links
@hankchizljaw for reviewing my first ever public repo
@etportis for creating respimg which helped me create this
Cloudinary - for creating such an awesome service

Cloudinary Images