DEPRECATED
See https://github.com/cloudinary-community/svelte-cloudinary
The npm package will be transfered to them.
This is a little library that aims at integrating and making it easier to use the svelte with Cloudinary. There is an official integration coming, but it's not ready and for not does not work great for now (SSR e.g.).
~30kb gzip
(Of which 99% is the cloudinary dep.)npm install svelte-cloudinary
<script>
import { image, initialize } from 'svelte-cloudinary'
initialize({ cloud_name: 'myCloudinaryCloud' })
const src = 'my/cloudinary/asset'
</script>
<style>
img {
width: 50vw;
height: 50vh;
object-fit: cover;
}
</style>
<img
use:image={{ src, bind: true, lazy: true }}
class="home-img"
alt="background" />
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
.
⚠️ In firefox if you want to use the
bind
option to automatically compute sizes you need to setimg { display: inline-block or block; }
otherwise there can be problems withgetComputedStyle
.
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.
Immagine you want to serve an image with the url of: https://api.example.org/images/elephants.png
api.example.org
to the list.myimages
https://api.example.org/images/
Now you can use the auto upload funtion like this:
<img
use:image={{ src: 'myimages/elephants.png' }}
class="home-img"
alt="background" />
Well components are great of course, but when we only need to set a src
tags we can leverage the upsides of a svelte action
What are benefits?
<img />
elementDownsides:
If you are using sapper you can initialize it once in your root _layout.svelte
.
<script lang="ts">
import { initialize } from 'svelte-cloudinary'
initialize({ cloud_name: 'mycloud' })
// ...
</script>
lazy
true
If images should use the Intersection Observer API
to lazy load.
step
200
The step
property 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 the nearset bigger multiple of step
.
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.
bind
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 />
elementbind: 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 coursebind: { width: '.wrapper' }
Finds the closest element that matches the selector and uses it for width.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.
<img use:image={{ src, bind: true }} />
<!-- Is internally equivalent to the following -->
<img use:image={{ src, bind: true, options: { crop: 'fill' } }} />
<img
use:image={{ src, options: { width: 200, height: 100, crop: 'fill' } }}
/>
bind
<!-- Simple -->
<img
use:image={{ src, bind: true, }}
/>
<!-- Bind size to parent with selectors -->
<div class="wrapper"
<img
use:image={{ src, bind: '.wrapper', }}
/>
</div>
<!-- Bind width to parent with element -->
<div class="wrapper"
<img
use:image={{ src, bind: { width: '.wrapper' }, }}
/>
</div>
options
Native cloudinary options. See here for official docs For a quick glance