{"id":17224640,"url":"https://github.com/marnusw/cloudinary-tiny-js","last_synced_at":"2025-04-14T00:44:45.293Z","repository":{"id":24845684,"uuid":"101484718","full_name":"marnusw/cloudinary-tiny-js","owner":"marnusw","description":"A much smaller alternative to cloudinary-core for client side image transformations","archived":false,"fork":false,"pushed_at":"2023-10-13T11:19:28.000Z","size":995,"stargazers_count":30,"open_issues_count":9,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-08T15:50:55.639Z","etag":null,"topics":["cloudinary"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/marnusw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"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":"2017-08-26T12:35:29.000Z","updated_at":"2025-02-03T12:15:55.000Z","dependencies_parsed_at":"2024-06-21T14:10:19.567Z","dependency_job_id":"1f44feef-bd38-4857-abfd-482b2153eb8d","html_url":"https://github.com/marnusw/cloudinary-tiny-js","commit_stats":{"total_commits":43,"total_committers":3,"mean_commits":"14.333333333333334","dds":"0.046511627906976716","last_synced_commit":"e17273876aae346c89b26c884ec474cebadfc690"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marnusw%2Fcloudinary-tiny-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marnusw%2Fcloudinary-tiny-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marnusw%2Fcloudinary-tiny-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marnusw%2Fcloudinary-tiny-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marnusw","download_url":"https://codeload.github.com/marnusw/cloudinary-tiny-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804721,"owners_count":21164127,"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":["cloudinary"],"created_at":"2024-10-15T04:11:37.655Z","updated_at":"2025-04-14T00:44:45.276Z","avatar_url":"https://github.com/marnusw.png","language":"TypeScript","readme":"# Cloudinary Tiny JS\n\n[Cloudinary](http://cloudinary.com/) is a cloud service that offers a solution to a web application's entire image\nmanagement pipeline. For client-side image management Cloudinary provides the `cloudinary-core` library for conveniently\ncompiling transform options to asset URLs. The problem is that it's a _massive library_ often used to simply convert an\nobject of properties to a string.\n\n`cloudinary-tiny-js` provides the same commonly used image transformation features at a fraction of the size and without\nany dependencies.\n\nVideo transformations are not currently supported nor are some advanced configuration options. It \nmay also fall short on some advanced image transformations. If you need this functionality, please \nsubmit PRs with references to the relevant Cloudinary documentation.\n\n## Usage\n\n### Basic configuration\n\nThe default export is a configuration function returning another function for building Cloudinary \nURLs. Configuration option names follow the documentation on\n[Transforming media assets using dynamic URLs](https://cloudinary.com/documentation/image_transformations#transforming_media_assets_using_dynamic_urls)\nand [Private CDNs and CNAMEs](https://cloudinary.com/documentation/advanced_url_delivery_options#private_cdns_and_cnames)\n. Only the `cloudName` is required. Defaults are shown below.\n\n```javascript\nimport cloudinary from 'cloudinary-tiny-js'\n\nconst cl = cloudinary({\n  /** The name of your Cloudinary account, a unique public identifier for URL building and API access. */\n  cloudName: 'demo',\n  /**\n   * The type of asset to deliver, `image` by default. Valid values: `image`, `raw`, or `video`.\n   * Only the `image` type currently supports transforms.\n   */\n  assetType: 'image',\n  /**\n   * The storage or delivery type. Default: upload. For details on all possible types, see the\n   * Cloudinary docs on delivery types.\n   */\n  deliveryType: 'upload',\n  /** Use https instead of http */\n  secure: true,\n  /** Override the subdomain when using a private CDN distribution. */\n  cdnSubdomain: 'res',\n  /** A fully customisable CNAME. */\n  cname: 'res.cloudinary.com',\n  /** Transforms applied to all images, any transforms passed later will extend these defaults. */\n  imageTransformDefaults: { quality: 'auto' /* Any valid transforms, see below */ },\n})\n\nconst imageUrl = cl('sample.png', { width: 150 })\nexpect(imageUrl).toBe('https://res.cloudinary.com/demo/image/upload/q_auto,w_150/sample.png')\n```\n\n### Image transformations\n\nAll image transformations documented in the\n[Transformation URL API reference](https://cloudinary.com/documentation/transformation_reference)\nare supported except for arithmetic operators, conditionals and variables.\n\nTo create a resource URL, call the function returned by the configuration function with a public ID and optional image\ntransformation options:\n\n```javascript\nconst basicUrl = cl('sample.png')\nexpect(basicUrl).toBe('https://res.cloudinary.com/demo/image/upload/v1/sample.png')\n\nconst resizedUrl = cl('sample.png', { width: 150, height: 100 })\nexpect(resizedUrl).toBe('https://res.cloudinary.com/demo/image/upload/w_150,h_100/v1/sample.png')\n```\n\nOther options that can be provided alongside transform options are:\n\n```javascript\nconst url = cl('http://example.com/sample.dat', {\n  /**\n   * Specify a single or multiple transformations to apply. The options of a single transform can also\n   * be included directly on this parent object. Note that the default transforms are only applied\n   * when a single transform is provided and not for an array of transforms.\n   */\n  transformations: undefined,\n  /**\n   * Override the `assetType` provided in the configuration.\n   */\n  assetType: 'raw',\n  /**\n   * Override the `deliveryType` provided in the configuration.\n   */\n  deliveryType: 'fetch',\n  /**\n   * You can add the version to your delivery URL to bypass the cached version on the CDN and\n   * force delivery of the latest resource. As an alternative to using versions, you can set the\n   * `invalidate` parameter to true while uploading a new image in order to invalidate the\n   * previous image throughout the CDN.\n   */\n  version: 742,\n})\nexpect(url).toBe('http://res.cloudinary.com/demo/raw/fetch/v742/http://example.com/sample.dat')\n```\n\nTo perform multiple transformations an array of transform objects can be passed; the array can be passed directly as the\nsecond parameter or on the `transformations` property along with other options.\n\nThis will generate the URL of the first example in the\n[Image transformation reference](http://cloudinary.com/documentation/image_transformation_reference):\n\n```javascript\nconst transformations = [\n  { width: 220, height: 140, crop: 'fill' },\n  { overlay: 'brown_sheep', width: 220, height: 140, x: 220, crop: 'fill' },\n  { overlay: 'horses', width: 220, height: 140, x: -110, y: 140, crop: 'fill' },\n  { overlay: 'white_chicken', width: 220, height: 140, x: 110, y: 70, crop: 'fill' },\n  { overlay: 'butterfly.png', height: 200, x: -10, angle: 10 },\n  { width: 400, height: 260, radius: 20, crop: 'crop' },\n  { overlay: 'text:Parisienne_35_bold:Memories%20from%20our%20trip', color: '#990C47', y: 155 },\n  { effect: 'shadow' },\n]\n\nconst url = cl('yellow_tulip.jpg', transformations)\n\n// Or with other options\nconst url = cl('yellow_tulip.jpg', {\n  version: 423,\n  transformations,\n})\n```\n\n### Specifying default image transformations\n\nThe `imageTransformDefaults` property provides a convenient way to include certain transform options in all image\ntransforms. For example, specifying auto format, quality and width for all images can be achieved by passing:\n\n```javascript\nconst cl = cloudinary({\n  cloudName: 'demo',\n  imageTransformDefaults: {\n    format: 'auto',\n    quality: 'auto',\n    width: 'auto',\n  },\n})\n\nconst imageUrl = cl('sample.png', { aspectRatio: '16:9' })\nexpect(imageUrl).toBe('https://res.cloudina.../f_auto,q_auto,w_auto,ar_16:9/v1/sample.png')\n```\n\nOverride any default value by passing a replacement value or remove it from the URL by passing `undefined`:\n\n```javascript\nconst cl = cloudinary({\n  cloudName: 'demo',\n  imageTransformDefaults: {\n    format: 'auto',\n    quality: 'auto',\n    width: 'auto',\n  },\n})\n\nconst imageUrl = cl('sample.png', { aspectRatio: '16:9', width: 150, quality: undefined })\nexpect(imageUrl).toBe('https://res.cloudina.../f_auto,ar_16:9,w_150/v1/sample.png')\n```\n\n### Transformation parameter validation\n\nTypings should help to provide valid parameter values in most cases, but errors will also be thrown on invalid parameter\nvalues in development, for example:\n\n```javascript\ncl('sample.jpg', { radius: 'round' })\n// Throws:\n// Cloudinary Image :: radius should be a number, 'max' or have the form x[:y[:z[:u]]], received: 'round'\n```\n\nSome exceptions are the `effect`, `overlay` and `underlay` values which are not validated.\n\n### Building for production\n\nWhen building for production ensure `process.env.NODE_ENV === 'production'` so the validation logic can be removed from\nthe bundle during minification.\n\n## Contributing\n\nThe most important configuration and image transformation features of Cloudinary should be supported, but if anything is\nmissing please submit issues or PRs with references to the relevant Cloudinary documentation.\n\n## License\n\nMIT\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarnusw%2Fcloudinary-tiny-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarnusw%2Fcloudinary-tiny-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarnusw%2Fcloudinary-tiny-js/lists"}