cupcakearmy/svelte-cloudinary
1
0
Fork 0
mirror of https://github.com/cupcakearmy/svelte-cloudinary.git synced 2024-12-22 16:06:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

only npm in install

Browse Source
This commit is contained in:
cupcakearmy 2021-12-26 21:47:37 +01:00
parent f5f2ef76ef
commit 690af18eb1
No known key found for this signature in database
GPG Key ID: 3235314B4D31232F
1 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -6,7 +6,6 @@
![version badge](https://badgen.net/npm/v/svelte-cloudinary) ![version badge](https://badgen.net/npm/v/svelte-cloudinary)
![minzip size badge](https://badgen.net/bundlephobia/minzip/svelte-cloudinary) ![minzip size badge](https://badgen.net/bundlephobia/minzip/svelte-cloudinary)
This is a little library that aims at integrating and making it easier to use the svelte with [Cloudinary](https://cloudinary.com/). This is a little library that aims at integrating and making it easier to use the svelte with [Cloudinary](https://cloudinary.com/).
There 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.). There 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.).
@ -25,9 +24,6 @@ There is an [official integration coming](https://github.com/cloudinary/cloudina
## 🚀 Quickstart ## 🚀 Quickstart
```bash
yarn add svelte-cloudinary
```
```bash ```bash
npm install svelte-cloudinary npm install svelte-cloudinary
``` ```
@ -65,8 +61,8 @@ Also it will resize to the `img` object itself because we set `bind: true`.
If 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. If 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.
* Settings -> Security -> Allowed fetch domains: Add your domain(s) from which the images are fetched from. - Settings -> Security -> Allowed fetch domains: Add your domain(s) from which the images are fetched from.
* Settings -> Upload -> Auto upload mapping: Set the mapping for your domain and/or path - Settings -> Upload -> Auto upload mapping: Set the mapping for your domain and/or path
###### Example ###### Example
@ -150,13 +146,13 @@ With bind we can dynamically set the width and/or height of the transformed imag
If you provide a `bind` options (`<img use:image={{..., bind: true }} />`) but no crop option, we will automatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary. If you provide a `bind` options (`<img use:image={{..., bind: true }} />`) but no crop option, we will automatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary.
###### TLDR; ###### TLDR;
```svelte ```svelte
<img use:image={{ src, bind: true }} /> <img use:image={{ src, bind: true }} />
<!-- Is internally equivalent to the following --> <!-- Is internally equivalent to the following -->
<img use:image={{ src, bind: true, options: { crop: 'fill' } }} /> <img use:image={{ src, bind: true, options: { crop: 'fill' } }} />
``` ```
## ⌨️ Examples ## ⌨️ Examples
### Fixed size ### Fixed size
@ -167,7 +163,6 @@ If you provide a `bind` options (`<img use:image={{..., bind: true }} />`) but n
/> />
``` ```
### `bind` ### `bind`
```svelte ```svelte