An Eleventy shortcode that allows you to add an image from your cloudinary account.
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">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 )
};
Use the following shortcode snippet in your Markdown file:
{% cloudinaryImage "sample.jpg", "w_320,f_auto", "Cloudinary Sample Image" %}
- 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
fetchfrom any domain. - Check out the cloudinary documentation
- Some useful default image transformations to consider
- setup fallback settings
- @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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent