{% cloudinaryImage %}
An Eleventy shortcode that allows you to add an image from your cloudinary account.
What does it do?
Turns the config like this:
eleventyConfigcloudinaryCloudName = 'cloud-name-here' eleventyConfig
and shortcodes like this:
{% cloudinaryImage "cat-photo.jpg", "f_auto", "Picture of a cat"%}
into an <img>
tag, like this:
Installation
Copy the config above and open up your Eleventy config file (probably .eleventy.js
) and then set your cloudinaryCloudName
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
Usage
Use the following shortcode snippet in your Markdown file:
{% cloudinaryImage "sample.jpg", "w_320,f_auto", "Cloudinary Sample Image" %}

Todo
- add to npmjs.org and create install instructions
- 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