Add a Plugin

{% 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="${eleventyConfig.cloudinaryCloudName}/${transforms}/${path}" alt="${alt}">`

and shortcodes like this:

{% cloudinaryImage
"Picture of a cat"

into an <img> tag, like this:

<img src="" alt="Picture of a cat">


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 )



Use the following shortcode snippet in your Markdown file:

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