Configure the Javascript SDK in Svelte (video tutorial)

Overview

Learn how to install and configure the Cloudinary Javascript SDK using the Svelte community-developed library.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:00	With the Cloudinary Javascript SDK, you can easily access, transform and optimize your media assets directly in your SvelteKit application.

Install the dependency

0:12	First, install the corresponding dependency, @cloudinary/url-gen:

Run the SvelteKit application

0:20	Launch the sample SvelteKit application with the following command:

Import the Cloudinary package

0:28	On the SvelteKit page, import the Cloudinary package:

Configure Cloudinary

0:33	You can configure Cloudinary by passing your cloud name, accessible from your Cloudinary Dashboard. This configuration will generate an object that allows you to access the various methods from the library. Remember to replace tutorials in this example with your own cloud name:

Add an image

0:48	Create a variable to store the image reference. Use the image method, which accepts the asset's public ID (the identifier of a Cloudinary image) as its parameter. You can view this sample image of a sneaker with public ID cld-sample-5 inside your Media Library.

Optimize the image

1:08	Configure your image to be automatically delivered in the best format for the requesting browser and optimized for compression, resulting in the smallest file size while maintaining visual quality.

Render the image

1:19	Use a simple image tag with the image.toURL() method, placing the image's delivery URL in the src attribute of the image tag. Verify the delivery URL through Developer Tools to ensure Cloudinary delivers the image with the f_auto and q_auto qualifiers.

---

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.