{"id":22485473,"url":"https://github.com/cloudinary/cloudinary-svelte","last_synced_at":"2025-12-25T01:48:25.436Z","repository":{"id":52719548,"uuid":"256143357","full_name":"cloudinary/cloudinary-svelte","owner":"cloudinary","description":"Cloudinary components library for Svelte  ","archived":false,"fork":false,"pushed_at":"2023-08-13T08:22:49.000Z","size":1966,"stargazers_count":17,"open_issues_count":0,"forks_count":3,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-04-13T09:18:08.618Z","etag":null,"topics":["cloudinary-sdk"],"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/cloudinary.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-04-16T07:37:49.000Z","updated_at":"2023-02-27T00:55:38.000Z","dependencies_parsed_at":"2022-08-21T21:40:27.232Z","dependency_job_id":null,"html_url":"https://github.com/cloudinary/cloudinary-svelte","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary%2Fcloudinary-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary%2Fcloudinary-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary%2Fcloudinary-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudinary%2Fcloudinary-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudinary","download_url":"https://codeload.github.com/cloudinary/cloudinary-svelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499970,"owners_count":17929990,"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-sdk"],"created_at":"2024-12-06T17:12:41.960Z","updated_at":"2025-12-25T01:48:25.424Z","avatar_url":"https://github.com/cloudinary.png","language":"JavaScript","readme":"\u003e DEPRECATED\n\u003e \n\u003e This package has been deprecated, see https://github.com/cloudinary-community/svelte-cloudinary\n\u003e\n\n# cloudinary-svelte\n\n## Cloudinary components library for Svelte\n\n[Cloudinary](https://cloudinary.com) is a cloud service that offers a solution to a web application's entire image and video management pipeline.\n\nEasily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more.\n\nCloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.\n\nCloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.\n\n\n## Installation\nInstall the package using the following command:\n\n```shell\nnpm i @cloudinary/svelte\n```\n\n## Setup\n1. Include the cloudinary-svelte package in your code, for example: \n    ```javascript\n    import { Image, Video } from '@cloudinary/svelte';\n    ```\n    \n2. Add an Image or Video component in your html:\n    ```html\n    \u003cImage.../\u003e \u003cVideo.../\u003e\n    ```\n3. Pass the required parameters to the component:\n    ```javascript\n    // cloud_name - is your Cloudinary account\n    // public_id  - is the asset identifier in your Cloudinary account\n    //              (usually the file name without a file extension)\n    \u003cImage cloud_name=\"demo\" public_id=\"sample\" …{any \u003cimg\u003e tag attributes}/\u003e\n    ```\n4. To fetch a transformed asset, you can pass a transformation parameter to the Image or Video components.  \n   For example, this transformation will alter the image URL to fetch the same image scaled to 200px:  \n    ```javascript\n   transformation = “{ width: 200, crop: ‘scale’ }”  \n    ```   \n   The transformation object can be an array of transformations,  \n   where each transformation is applied to the result of the previous transformation, for example:  \n    ```javascript\n    transformation=\"{[\n     { width: 400, height: 400, gravity: 'face', radius: 'max', crop: 'crop' },\n     { width: 200, crop: 'scale' }\n    ]}\"\n    ```\n\n## Components\n* [Image](https://cloudinary.github.io/cloudinary-svelte/?path=/docs/image--sample)\n* [Video](https://cloudinary.github.io/cloudinary-svelte/?path=/docs/video--sample)\n\n\n## Usage Example\n   \n```html\n\u003cscript\u003e\n  import { Image, Video } from '@cloudinary/svelte';\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  main {\n    text-align: center;\n    padding: 1em;\n    max-width: 240px;\n    margin: 0 auto;\n  }\n\u003c/style\u003e\n\n\u003cmain\u003e\n    \u003cImage\n      cloud_name=\"demo\"\n      public_id=\"sample\"\n      transformation=\"{[\n        { width: 400, height: 400, gravity: 'face', radius: 'max', crop: 'crop' },\n        { width: 200, crop: 'scale' }\n      ]}\"\n    /\u003e\n    \n    \u003cVideo\n      cloud_name=\"demo\"\n      public_id=\"dog\"\n      transformation={{ angle: 20 }}\n      controls\n      muted\n    /\u003e\n\u003c/main\u003e\n```\n\n#### Image result:\n\u003cdiv\u003e\n    \u003cimg alt=\"sample\" src=\"http://res.cloudinary.com/demo/image/upload/c_crop,g_face,h_400,r_max,w_400/c_scale,w_200/sample\"\u003e\n\u003c/div\u003e\n\n#### Video result:\nThe video component will generate this html:\n([See actual video here](http://res.cloudinary.com/demo/video/upload/a_20/dog.mp4))\n```html\n\u003cvideo controls muted poster=\"http://res.cloudinary.com/demo/video/upload/a_20/dog.jpg\"\u003e\n    \u003csource src=\"http://res.cloudinary.com/demo/video/upload/a_20/dog.webm\" type=\"video/webm\"\u003e\n    \u003csource src=\"http://res.cloudinary.com/demo/video/upload/a_20/dog.mp4\" type=\"video/mp4\"\u003e\n    \u003csource src=\"http://res.cloudinary.com/demo/video/upload/a_20/dog.ogv\" type=\"video/ogg\"\u003e\n\u003c/video\u003e\n```\n\n## Documentation:\n\nThe Cloudinary Documentation can be found at:\nhttp://cloudinary.com/documentation\n\n### Additional resources\n\nAdditional resources are available at:\n\n* [Website](http://cloudinary.com)\n* [Documentation](http://cloudinary.com/documentation)\n* [Knowledge Base](http://support.cloudinary.com/forums)\n* [Image transformations documentation](http://cloudinary.com/documentation/image_transformations)\n\n## Support\n\nYou can [open an issue through GitHub](https://github.com/cloudinary/cloudinary-svelte/issues).\n\nContact us at [http://cloudinary.com/contact](http://cloudinary.com/contact).\n\nStay tuned for updates, tips and tutorials: [Blog](http://cloudinary.com/blog), [Twitter](https://twitter.com/cloudinary), [Facebook](http://www.facebook.com/Cloudinary).\n\n## Join the Community ##########################################################\n\nImpact the product, hear updates, test drive new features and more! Join [here](https://www.facebook.com/groups/CloudinaryCommunity).\n\n## License\n\nReleased under the MIT license.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary%2Fcloudinary-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudinary%2Fcloudinary-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudinary%2Fcloudinary-svelte/lists"}