README
eleventy-plugin-embed-cloudinary
Eleventy plugin to automatically embed in markdown files any image hosted on your Cloudinary Media Library.
Write a URL → get a responsive image.
Installation
Install with npm or yarn.
npm i -D eleventy-plugin-embed-cloudinary
Add this plugin to your Eleventy config file (usually .eleventy.js
):
const embedCloudinary = require('eleventy-plugin-embed-cloudinary');
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(embedCloudinary, {
apiKey: 'YOUR_CLOUDINARY_API_KEY',
apiSecret: 'YOUR_CLOUDINARY_API_SECRET',
cloudName: 'YOUR_CLOUDINARY_CLOUD_NAME'
});
};
Usage
In your markdown file, just paste the URL of the image you want to include. The URL should be the only thing on that line. The image must be hosted on your Cloudinary Media Library.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, elit vel condimentum porta, purus.
https://res.cloudinary.com/CLOUD_NAME/image/upload/VERSION/PUBLIC_ID.png
Maecenas non velit nibh. Aenean eu justo et odio commodo ornare. In scelerisque sapien at.
Where:
CLOUD_NAME
is your Cloudinary cloud name;PUBLIC_ID
is the unique identifier for the image hosted on your Cloudinary Media Library;VERSION
is the asset version of the image.
Configuration
Required
apiKey
[string]: API key of your Cloudinary accountapiSecret
[string]: API secret of your Cloudinary accountcloudName
[string]: cloud name of your Cloudinary account
Optional
cacheDirectory
[string] [default:.cache
]: directory where the 11tyCache
(see eleventy-cache-assets) stores the responses from the Cloudinary API (it is strongly recommended that you add this folder to your.gitignore
file).cacheDuration
[string] [default:30m
]: how long a response stored in the 11tyCache
should be considered valid. For the syntax, see here.classString
[string] [default:""
]: CSS class/es to apply to the generated<img>
element.shouldLazyLoad
[boolean] [default:true
]: whether the generated<img>
element should have the attribute loading="lazy" to instruct the browser to defer loading the image (browser support here).shouldThrowOnMissingAlt
[boolean] [default:false
]: whether this plugin should throw an error when fetching an image that does not have analt
attribute. See here how to add a Description (alt) to an image hosted on your Cloudinary Media Library.shouldThrowOnMissingCaption
[boolean] [default:false
]: whether this plugin should throw an error when fetching an image that does not have acaption
attribute. See here how to add a Title (caption) to an image hosted on your Cloudinary Media Library.
Release management
This project uses a combination of bash scripts, xyz, auto-changelog and the GitHub CLI to update the CHANGELOG.md
, create a new GitHub release, and publish a new version of the package on npm.
The version number is assigned according to Semantic Versioning.
npm run release:patch
npm run release:minor
npm run release:major