eleventy-plugin-embed-cloudinary
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    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

    Install

    npm i eleventy-plugin-embed-cloudinary

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    80 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar