svelte-cloudinary

This is a little library that aims at integrating and making it easier to use the svelte with Cloudinary. 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 (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

yarn add 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.

🗂 Docs

⌨️ Examples

<!-- 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

1.7 KiB Raw Blame History