{"id":15016539,"url":"https://github.com/juanfernandes/eleventy-plugin-cloudinary","last_synced_at":"2025-08-03T03:44:36.550Z","repository":{"id":42704820,"uuid":"239772694","full_name":"juanfernandes/eleventy-plugin-cloudinary","owner":"juanfernandes","description":"An Eleventy shortcode that allows you to add an image from your cloudinary account","archived":false,"fork":false,"pushed_at":"2022-11-17T18:28:20.000Z","size":7,"stargazers_count":30,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-03T03:44:35.448Z","etag":null,"topics":["11ty","11ty-plugin","eleventy","eleventy-plugin","ssg","static-site-generator"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juanfernandes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-11T13:47:49.000Z","updated_at":"2024-02-11T19:45:50.000Z","dependencies_parsed_at":"2023-01-21T19:30:16.805Z","dependency_job_id":null,"html_url":"https://github.com/juanfernandes/eleventy-plugin-cloudinary","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/juanfernandes/eleventy-plugin-cloudinary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanfernandes%2Feleventy-plugin-cloudinary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanfernandes%2Feleventy-plugin-cloudinary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanfernandes%2Feleventy-plugin-cloudinary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanfernandes%2Feleventy-plugin-cloudinary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juanfernandes","download_url":"https://codeload.github.com/juanfernandes/eleventy-plugin-cloudinary/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanfernandes%2Feleventy-plugin-cloudinary/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268491774,"owners_count":24258737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","ssg","static-site-generator"],"created_at":"2024-09-24T19:49:03.119Z","updated_at":"2025-08-03T03:44:36.501Z","avatar_url":"https://github.com/juanfernandes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `{% cloudinaryImage %}`\n\nAn [Eleventy](https://www.11ty.dev/) shortcode that allows you to add an image from your cloudinary account.\n\n## What does it do?\nTurns the [config](https://www.11ty.io/docs/config/) like this:\n\n```javascript\n  eleventyConfig.cloudinaryCloudName = 'cloud-name-here'\n  eleventyConfig.addShortcode('cloudinaryImage', function (path, transforms, alt) {\n    return `\u003cimg src=\"https://res.cloudinary.com/${eleventyConfig.cloudinaryCloudName}/${transforms}/${path}\" alt=\"${alt}\"\u003e`\n  })\n```\n\nand [shortcodes](https://www.11ty.io/docs/shortcodes/) like this:\n\n```nunjucks\n{% cloudinaryImage\n  \"cat-photo.jpg\",\n  \"f_auto\",\n  \"Picture of a cat\"\n%}\n```\n\ninto an `\u003cimg\u003e` tag, like this:\n\n```html\n\u003cimg src=\"https://res.cloudinary.com/cloud-name-here/f_auto/cat-photo.jpg\" alt=\"Picture of a cat\"\u003e\n```\n\n## Installation\n\n**Option 1:**\n\nCopy the config above and open up your Eleventy config file (probably `.eleventy.js`) and then set your `cloudinaryCloudName`\n\n**Option 2:**\n\nInstall via NPM\nThe plugin is now [available on npm](https://www.npmjs.com/package/eleventy-plugin-cloudinary).\n\n```\nnpm install eleventy-plugin-cloudinary\n```\n\nAfter you've ran `npm install`, open up your Eleventy config file (`.eleventy.js`) then\n\n1. Require it\n2. Set your Cloudinary CloudName config parameter\n3. Use `addPlugin`.\n\n```\n// ①\nconst pluginCloudinaryImage = require( \"eleventy-plugin-cloudinary\" )\n\nmodule.exports = function( eleventyConfig ) {\n\n  // ②\n  eleventyConfig.cloudinaryCloudName = 'cloud-name-here'\n\n  // ③\n  eleventyConfig.addPlugin( pluginCloudinaryImage )\n\n};\n````\n\n## Usage\n\nUse the following shortcode snippet in your Markdown file:\n\n`{% cloudinaryImage \"sample.jpg\", \"w_320,f_auto\", \"Cloudinary Sample Image\" %}`\n\n\u003cimg src=\"https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg\" alt=\"Cloudinary Sameple Image\"\u003e\n\n### Helpful\n- 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`](https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url) from any domain.\n- Check out the [cloudinary documentation](https://cloudinary.com/documentation)\n- Some useful default image transformations to consider\n  - [Automatic format selection](https://cloudinary.com/documentation/image_transformations#automatic_format_selection)\n  - [Resizing and cropping images](https://cloudinary.com/documentation/image_transformations#resizing_and_cropping_images)\n  - [Adjusting image quality](https://cloudinary.com/documentation/image_transformations#adjusting_image_quality)\n\n### Todo\n- setup fallback settings\n\n## Thanks\n- [@zachleat](https://twitter.com/zachleat) for creating the excellent [11ty](https://www.11ty.dev/)\n- [@FrankTldr](https://twitter.com/FrankTldr) for pointing out what I was doing wrong and sending me tons of useful links\n- [@hankchizljaw](https://twitter.com/hankchizljaw) for reviewing my first ever public repo\n- [@etportis](https://twitter.com/etportis) for creating [respimg](https://github.com/eeeps/eleventy-respimg) which helped me create this\n- [Cloudinary](https://cloudinary.com) - for creating such an awesome service\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuanfernandes%2Feleventy-plugin-cloudinary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuanfernandes%2Feleventy-plugin-cloudinary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuanfernandes%2Feleventy-plugin-cloudinary/lists"}