eleventy-plugin-embed-cloudinary

Eleventy plugin to automatically embed images hosted on Cloudinary.

Usage no npm install needed!

<script type="module">
  import eleventyPluginEmbedCloudinary from 'https://cdn.skypack.dev/eleventy-plugin-embed-cloudinary';
</script>

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:

Configuration

Required

  • apiKey [string]: API key of your Cloudinary account
  • apiSecret [string]: API secret of your Cloudinary account
  • cloudName [string]: cloud name of your Cloudinary account

Optional

  • cacheDirectory [string] [default: .cache]: directory where the 11ty Cache (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 11ty Cache 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 an alt 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 a caption 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