mirror of
https://github.com/cupcakearmy/svelte-cloudinary.git
synced 2024-12-22 16:06:25 +00:00
Update README.md
This commit is contained in:
parent
2a874a9d97
commit
59d93da0d4
28
README.md
28
README.md
@ -3,6 +3,14 @@
|
|||||||
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 comming, but it's not ready and for not does not work great.
|
||||||
|
|
||||||
|
## 🌈 Features
|
||||||
|
|
||||||
|
- Fully typed and typescript compatible
|
||||||
|
- [Tiny: `~30kb gzip`](https://bundlephobia.com/result?p=svelte-cloudinary) (Of which 99% is the cloudinary dep.)
|
||||||
|
- Automatic **resizing** based on the DOM and applied CSS
|
||||||
|
- Automatic **lazy loading**
|
||||||
|
- Fully compatible with native cloudinary options
|
||||||
|
|
||||||
## 🚀 Quickstart
|
## 🚀 Quickstart
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -28,7 +36,7 @@ yarn add svelte-cloudinary
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<img
|
<img
|
||||||
use:image={{ src, bind: true, options: { crop: 'fill' } }}
|
use:image={{ src, bind: true, lazy: true }}
|
||||||
class="home-img"
|
class="home-img"
|
||||||
alt="background" />
|
alt="background" />
|
||||||
```
|
```
|
||||||
@ -36,23 +44,9 @@ yarn add svelte-cloudinary
|
|||||||
This will formulate the Cloudinary url and insert it into the `img.src` property.
|
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`.
|
Also it will resize to the `img` object itself because we set `bind: true`.
|
||||||
|
|
||||||
## 🗂 Docs
|
## 🗂 [Docs](https://svelte-cloudinary.vercel.app/modules/_index_)
|
||||||
|
|
||||||
The `image` action takes 3 parameters.
|
## ⌨️ Examples
|
||||||
|
|
||||||
### `src`
|
|
||||||
|
|
||||||
The `publicId` of your asset.
|
|
||||||
|
|
||||||
### `bind`
|
|
||||||
|
|
||||||
This is a utility for setting width and/or height automatically based on the size of a rendered element in the DOM.
|
|
||||||
|
|
||||||
- `true`: Uses the size of the img node itself
|
|
||||||
- `'.someClass'`: Searches for the element closest to the image that matches the css query and takes that as size
|
|
||||||
- `{ height: document.querySelector('#some'), height: '#some' }`: Set height and/or width independently from another. Can be an element or css selector.
|
|
||||||
|
|
||||||
###### Examples
|
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<!-- Simple -->
|
<!-- Simple -->
|
||||||
|
Loading…
Reference in New Issue
Block a user