Gives us some cloudinary stuff for 11ty

Usage no npm install needed!

<script type="module">
  import 11inCloudinary from 'https://cdn.skypack.dev/@11in/cloudinary';



This provides some shortcodes and filters for generating Cloudinary URLs. It's mostly just a wrapper around the Cloudinary Node SDK, although it will attempt some coercion to get valid public IDs from various kinds of input.


Install the plugin with npm or yarn:

$ npm -i @11in/cloudinary --save

Add it to your eleventy.config.js:

module.exports = function (conf) {
    conf.namespace('cl_', () => {
        conf.addPlugin(cloudinary, {
            name: "your-cloud-name",

You can alternatively set an environment variable called CLOUDINARY_URL. It's found on your Cloudinary dashboard, and looks something like this:


Use the shortcodes & filters:

{% cl_img { path: 'image.jpg', transforms: [{ width: 670 }] } %}

{{ 'image.jpg' | cl_url({width: 670}) }}

Cloudinary is fairly good at extracting your asset ids from various URLs you might get out of Cloudinary (or, say, Forestry). So you can also do something like this:

{% cl_img { path: '/v1610229506/directory/2021/01/image.jpg', transforms: [{ width: 670 }] } %}

{{ 'https://res.cloudinary.com/your-cloud-name/image/upload/v1613447983/image.jpg' | cl_url({width: 670}) }}

For more information, see the full documentation.