diff --git a/README.md b/README.md index 79b0066..4cfee5c 100644 --- a/README.md +++ b/README.md @@ -46,8 +46,56 @@ yarn add svelte-cloudinary This will formulate the Cloudinary url and insert it into the `img.src` property. Also it will resize to the `img` object itself because we set `bind: true`. +## Key Concepts + +### `step` + +The `step` property (defaults to `200`) helps reducing the amounts of transformations cloudinary need to perform and less credits being billed to you. + +How? Basically whenever we calculate the dynamic size of the image rendered on the DOM we will get very specific numbers depending on the device. + +With `step` we approximate the size needed to a multiple of `step`. + +###### Example + +Immagine the same `` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively. + +With a `step` size of e.g. `100` (``) they will become `500`, `500`, and `1100`. This will limit the ammount of transformations needed. + +### `bind` + +With bind we can dynamically set the width and/or height of the transformet image depending of the rendered size. + +- `bind: this` The size of the `` element +- `bind: el` The computed size of another element in the dom (usefull for a carousell e.g.) +- `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. + +##### Note + +If you provide a `bind` options (``) but no crop option, we will automcatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary. + +###### TLDR; +```svelte + + + +``` + + ## ⌨️ Examples +### Fixed size + +```svelte + +``` + + +### `bind` + ```svelte