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

1. Require it
2. Set your Cloudinary CloudName config parameter
3. 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
  • Automatic format selection
  • Resizing and cropping images
  • Adjusting image quality

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