only npm in install

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

View File

@ -6,7 +6,6 @@
![version badge](https://badgen.net/npm/v/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/).
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
```bash
yarn add svelte-cloudinary
```
```bash
npm install svelte-cloudinary
```
@ -36,7 +32,7 @@ npm install svelte-cloudinary
<script>
import { image, initialize } from 'svelte-cloudinary'
initialize({ cloud_name: 'myCloudinaryCloud' })
const src = 'my/cloudinary/asset'
@ -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.
* 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 -> 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
###### Example
@ -107,7 +103,7 @@ If you are using sapper you can initialize it once in your root `_layout.svelte`
import { initialize } from 'svelte-cloudinary'
initialize({ cloud_name: 'mycloud' })
// ...
</script>
```
@ -118,7 +114,7 @@ If you are using sapper you can initialize it once in your root `_layout.svelte`
###### default `true`
If images should use the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to lazy load.
If images should use the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to lazy load.
### `step`
@ -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.
###### TLDR;
```svelte
<img use:image={{ src, bind: true }} />
<!-- Is internally equivalent to the following -->
<img use:image={{ src, bind: true, options: { crop: 'fill' } }} />
```
## ⌨️ Examples
### Fixed size
@ -167,7 +163,6 @@ If you provide a `bind` options (`<img use:image={{..., bind: true }} />`) but n
/>
```
### `bind`
```svelte