Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trivago/babel-plugin-cloudinary
Compile cloudinary URLs at build time.
https://github.com/trivago/babel-plugin-cloudinary
babel babel-plugin cloudinary cloudinary-sdk cloudinary-url javascript
Last synced: 3 months ago
JSON representation
Compile cloudinary URLs at build time.
- Host: GitHub
- URL: https://github.com/trivago/babel-plugin-cloudinary
- Owner: trivago
- License: apache-2.0
- Created: 2019-01-29T10:38:02.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T08:30:27.000Z (over 1 year ago)
- Last Synced: 2024-05-29T22:55:02.977Z (5 months ago)
- Topics: babel, babel-plugin, cloudinary, cloudinary-sdk, cloudinary-url, javascript
- Language: JavaScript
- Homepage:
- Size: 2.04 MB
- Stars: 24
- Watchers: 7
- Forks: 4
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-babel - cloudinary - Compile cloudinary URLs at build time. (Plugins / Optimization)
README
# babel-plugin-cloudinary
[](https://www.npmjs.com/package/babel-plugin-cloudinary)
Compile cloudinary URLs at build time.
## API
### Globals
You can define the globals for your cloudinary URLs in a `cloudinaryrc.json` that should be placed in the root of your project.
```json
{
"native": {
"cloud_name": "trivago",
"secure": true
},
"overrideBaseUrl": true,
"host": "trivago.images.com",
"defaultTransforms": {
"fetch_format": "auto",
"quality": "auto"
}
}
```
- **native** - these are directly passed into the `cloudinary-core` upon instantiation, you can use
all the [configs in the official cloudinary API](https://cloudinary.com/documentation/solution_overview#configuration_parameters).
- **overrideBaseUrl** - set this to true if you want to override cloudinary default URL with the property **host**.
- **host** - a host to perform replace the default generated base URL (`res.cloudinary.com/trivago/image/upload`).
- **defaultTransforms** - an object that holds transforms that are applied by default
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.
### \_\_buildCloudinaryUrl
```javascript
__buildCloudinaryUrl(assetName, options);
```
> http[s]://host/\/\\\\
- **assetName** {string} **[mandatory]** - a string that represents the asset/image name.
- **options** {object} **[optional]** - the options object aggregates a series of optional parameters that
you can feed in to the plugin in order to customize your URL. Again note that **all parameters inside of `options`
are entirely optional**.
- **options.transforms** {object} - these object are the cloudinary transformations to apply to the URL (e.g. `{height: 250, width: 250}`).
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.
- **options.prefix** {string} - a prefix string for you `assetName`.
- **options.postfix** {string} - a postfix string for you `assetName`.
- **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
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 ``.
## Usage
### Install the plugin
> npm install babel-plugin-cloudinary
### Add the plugin to your .babelrc
```json
{
"plugins": ["babel-plugin-cloudinary"]
}
```
### Use it in your code
```javascript
// gallery.js
function getImageUrl(imageName) {
// compiles into "`${'https://res.cloudinary.com//image/upload/'}${imageName}${'.jpeg'}`;"
return __buildCloudinaryUrl(imageName, {
transforms: {
width: 250,
height: 250,
},
resourceExtension: ".jpeg",
});
}
```
### Additional configurations
This projects ships together with the plugin a types definition file (`index.d.ts`) that will
be 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:
```javascript
// .eslintrc.js
module.exports = {
// ...
globals: {
// ...
__buildCloudinaryUrl: true,
},
// ...
};
```