{"id":13740000,"url":"https://github.com/trivago/babel-plugin-cloudinary","last_synced_at":"2025-04-07T17:33:42.653Z","repository":{"id":34408486,"uuid":"168137436","full_name":"trivago/babel-plugin-cloudinary","owner":"trivago","description":"Compile cloudinary URLs at build time.","archived":false,"fork":false,"pushed_at":"2023-04-30T08:30:27.000Z","size":2142,"stargazers_count":24,"open_issues_count":14,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-22T22:23:38.992Z","etag":null,"topics":["babel","babel-plugin","cloudinary","cloudinary-sdk","cloudinary-url","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trivago.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-29T10:38:02.000Z","updated_at":"2021-08-17T10:46:38.000Z","dependencies_parsed_at":"2024-11-06T05:36:59.225Z","dependency_job_id":null,"html_url":"https://github.com/trivago/babel-plugin-cloudinary","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trivago%2Fbabel-plugin-cloudinary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trivago%2Fbabel-plugin-cloudinary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trivago%2Fbabel-plugin-cloudinary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trivago%2Fbabel-plugin-cloudinary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trivago","download_url":"https://codeload.github.com/trivago/babel-plugin-cloudinary/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247698153,"owners_count":20981310,"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","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":["babel","babel-plugin","cloudinary","cloudinary-sdk","cloudinary-url","javascript"],"created_at":"2024-08-03T04:00:41.141Z","updated_at":"2025-04-07T17:33:42.161Z","avatar_url":"https://github.com/trivago.png","language":"JavaScript","readme":"# babel-plugin-cloudinary\n\n[![npm version](https://img.shields.io/npm/v/babel-plugin-cloudinary.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-cloudinary)\n\nCompile cloudinary URLs at build time.\n\n## API\n\n### Globals\n\nYou can define the globals for your cloudinary URLs in a `cloudinaryrc.json` that should be placed in the root of your project.\n\n```json\n{\n  \"native\": {\n    \"cloud_name\": \"trivago\",\n    \"secure\": true\n  },\n  \"overrideBaseUrl\": true,\n  \"host\": \"trivago.images.com\",\n  \"defaultTransforms\": {\n    \"fetch_format\": \"auto\",\n    \"quality\": \"auto\"\n  }\n}\n```\n\n- **native** - these are directly passed into the `cloudinary-core` upon instantiation, you can use\n  all the [configs in the official cloudinary API](https://cloudinary.com/documentation/solution_overview#configuration_parameters).\n- **overrideBaseUrl** - set this to true if you want to override cloudinary default URL with the property **host**.\n- **host** - a host to perform replace the default generated base URL (`res.cloudinary.com/trivago/image/upload`).\n- **defaultTransforms** - an object that holds transforms that are applied by default\n  to all the generated cloudinary URLs. These properties can still be overwritten for individual cases, by passing the same property within the `option.transforms` of that `__buildCloudinaryUrl` call.\n\n### \\_\\_buildCloudinaryUrl\n\n```javascript\n__buildCloudinaryUrl(assetName, options);\n```\n\n\u003e http[s]://host/\\\u003ctransforms\\\u003e/\\\u003cprefix\\\u003e\\\u003cassetName\\\u003e\\\u003cpostfix\\\u003e\\\u003cresourceExtension\\\u003e\n\n- **assetName** {string} **[mandatory]** - a string that represents the asset/image name.\n- **options** {object} **[optional]** - the options object aggregates a series of optional parameters that\n  you can feed in to the plugin in order to customize your URL. Again note that **all parameters inside of `options`\n  are entirely optional**.\n- **options.transforms** {object} - these object are the cloudinary transformations to apply to the URL (e.g. `{height: 250, width: 250}`).\n  For convince they will keep the same API as the [cloudinary-core image transformations](https://cloudinary.com/documentation/image_transformation_reference), these said you can check the official docs and use the `cloudinary-core` API directly.\n- **options.prefix** {string} - a prefix string for you `assetName`.\n- **options.postfix** {string} - a postfix string for you `assetName`.\n- **options.resourceExtension** {string} - the resource extension (e.g. \".jpeg\", \".png\"). You can also specify the extension within the `assetName`, let's suppose that your `assetName` is `dog-picture` you can\n  simple pass `dog-picture.jpeg` within the `assetName` itself. This optional parameter is only here you to give you a more robust API and also the possibility to interpolate the `prefix` and `postfix` with the `assetName` as you can see in the url above URL structure `\u003cprefix\u003e\u003cassetName\u003e\u003cpostfix\u003e\u003cresourceExtension\u003e`.\n\n## Usage\n\n### Install the plugin\n\n\u003e npm install babel-plugin-cloudinary\n\n### Add the plugin to your .babelrc\n\n```json\n{\n  \"plugins\": [\"babel-plugin-cloudinary\"]\n}\n```\n\n### Use it in your code\n\n```javascript\n// gallery.js\nfunction getImageUrl(imageName) {\n  // compiles into \"`${'https://res.cloudinary.com/\u003ccloud_name\u003e/image/upload/'}${imageName}${'.jpeg'}`;\"\n  return __buildCloudinaryUrl(imageName, {\n    transforms: {\n      width: 250,\n      height: 250,\n    },\n    resourceExtension: \".jpeg\",\n  });\n}\n```\n\n### Additional configurations\n\nThis projects ships together with the plugin a types definition file (`index.d.ts`) that will\nbe automatically recognized by IDEs and text editors with typescript based _IntelliSense_. In case you have some linting in place it might also be convenient to make `__buildCloudinaryUrl` a global. With [eslint](https://eslint.org/docs/user-guide/configuring#specifying-environments) you can achieve this by adding a simple property to the `globals` block just like:\n\n```javascript\n// .eslintrc.js\nmodule.exports = {\n  // ...\n  globals: {\n    // ...\n    __buildCloudinaryUrl: true,\n  },\n  // ...\n};\n```\n","funding_links":[],"categories":["Plugins"],"sub_categories":["Optimization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrivago%2Fbabel-plugin-cloudinary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrivago%2Fbabel-plugin-cloudinary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrivago%2Fbabel-plugin-cloudinary/lists"}