{"id":13632520,"url":"https://github.com/cupcakearmy/svelte-cloudinary","last_synced_at":"2025-04-18T02:33:31.911Z","repository":{"id":45264612,"uuid":"310939586","full_name":"cupcakearmy/svelte-cloudinary","owner":"cupcakearmy","description":"Cloudinary SDK for Svelte","archived":true,"fork":false,"pushed_at":"2023-05-22T20:08:47.000Z","size":64,"stargazers_count":15,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-01T22:53:39.133Z","etag":null,"topics":["cloudinary","cloudinary-sdk","sapper","ssr","svelte"],"latest_commit_sha":null,"homepage":"https://svelte-cloudinary.vercel.app","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/cupcakearmy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"cupcakearmy"}},"created_at":"2020-11-07T22:01:26.000Z","updated_at":"2023-10-06T14:47:40.000Z","dependencies_parsed_at":"2024-04-16T10:05:19.971Z","dependency_job_id":null,"html_url":"https://github.com/cupcakearmy/svelte-cloudinary","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fsvelte-cloudinary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fsvelte-cloudinary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fsvelte-cloudinary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cupcakearmy%2Fsvelte-cloudinary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cupcakearmy","download_url":"https://codeload.github.com/cupcakearmy/svelte-cloudinary/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223772259,"owners_count":17199975,"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","cloudinary-sdk","sapper","ssr","svelte"],"created_at":"2024-08-01T22:03:05.626Z","updated_at":"2024-11-09T00:31:37.598Z","avatar_url":"https://github.com/cupcakearmy.png","language":"TypeScript","readme":"\u003e DEPRECATED\n\u003e\n\u003e See https://github.com/cloudinary-community/svelte-cloudinary\n\u003e\n\u003e The npm package will be transfered to them.\n\n# svelte-cloudinary\n\n![dependencies](https://badgen.net/david/dep/cupcakearmy/svelte-cloudinary)\n![downloads badge](https://badgen.net/npm/dt/svelte-cloudinary)\n![types badge](https://badgen.net/npm/types/svelte-cloudinary)\n![version badge](https://badgen.net/npm/v/svelte-cloudinary)\n![minzip size badge](https://badgen.net/bundlephobia/minzip/svelte-cloudinary)\n\nThis is a little library that aims at integrating and making it easier to use the svelte with [Cloudinary](https://cloudinary.com/).\nThere is an [official integration coming](https://github.com/cloudinary/cloudinary-svelte), but it's not ready and for not does not work great for now (SSR e.g.).\n\n## 🌈 Features\n\n- Fully typed and typescript compatible\n- [Tiny: `~30kb gzip`](https://bundlephobia.com/result?p=svelte-cloudinary) (Of which 99% is the cloudinary dep.)\n- Automatic **resizing** based on the DOM and applied CSS\n- Automatic **lazy loading**\n- Fully compatible with native cloudinary options\n- Sapper (SSR) compatible\n\n## 🗂 [Docs](https://svelte-cloudinary.vercel.app/modules/_index_)\n\n## ❓ Questions \u0026 More -\u003e [Discussions](https://github.com/cupcakearmy/svelte-cloudinary/discussions)\n\n## 🚀 Quickstart\n\n```bash\nnpm install svelte-cloudinary\n```\n\n```svelte\n\u003cscript\u003e\n\n  import { image, initialize } from 'svelte-cloudinary'\n\n  initialize({ cloud_name: 'myCloudinaryCloud' })\n\n  const src = 'my/cloudinary/asset'\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  img {\n    width: 50vw;\n    height: 50vh;\n    object-fit: cover;\n  }\n\u003c/style\u003e\n\n\u003cimg\n  use:image={{ src, bind: true, lazy: true }}\n  class=\"home-img\"\n  alt=\"background\" /\u003e\n```\n\nThis will formulate the Cloudinary url and insert it into the `img.src` property.\nAlso it will resize to the `img` object itself because we set `bind: true`.\n\n\u003e ⚠️ In firefox if you want to use the `bind` option to automatically compute sizes you need to set `img { display: inline-block or block; }` otherwise there can be problems with `getComputedStyle`.\n\n## ☁️ Cloudinary Setup\n\nIf you want the use super handfull auto upload function (which I think will apply to everyone) you have to set configure a few settings first.\n\n- Settings -\u003e Security -\u003e Allowed fetch domains: Add your domain(s) from which the images are fetched from.\n- Settings -\u003e Upload -\u003e Auto upload mapping: Set the mapping for your domain and/or path\n\n###### Example\n\nImmagine you want to serve an image with the url of: `https://api.example.org/images/elephants.png`\n\n1. Settings -\u003e Security -\u003e Allowed fetch domains: Add `api.example.org` to the list.\n2. Settings -\u003e Upload -\u003e Auto upload mapping:\u003cbr\u003eFolder: `myimages`\u003cbr\u003eURL prefix: `https://api.example.org/images/`\n\nNow you can use the auto upload funtion like this:\n\n```svelte\n\u003cimg\n  use:image={{ src: 'myimages/elephants.png' }}\n  class=\"home-img\"\n  alt=\"background\" /\u003e\n```\n\n## 🤔 Why an [action](https://svelte.dev/docs#use_action) and not component?\n\nWell components are great of course, but when we only need to set a `src` tags we can leverage the upsides of a svelte [action](https://svelte.dev/docs#use_action)\n\nWhat are benefits?\n\n- Native styling (Svelte for now does not allow easy styling of child components) \u003cbr\u003e With an action we can easily use local styling beacuse we still have access to the `\u003cimg /\u003e` element\n- Lightweight\n- Reusable and composable\n\nDownsides:\n\n- The src will not be set serverside, so also not in the initial server response. Which I believe is not that bad though for images.\n\n## 👷 Sapper\n\nIf you are using sapper you can initialize it once in your root `_layout.svelte`.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { initialize } from 'svelte-cloudinary'\n\n\tinitialize({ cloud_name: 'mycloud' })\n\n  // ...\n\u003c/script\u003e\n```\n\n## 🤓 Key Concepts\n\n### `lazy`\n\n###### default `true`\n\nIf images should use the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to lazy load.\n\n### `step`\n\n###### default `200`\n\nThe `step` property helps reducing the amounts of transformations cloudinary need to perform and less credits being billed to you.\n\nHow? Basically whenever we calculate the dynamic size of the image rendered on the DOM we will get very specific numbers depending on the device.\n\nWith `step` we approximate the size needed to the nearset bigger multiple of `step`.\n\n###### Example\n\nImagine the same `\u003cimg /\u003e` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively.\n\nWith a `step` size of e.g. `100` (`\u003cimg use:image={{ ..., step: 100 }} /\u003e`) they will become `500`, `500`, and `1100`. This will limit the ammount of transformations needed.\n\n### `bind`\n\nWith bind we can dynamically set the width and/or height of the transformed image depending of the rendered size.\n\n- `bind: this` The size of the `\u003cimg /\u003e` element\n- `bind: el` The computed size of another element in the dom (useful for a carousel e.g.)\n- `bind: { width: this }` Only bind the width, leaving the height free. Also works with height of course\n- `bind: { width: '.wrapper' }` Finds the closest element that matches the selector and uses it for width.\n\n##### Note\n\nIf you provide a `bind` options (`\u003cimg use:image={{..., bind: true }} /\u003e`) but no crop option, we will automatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary.\n\n###### TLDR;\n\n```svelte\n\u003cimg use:image={{ src, bind: true }} /\u003e\n\u003c!-- Is internally equivalent to the following --\u003e\n\u003cimg use:image={{ src, bind: true, options: { crop: 'fill' } }} /\u003e\n```\n\n## ⌨️ Examples\n\n### Fixed size\n\n```svelte\n\u003cimg\n  use:image={{ src, options: { width: 200, height: 100, crop: 'fill' } }}\n/\u003e\n```\n\n### `bind`\n\n```svelte\n\u003c!-- Simple --\u003e\n\u003cimg\n  use:image={{ src, bind: true, }}\n/\u003e\n```\n\n```svelte\n\u003c!-- Bind size to parent with selectors --\u003e\n\u003cdiv class=\"wrapper\"\n  \u003cimg\n    use:image={{ src, bind: '.wrapper', }}\n  /\u003e\n\u003c/div\u003e\n```\n\n```svelte\n\u003c!-- Bind width to parent with element --\u003e\n\u003cdiv class=\"wrapper\"\n  \u003cimg\n    use:image={{ src, bind: { width: '.wrapper' }, }}\n  /\u003e\n\u003c/div\u003e\n```\n\n### `options`\n\nNative cloudinary options. See [here for official docs](https://cloudinary.com/documentation/image_transformations)\nFor a quick glance\n","funding_links":["https://github.com/sponsors/cupcakearmy"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcupcakearmy%2Fsvelte-cloudinary","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcupcakearmy%2Fsvelte-cloudinary","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcupcakearmy%2Fsvelte-cloudinary/lists"}