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

Merge pull request #1 from edjw/patch-1

Browse Source 
fixing several typos in readme
This commit is contained in:
Nicco 2020-11-12 11:49:09 +01:00 committed by GitHub
commit 3dab3caab6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -1,7 +1,7 @@
# svelte-cloudinary # 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 comming, but it's not ready and for not does not work great. There is an official integration coming, but it's not ready and for not does not work great.
## 🌈 Features ## 🌈 Features
@ -59,22 +59,22 @@ With `step` we approximate the size needed to a multiple of `step`.
###### Example ###### Example
Immagine the same `<img />` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively. Imagine the same `<img />` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively.
With a `step` size of e.g. `100` (`<img use:image={{ ..., step: 100 }} />`) they will become `500`, `500`, and `1100`. This will limit the ammount of transformations needed. With a `step` size of e.g. `100` (`<img use:image={{ ..., step: 100 }} />`) they will become `500`, `500`, and `1100`. This will limit the ammount of transformations needed.
### `bind` ### `bind`
With bind we can dynamically set the width and/or height of the transformet image depending of the rendered size. With bind we can dynamically set the width and/or height of the transformed image depending of the rendered size.
- `bind: this` The size of the `<img />` element - `bind: this` The size of the `<img />` element
- `bind: el` The computed size of another element in the dom (usefull for a carousell e.g.) - `bind: el` The computed size of another element in the dom (useful for a carousel e.g.)
- `bind: { width: this }` Only bind the width, leaving the height free. Also works with height of course - `bind: { width: this }` Only bind the width, leaving the height free. Also works with height of course
- `bind: { width: '.wrapper' }` Finds the closest element that matches the selector and uses it for width. - `bind: { width: '.wrapper' }` Finds the closest element that matches the selector and uses it for width.
##### Note ##### Note
If you provide a `bind` options (`<img use:image={{..., bind: true }} />`) but no crop option, we will automcatically 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