### Signed Upload Widget Setup with SvelteKit

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/upload-widget/index.mdx

This example demonstrates setting up the upload widget for signed uploads using SvelteKit. It requires a signature endpoint to generate signed parameters using your Cloudinary secret key. Public and private environment variables are used for configuration.

```svelte
<script>
	import { CldUploadWidget } from 'svelte-cloudinary';
	import {
		PUBLIC_CLOUDINARY_CLOUD_NAME,
		PUBLIC_CLOUDINARY_API_KEY,
	} from '$env/static/public';
</script>

<CldUploadWidget
	uploadPreset="<your upload preset>"
	signatureEndpoint="/api/sign-cloudinary-params"
	config={{
		cloud: {
			cloudName: PUBLIC_CLOUDINARY_CLOUD_NAME,
			apiKey: PUBLIC_CLOUDINARY_API_KEY,
		},
	}}
	let:open
	let:isLoading>
	<button on:click={() => open()} disabled={isLoading}>
		Open the widget
	</button>
</CldUploadWidget>
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/CONTRIBUTING.md

Installs project dependencies using pnpm. Ensure you have pnpm@9 and node@>18 installed before running.

```bash
pnpm install
```

--------------------------------

### Tint Color Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Apply a tint to an image with the `tint` option. You can set a basic tint or specify intensity and colors.

```javascript
true, 100:red:blue:yellow
```

--------------------------------

### Install svelte-cloudinary with pnpm

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/get-started.mdx

Use this command to install the svelte-cloudinary package as a development dependency using pnpm.

```bash
pnpm add svelte-cloudinary -D
```

--------------------------------

### Install svelte-cloudinary with yarn

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/get-started.mdx

Use this command to install the svelte-cloudinary package as a development dependency using yarn.

```bash
yarn add svelte-cloudinary
```

--------------------------------

### Set Image Format

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Use the `format` prop to deliver the asset in a specific image format. The example shows converting to 'png'.

```jsx
format = 'png';
```

--------------------------------

### Install svelte-cloudinary with npm

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/get-started.mdx

Use this command to install the svelte-cloudinary package as a development dependency using npm.

```bash
npm install svelte-cloudinary -D
```

--------------------------------

### Run All Packages in Development Mode

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/CONTRIBUTING.md

Starts the playground and docs in development mode, and builds svelte-cloudinary in watch mode. Use this for active development.

```bash
pnpm dev
```

--------------------------------

### Border Configuration for Images

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Configure the border for an image using the `border` property. This example shows a 20px solid blue border.

```javascript
border: () => <code>20px_solid_blue</code>
```

--------------------------------

### Saturation Adjustment Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Adjust the saturation of an image using the `saturation` option. It can be set to `true` for default adjustment or a specific value.

```javascript
true, 70
```

--------------------------------

### Place Image Under Another with <CldImage />

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/guides/image-underlays.mdx

Use the `underlay` transformation with the `<CldImage />` component to place an image beneath another. This example also demonstrates background removal.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="960"
	height="600"
	src="images/turtle"
	sizes="100vw"
	alt="Turtle swimming in a galaxy"
	removeBackground
	underlay="images/galaxy" />

```

--------------------------------

### Svelte Upload Code Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/guides/uploading-images-and-videos.mdx

This is the raw Svelte code for the upload component, demonstrating the implementation details for handling uploads.

```svelte
import { onMount } from 'svelte';

let cloudinary;
let widget;

onMount(async () => {
  cloudinary = window.cloudinary;
  if (!cloudinary) {
    // Load Cloudinary SDK if not already loaded
    const script = document.createElement('script');
    script.src = 'https://widget.cloudinary.com/v2_0/latest/cloudinary-core.js';
    script.onload = () => {
      cloudinary = window.cloudinary;
      initWidget();
    };
    document.body.appendChild(script);
  } else {
    initWidget();
  }
});

function initWidget() {
  widget = cloudinary.createUploadWidget({
    cloudName: 'your_cloud_name',
    uploadPreset: 'your_upload_preset'
  }, (error, result) => {
    if (!error && result.event === 'success') {
      console.log('Done! Here is your uploaded image:', result.info);
    }
  });
}

function showWidget() {
  widget.open();
}

```

--------------------------------

### Shadow Effect Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Apply a shadow effect to an image with the `shadow` option. You can enable it with `true` or specify intensity and offset.

```javascript
true, 50,x_-15,y_15
```

--------------------------------

### Simulate Colorblindness Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Simulate different types of colorblindness using the `simulateColorblind` option, specifying the type of simulation.

```javascript
deuteranopia
```

--------------------------------

### Sharpen Image Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Enhance image sharpness using the `sharpen` option. Set to `true` for default sharpening or provide a specific value.

```javascript
true, 100
```

--------------------------------

### Set Image Quality

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Use the `quality` prop to control the compression level of the delivered image. The example sets the quality to 10.

```jsx
quality={10}
```

--------------------------------

### Unsharp Mask Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Apply an unsharp mask filter to an image using the `unsharpMask` option. Set to `true` or provide a specific radius value.

```javascript
true, 500
```

--------------------------------

### Video Player Localization Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/examples.mdx

Pass a language code and a custom language object to the CldVideoPlayer component to localize player labels. This example sets the player language to Spanish ('es') and provides custom Spanish translations for various player UI elements.

```svelte
<script>
	import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
	id="localization"
	src="<Your Public ID>"
	width="4096"
	height="2160"
	language="es"
	languages={{
		es: {
			Play: 'Reproducción',
			'Play Video': 'Reproduce el Video',
			Pause: 'Pausa',
			'Current Time': 'Tiempo reproducido',
			Duration: 'Duración total',
			'Remaining Time': 'Tiempo restante',
			'Stream Type': 'Tipo de secuencia',
			LIVE: 'DIRECTO',
			Loaded: 'Cargado',
			Progress: 'Progreso',
			Fullscreen: 'Pantalla completa',
			'Non-Fullscreen': 'Pantalla no completa',
			Mute: 'Silenciar',
			Unmute: 'No silenciado',
			'Playback Rate': 'Velocidad de reproducción',
			Subtitles: 'Subtítulos',
			'subtitles off': 'Subtítulos desactivados',
			Captions: 'Subtítulos especiales',
			'captions off': 'Subtítulos especiales desactivados',
			Chapters: 'Capítulos',
			'Close Modal Dialog': 'Cerca de diálogo modal',
			'You aborted the video playback':
				'Ha interrumpido la reproducción del vídeo.',
			'A network error caused the video download to fail part-way.':
				'Un error de red ha interrumpido la descarga del vídeo.',
			'The video could not be loaded, either because the server or network failed or because the format is not supported.':
				'No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.',
			'The video playback was aborted due to a corruption problem or because the video used features your browser did not support.':
				'La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.',
			'No compatible source was found for this video.':
				'No se ha encontrado ninguna fuente compatible con este vídeo.'
		}
	}} />
```

--------------------------------

### Unsigned Upload Widget Setup

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/upload-widget/index.mdx

Use this snippet for unsigned uploads. Ensure your upload preset allows unsigned uploads in Cloudinary. The widget UI is opened by calling the `open` function exposed via the `let:open` prop.

```svelte
<script>
	import { CldUploadWidget } from 'svelte-cloudinary';
</script>

<CldUploadWidget uploadPreset="<your upload preset>" let:open let:isLoading>
	<button on:click={() => open()} disabled={isLoading}>
		Open the widget
	</button>
</CldUploadWidget>
```

--------------------------------

### Sepia Tone Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Add a sepia tone to an image using the `sepia` option. It accepts `true` for a default effect or a specific intensity value.

```javascript
true, 50
```

--------------------------------

### Shear Transformation Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Apply a shear transformation to an image using the `shear` option with specified horizontal and vertical values.

```javascript
20.0:0.0
```

--------------------------------

### Vectorize Image Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Vectorize an image using the `vectorize` option. It accepts `true` for default settings or specific parameters for intensity and detail.

```javascript
true, 3:0.5
```

--------------------------------

### Trim Image Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Use the `trim` option to remove transparent borders from an image. It can be set to `true` or with a specific threshold and color.

```javascript
true, 50:yellow
```

--------------------------------

### Font Weight Configuration for Text

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Configure the font weight for text overlays or underlays with the `fontWeight` property. This example sets it to `bold`.

```javascript
fontWeight: () => <code>bold</code>
```

--------------------------------

### Advanced Image Cropping with Source Option

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Configure advanced cropping by providing an object to the `crop` prop. This example uses 'thumb' type and sets `source` to true for cropping the original image.

```jsx
crop={
  width: 1200,
  height: 1200,
  type: 'thumb',
  source: true
}
```

--------------------------------

### Line Spacing Configuration for Text

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Control the spacing between lines of text for overlays or underlays with the `lineSpacing` property. This example sets it to `14`.

```javascript
lineSpacing: () => <code>14</code>
```

--------------------------------

### Customize Generative Fill Background

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Configure the `fillBackground` prop with an object to customize the generative fill. This example specifies crop, gravity, prompt, and seed.

```jsx
fillBackground={{
  crop: 'clpad',
  gravity: 'south',
  prompt: 'cupcakes',
  seed: '3'
}}
```

--------------------------------

### Color Configuration for Text Overlays

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Set the color for text overlays or underlays using the `color` property. This example sets the color to `blueviolet`.

```javascript
color: () => <code>blueviolet</code>
```

--------------------------------

### Poster Image Transformations

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/examples.mdx

Apply transformations to the auto-generated video thumbnail used as the poster image. Example shows a 'tint' effect.

```svelte
<script>
	import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
	id="poster-transformations"
	src="<Your Public ID>"
	width="4096"
	height="2160"
	poster={{
		tint: 'equalize:80:blue:blueviolet',
	}} />
```

--------------------------------

### Replace Color Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Use `replaceColor` to replace a specific color in an image. It accepts a color value, optionally with a tolerance and a new color.

```javascript
saddlebrown, 2F4F4F:20, silver:55:89b8ed
```

--------------------------------

### Text Decoration Configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Apply text decorations like underlines to text overlays or underlays using the `textDecoration` property. This example adds an underline.

```javascript
textDecoration: () => <code>underline</code>
```

--------------------------------

### Font Size Configuration for Text

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Set the font size for text overlays or underlays using the `fontSize` property. This example sets the size to `48`.

```javascript
fontSize: () => <code>48</code>
```

--------------------------------

### Overlay Image with Blend Mode

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Apply blend modes to overlay images using the `appliedEffects` prop within an overlay object. This example uses the 'multiply' blend mode.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="960"
	height="600"
	crop="fill"
	src="<Your Public ID>"
	alt=""
	overlays={[
		{
			publicId: '<Your Public ID>',
			effects: [
				{
					crop: 'fill',
					gravity: 'auto',
					width: '1.0',
				height: '1.0',
				},
			],
			flags: ['relative'],
			appliedEffects: [
				{
					multiply: true,
				},
			],
		},
	]} />
```

--------------------------------

### Set Device Pixel Ratio (DPR)

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Use the `dpr` prop to specify the device pixel ratio for the image. This can be a number or a string. Example shows setting it to '2.0'.

```jsx
dpr = '2.0';
```

--------------------------------

### Example Usage of CldImage with Custom Domain

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/guides/custom-domain.mdx

Use the CldImage component to serve images through your configured private CDN and custom domain. This component automatically generates URLs based on your environment variables.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage src="<Your Public ID>" alt="Sample Image" width="800" height="600" />
```

--------------------------------

### CldUploadButton - Minimal Usage

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

A basic implementation of the CldUploadButton component. Requires an upload preset to be defined.

```svelte
<script>
  import { CldUploadButton } from 'svelte-cloudinary';
</script>

<!-- Minimal usage -->
<CldUploadButton uploadPreset="my_unsigned_preset" />
```

--------------------------------

### Configure Cloudinary Environment

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/configuration.mdx

Use the `config` prop to set up your Cloudinary environment, including your cloud name. This is essential for the player to connect to your Cloudinary account.

```jsx
config={{
  cloud: {
    cloudName: '<Your Cloud Name>',
  }
}}
```

--------------------------------

### Sanitize SVG Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

The `sanitize` option, when set to `true`, cleans up SVG images. This is only applicable to SVG files.

```javascript
true - Only applies to .svg
```

--------------------------------

### Dynamic Crop with Object Configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Configure dynamic crop modes like `thumb` using an object for the `crop` prop. This allows for more control over the cropping dimensions and type.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="300"
	height="300"
	src="<Your Public ID>"
	sizes="100vw"
	alt=""
	crop={{
		width: 600,
		height: 600,
		type: 'thumb',
		source: true,
	}} />
```

--------------------------------

### Configure Video Chapters

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/configuration.mdx

Define chapter markers for the video using the `chapters` prop. This allows for navigation within the video timeline.

```jsx
chapters={ { 0: "Chapter 1" } }
```

--------------------------------

### Pixelate Region Example

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Use `pixelateRegion` to pixelate a specific area of an image. It accepts a boolean or a string with coordinates and dimensions.

```javascript
true, 35,h_425,w_550,x_600,y_400
```

--------------------------------

### Basic CldImage Usage

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Renders a performant, responsive `<img>` tag backed by Cloudinary. Applies `f_auto` and `q_auto` by default.

```svelte
<script>
  import { CldImage } from 'svelte-cloudinary';
</script>

<!-- Basic usage -->
<CldImage
  src="samples/sea-turtle"
  width={960}
  height={600}
  alt="A sea turtle swimming"
  sizes="100vw"
/>
```

--------------------------------

### Build svelte-cloudinary Package

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/CONTRIBUTING.md

Builds the svelte-cloudinary package. This is required for it to work in the docs or playground.

```bash
pnpm package
```

--------------------------------

### Configure Cloudinary Environment

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/upload-widget/configuration.mdx

Use the `config` prop to set up your Cloudinary environment. This includes your cloud name and API key.

```jsx
config={{
  cloud: {
    cloudName: '<Your Cloud Name>',
    apiKey: '<Your API Key>'
  }
}}
```

--------------------------------

### Configure Cloudinary Environment Variables

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Set up Cloudinary credentials and upload preset in your .env file for Vite projects.

```env
# .env
VITE_CLOUDINARY_CLOUD_NAME="your-cloud-name"
VITE_CLOUDINARY_API_KEY="your-api-key"
VITE_CLOUDINARY_UPLOAD_PRESET="your-upload-preset"
# Advanced plan options:
# VITE_CLOUDINARY_PRIVATE_CDN="true"
# VITE_CLOUDINARY_SECURE_DISTRIBUTION="your-distribution.example.com"
```

--------------------------------

### Letter Spacing Configuration for Text

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Adjust the letter spacing for text overlays or underlays using the `letterSpacing` property. This example sets it to `14`.

```javascript
letterSpacing: () => <code>14</code>
```

--------------------------------

### CldUploadButton - Customization

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Customizes the CldUploadButton with a specific class, upload preset, and event handlers for success and error.

```svelte
<script>
  import { CldUploadButton } from 'svelte-cloudinary';
</script>

<!-- Custom label, styled, with event handlers -->
<CldUploadButton
  class="btn btn-primary"
  uploadPreset="my_unsigned_preset"
  onSuccess={(result) => console.log('Uploaded:', result.info.secure_url)}
  onError={(err) => alert('Upload failed: ' + err)}>
  📎 Attach Files
</CldUploadButton>
```

--------------------------------

### Font Family Configuration for Text

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Specify the font family for text overlays or underlays with the `fontFamily` property. This example uses `Open Sans`.

```javascript
fontFamily: () => <code>Open Sans</code>
```

--------------------------------

### Set Image Background with <CldImage />

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Use the `underlay` prop with a public ID to set another image as the background after removing the original image's background.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="960"
	height="600"
	src="<Your Public ID>"
	sizes="100vw"
	alt=""
	removeBackground
	underlay="<Your Public ID>" />
```

--------------------------------

### Upload Widget Instance Methods

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/upload-widget/configuration.mdx

A list of instance methods available for controlling the Upload Widget's behavior and state.

```APIDOC
## Instance Methods

| Prop          | Type       | Description                                                                                                        |
| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |
| `close`       | `function` | Closes and resets the widget to its initial state without removing it from memory.                                 |
| `show`        | `function` | Renders a previously hidden widget.                                                                                |
| `open`        | `function` | Renders an existing widget currently in memory, but that is not currently displayed.                               |
| `destroy`     | `function` | Hides a previously rendered widget while retaining its current state in memory.                                    |
| `hide`        | `function` | Closes the widget and completely removes it from the DOM. Returns a promise that resolves upon cleanup completion. |
| `minimize`    | `function` | Minimizes the widget.                                                                                              |
| `update`      | `function` | Updates a widget currently in memory with new options.                                                             |
| `isDestroyed` | `function` | Returns whether the destroy method was called on this instance.                                                    |
| `isMinimized` | `function` | Returns whether the widget is currently minimized.                                                                 |
| `isShowing`   | `function` | Returns whether the widget is currently visible.                                                                   |
```

--------------------------------

### Add Underlay Configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Configure an underlay for an image by providing its public ID. Underlays are similar to overlays but do not support text.

```jsx
underlays: [
	{
		publicId: '<Public ID>',
	},
];
```

--------------------------------

### CldImage with Two-Stage Crop

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Creates consistent responsive thumbnails by applying a two-stage cropping strategy. The `crop` prop accepts an object for detailed configuration.

```svelte
<script>
  import { CldImage } from 'svelte-cloudinary';
</script>

<!-- Two-stage crop for consistent responsive thumbnails -->
<CldImage
  src="samples/woman-headphones"
  width={300}
  height={300}
  alt="Portrait thumbnail"
  sizes="100vw"
  crop={{
    width: 600,
    height: 600,
    type: 'thumb',
    source: true,
  }}
/>
```

--------------------------------

### Replace Background with Multiple Image Underlays

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Apply multiple underlays to an image by providing an array of underlay objects to the `underlays` prop. Each underlay can have its own positioning and dimensions.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="960"
	height="600"
	src="<Your Public ID>"
	sizes="100vw"
	removeBackground
	alt=""
	underlays={[
		{
			publicId: 'images/galaxy',
			width: '0.5',
			height: '1.0',
			crop: 'fill',
			position: {
				gravity: 'north_west',
			},
			flags: ['relative'],
		},
		{
			publicId: 'images/mountain',
			width: '0.5',
			height: '1.0',
			crop: 'fill',
			position: {
				gravity: 'south_east',
			},
			flags: ['relative'],
		},
	]} />
```

--------------------------------

### getCldOgImageUrl Basic Usage

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldogimageurl/index.mdx

Demonstrates the basic usage of the `getCldOgImageUrl` helper function. The `src` option is the only required parameter.

```APIDOC
## getCldOgImageUrl

### Description
Generates a Cloudinary image URL using the provided options. This helper function is used internally by the `<CldOgImage />` component and accepts the same props.

### Method Signature
`getCldOgImageUrl(options: { src: string, [key: string]: any }): string`

### Parameters
#### Options Object
- **src** (string) - Required - The Cloudinary image identifier (e.g., 'images/turtle').
- **[key: string]: any** - Optional - Additional Cloudinary transformation options or parameters.

### Request Example
```javascript
import { getCldOgImageUrl } from 'svelte-cloudinary';

const url = getCldOgImageUrl({
	ssrc: 'images/turtle'
});

console.log(url);
// Expected output: A Cloudinary image URL
```

### Response
- **string** - The generated Cloudinary image URL.
```

--------------------------------

### Basic Video Player Usage

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/examples.mdx

Standard Cloudinary Video Player with playback. Ensure you have your Cloudinary cloud name configured.

```svelte
<script>
	import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer width="1620" height="1080" src="<Your Public ID>" />
```

--------------------------------

### Crop and Resize Video Player

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/examples.mdx

Apply transformations to crop and resize the video player. The `transformation` prop accepts an object with properties like `width`, `height`, `crop`, and `gravity`.

```svelte
<script>
	import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
	id="cropping-resizing"
	src="<Your Public ID>"
	width="500"
	height="500"
	transformation={{
		width: 500,
		height: 500,
		crop: 'fill',
		gravity: 'auto',
	}} />
```

--------------------------------

### CldOgImage with Text Overlay

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Creates a social media card with a text overlay. The `text` property within `overlays` allows for custom text styling.

```svelte
<script>
  import { CldOgImage } from 'svelte-cloudinary';
</script>

<!-- With text overlay for a social media card -->
<CldOgImage
  src="images/galaxy"
  alt="Svelte Cloudinary blog post"
  twitterTitle="Read our latest post"
  overlays={[
    {
      text: {
        color: 'white',
        fontFamily: 'Source Sans Pro',
        fontSize: 120,
        fontWeight: 'bold',
        text: 'Svelte Cloudinary',
      },
    },
  ]}
/>
```

--------------------------------

### Chain Multiple Effects on Image

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Apply multiple effects to an image by providing an array of effect objects to the `effects` prop. This example shows background color and gradient fade.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="960"
	height="600"
	src="<Your Public ID>"
	alt=""
	effects={[
		{
			background: 'green',
		},
		{
			gradientFade: true,
		},
		{
			gradientFade: 'symetric,x_0.5',
		},
	]} />
```

--------------------------------

### Basic Crop with <CldImage />

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Use the `crop` prop with the value `fill` to crop an image. By default, `CldImage` uses `gravity: 'auto'` for cropping.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="300"
	height="300"
	src="<Your Public ID>"
	sizes="100vw"
	alt=""
	crop="fill" />
```

--------------------------------

### Add Captions and Subtitles to Video Player

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/examples.mdx

Use the `textTracks` prop to add captions or subtitles to the player. Each Text Track is an object containing details about where the captions or subtitles should be loaded from as well as any customization of that track.

```svelte
<script>
	import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
	id="subtitles"
	src="<Your Public ID>"
	width="4096"
	height="2160"
	textTracks={{
		captions: {{
			label: 'English',
			language: 'en',
			default: true,
			url: 'https://res.cloudinary.com/<Cloud Name>/raw/upload/<FileName>.vtt',
		}},
	}} />
```

--------------------------------

### Apply Background Removal and Effects to OG Image

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/og-image/examples.mdx

Combine `removeBackground`, `blur`, and `tint` with text overlays for advanced OG image customization. The `underlay` option can be used to set a base image.

```svelte
<script>
	import { CldOgImage } from 'svelte-cloudinary';
</script>

<CldOgImage
	src="<Your Public ID>"
	blur="2000"
	tint="100:0000FF:0p:FF1493:100p"
	underlay="<Your Public ID>"
	removeBackground
	overlays={[
		{
			text: {
				color: 'white',
				fontFamily: 'Source Sans Pro',
				fontSize: 120,
				fontWeight: 'bold',
				text: 'Svelte Cloudinary',
			},
		}
	]} />
```

--------------------------------

### Add Image Overlays to Video Player

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/examples.mdx

Place an image over the video using the `transformation` prop with the `overlay` property. You can customize the overlay's position, size, and opacity.

```svelte
<script>
	import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
	id="image-overlays"
	src="<Your Public ID>"
	width="1620"
	height="1080"
	transformation={{
		overlay: '<Your Public ID>',
		width: 150,
		gravity: 'north_east',
		x: 50,
		y: 50,
		opacity: 80,
	}} />
```

--------------------------------

### Basic CldOgImage Usage

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Injects Open Graph and Twitter card meta tags into the document head. Defaults to 1200x627 dimensions and JPEG format.

```svelte
<script>
  import { CldOgImage } from 'svelte-cloudinary';
</script>

<!-- Basic OG image -->
<CldOgImage
  src="images/turtle"
  alt="A sea turtle"
/>
```

--------------------------------

### Replace Background with String Prompt

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Provide a string prompt to `replaceBackground` for AI-driven background replacement. The AI will generate a background matching the prompt.

```jsx
replaceBackground: 'fish tank';
```

--------------------------------

### Basic CldOgImage Usage

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/og-image/index.mdx

Use the CldOgImage component with 'src' and 'alt' props for basic open graph image generation. This component automatically creates necessary meta tags for social media.

```svelte
<script>
	import { CldOgImage } from 'svelte-cloudinary';
</script>

<CldOgImage src="images/turtle" alt="Turtle" />
```

```html
<meta
	property="og:image"
	content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0" />
<meta
	property="og:image:secure_url"
	content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Turtle" />
<meta property="twitter:title" content=" " />
<meta property="twitter:card" content="summary_large_image" />
<meta
	property="twitter:image"
	content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0" />
```

--------------------------------

### Configure Environment Variables for Custom Domain

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/guides/custom-domain.mdx

Set up environment variables in your .env file to enable the private CDN and specify your custom domain. Ensure these variables are not committed to version control.

```env
VITE_CLOUDINARY_CLOUD_NAME="your_cloud_name"
VITE_CLOUDINARY_PRIVATE_CDN="true"
VITE_CLOUDINARY_SECURE_DISTRIBUTION="your-custom-domain.com"
```

--------------------------------

### CldVideoPlayer - Basic Playback

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Embeds the Cloudinary Video Player for basic video playback. Requires a source video asset.

```svelte
<script>
  import { CldVideoPlayer, getCldImageUrl } from 'svelte-cloudinary';
  import type { CloudinaryVideoPlayer } from '@cloudinary-util/types';

  let player: CloudinaryVideoPlayer | undefined;
</script>

<!-- Basic playback -->
<CldVideoPlayer
  src="videos/mountain-stars"
  width={1920}
  height={1080}
/>
```

--------------------------------

### CldImage with Raw and Named Transformations

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Combines raw Cloudinary URL transformations with named transformations. Also allows overriding format, quality, and device pixel ratio.

```svelte
<script>
  import { CldImage } from 'svelte-cloudinary';
</script>

<!-- Advanced: raw Cloudinary URL transformations and named transformations -->
<CldImage
  src="samples/sea-turtle"
  width={960}
  height={600}
  alt="Raw transformations"
  rawTransformations={['w_100', 'b_blue', 'f_auto']}
  namedTransformations={['my-named-transformation']}
  format="webp"
  quality={80}
  dpr="2.0"
  seoSuffix="sea-turtle-swimming"
/>
```

--------------------------------

### Generative Fill Background with <CldImage />

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Employ the `fillBackground` prop to fill the background of an image using Generative AI. This is useful for expanding images or creating new compositions.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	src="<Your Public ID>"
	width="960"
	height="600"
	alt=""
	sizes="100vw"
	crop="pad"
	fillBackground />
```

--------------------------------

### Configure Cloudinary Environment with getCldImageUrl

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Provide Cloudinary configuration parameters, such as `cloudName`, using the `config` object. This is essential for initializing the Cloudinary SDK.

```jsx
config: {
  cloud: {
    cloudName: '<Your Cloud Name>',
  }
}
```

--------------------------------

### Apply Color Overlay to Image

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Use the `color` prop to apply a solid color overlay to an image. Specify the color name as a string.

```javascript
color="blue"
```

--------------------------------

### CldOgImage with Background Removal and Customization

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Generates a social card with background removal, an underlay image, and custom effects like blur and tint. Supports explicit width, height, and overlay configurations.

```svelte
<script>
  import { CldOgImage } from 'svelte-cloudinary';
</script>

<!-- Background removal with underlay image and custom dimensions -->
<CldOgImage
  src="images/turtle"
  alt="Turtle on galaxy"
  width={1200}
  height={627}
  removeBackground
  underlay="images/galaxy"
  blur="2000"
  tint="100:0000FF:0p:FF1493:100p"
  overlays={[
    {
      text: {
        color: 'white',
        fontFamily: 'Source Sans Pro',
        fontSize: 120,
        fontWeight: 'bold',
        text: 'Svelte Cloudinary',
      },
    },
  ]}
/>
```

--------------------------------

### Replace Background with Object Configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Configure `replaceBackground` using an object for more control. Specify a `prompt` for background generation and an optional `seed` for reproducibility.

```jsx
replaceBackground: {
  prompt: 'fish tank',
  seed: 3
}
```

--------------------------------

### Video Player with Chapters

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/examples.mdx

Enables chapter navigation within the video player. Define chapters using a time-based object.

```svelte
<script>
	import { CldVideoPlayer } from 'svelte-cloudinary';
</script>

<CldVideoPlayer
	id="chapters-selector"
	src="<Your Public ID>"
	width="4096"
	height="2160"
	chapters={{
		0: 'Chapter 1',
		6: 'Chapter 2',
		9: 'Chapter 3',
	}}
	chaptersButton />
```

--------------------------------

### Upload Widget Configuration Props

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/upload-widget/configuration.mdx

The Upload Widget accepts `config` and `options` props for advanced customization. The `config` prop is used for Cloudinary environment settings, while `options` are passed directly to the Upload Widget for its specific parameters.

```APIDOC
## `config`

Allows configuration for the Cloudinary environment.

### Example

```jsx copy
config={{
  cloud: {
    cloudName: '<Your Cloud Name>',
    apiKey: '<Your API Key>'
  }
}}
```

## `options`

Parameters used to customize and configure the Upload Widget instance. These options are passed in directly to the Upload Widget, exposing all available parameters through the `options` object.

### Example

```jsx copy showLineNumbers
options={{
  sources: ['local', 'url', 'unsplash'],
  multiple: true,
  maxFiles: 5
}}
```

[Learn more about Upload Widget parameters](https://cloudinary.com/documentation/upload_widget_reference#parameters) on the Cloudinary docs.
```

--------------------------------

### Coordinate-Based Crop with <CldImage />

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Crop an image to a precise area using coordinates (x, y) and dimensions within the `crop` prop object. You can also specify `gravity` for positioning.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	src="images/woman-headphones"
	width="300"
	height="300"
	alt=""
	sizes="100vw"
	crop={{
		type: 'crop',
		width: 400,
		height: 400,
		x: 80,
		y: 350,
		gravity: 'north_east',
		source: true,
	}} />
```

--------------------------------

### Convert Image to Black and White

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Use the `blackwhite` prop to convert an image to black and white. It accepts a boolean or a string value for the level.

```javascript
blackwhite={true}
blackwhite="40"
```

--------------------------------

### CldVideoPlayer - Adaptive Bitrate Streaming (HLS)

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Configures the CldVideoPlayer for Adaptive Bitrate Streaming using HLS. Requires a streaming profile transformation.

```svelte
<script>
  import { CldVideoPlayer, getCldImageUrl } from 'svelte-cloudinary';
  import type { CloudinaryVideoPlayer } from '@cloudinary-util/types';

  let player: CloudinaryVideoPlayer | undefined;
</script>

<!-- Adaptive Bitrate Streaming (HLS) -->
<CldVideoPlayer
  src="videos/mountain-stars"
  width={1920}
  height={1080}
  transformation={{ streaming_profile: 'hd' }}
  sourceTypes={['hls']}
/>
```

--------------------------------

### Basic CldUploadButton Usage

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/upload-button/index.mdx

Use this snippet to quickly add an upload button to your Svelte app. Ensure you have a Cloudinary upload preset configured.

```svelte
<script>
	import { CldUploadButton } from 'svelte-cloudinary';
</script>

<CldUploadButton uploadPreset="<Upload Preset>" />
```

--------------------------------

### Adding an Underlay to an Image

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Use the `underlays` prop to add an underlay to an image. This is similar to overlays but does not support text.

```jsx
underlays={[{
  publicId: 'images/earth',
}]}

```

--------------------------------

### CldVideoPlayer - Poster with Cloudinary Transformations

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Applies Cloudinary transformations directly to the poster image for the CldVideoPlayer.

```svelte
<script>
  import { CldVideoPlayer, getCldImageUrl } from 'svelte-cloudinary';
  import type { CloudinaryVideoPlayer } from '@cloudinary-util/types';

  let player: CloudinaryVideoPlayer | undefined;
</script>

<!-- Poster with Cloudinary transformations -->
<CldVideoPlayer
  src="videos/mountain-stars"
  width={1920}
  height={1080}
  poster={{ tint: 'equalize:80:blue:blueviolet' }}
/>
```

--------------------------------

### Configure Cloudinary Environment - JSX

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Provide Cloudinary configuration parameters, including your cloud name, to set up the environment for image delivery. This is essential for authenticating and targeting your Cloudinary account.

```jsx
config={
  cloud: {
    cloudName: '<Your Cloud Name>',
  }
}
```

--------------------------------

### CldImage with Cloudinary URL

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/index.mdx

Use a full Cloudinary URL as the src prop. Ensure the URL includes a version number (e.g., /v1234).

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width={960}
	height={600}
	src="https://res.cloudinary.com/svelte-cloudinary/image/upload/v1/images/turtle"
	alt="Turtle" />
```

--------------------------------

### Add Overlay Configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Configure an overlay for an image, specifying its public ID, position, and applied effects. Use this to add watermarks or other layered images.

```jsx
overlays: [
	{
		publicId: '<Public ID>',
		position: {
			x: 50,
			y: 50,
			gravity: 'north_west',
		},
		appliedEffects: [
			{
				multiply: true,
			},
		],
	},
];
```

--------------------------------

### Set Image Format

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/helpers/getcldimageurl/configuration.mdx

Use the `format` option to convert and deliver an asset in a specific image format. Defaults to `auto` for intelligent format selection.

```jsx
format: 'png';
```

--------------------------------

### Image Border Configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Set the border style and color for an image. Use CSS-like values for thickness and color. Refer to Cloudinary documentation for more border options.

```javascript
20px_solid_blue
```

--------------------------------

### Configure Video Source Types

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/configuration.mdx

Specify the types of video sources to be supported, such as 'hls'. This is useful for controlling adaptive bitrate streaming.

```jsx
sourceTypes= ['hls']
```

--------------------------------

### Responsive Image with Sizes Prop

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/guides/responsive-images.mdx

Use the `sizes` prop to specify different image widths for various screen sizes. Cloudinary generates the appropriate image variations automatically. Ensure the `CldImage` component is imported.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="960"
	height="600"
	src="images/turtle"
	sizes="(max-width: 768px) 100vw,
        (max-width: 1200px) 50vw,
        33vw"

alt="turtle image" />
```

--------------------------------

### CldVideoPlayer - Chapters, Colors, Logo, PiP

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Customizes the CldVideoPlayer with chapter markers, custom colors, a logo with a click URL, and picture-in-picture toggle.

```svelte
<script>
  import { CldVideoPlayer, getCldImageUrl } from 'svelte-cloudinary';
  import type { CloudinaryVideoPlayer } from '@cloudinary-util/types';

  let player: CloudinaryVideoPlayer | undefined;
</script>

<!-- Chapters, colors, logo, and picture-in-picture -->
<CldVideoPlayer
  src="videos/mountain-stars"
  width={1920}
  height={1080}
  chapters={{ 0: 'Intro', 30: 'Main Content', 90: 'Credits' }}
  chaptersButton
  pictureInPictureToggle
  colors={{ accent: '#ff0000', base: '#1a1a1a', text: '#ffffff' }}
  fontFace="Source Serif Pro"
  logo={{ imageUrl: '/logo.svg', onClickUrl: 'https://example.com' }}
/>
```

--------------------------------

### Generative Replace Background (Prompt)

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

Replace the background of an image using Generative AI with a custom prompt. This allows for precise control over the new background.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	src="images/turtle"
	width="960"
	height="600"
	crop="fill"
	sizes="100vw"
	alt=""
	replaceBackground="fish tank" />
```

--------------------------------

### Recolor an object using object configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Configure the `recolor` prop with an object for more advanced options, including specifying the prompt, target color, and whether to replace multiple instances.

```jsx
recolor={{
  prompt: 'duck',
  to: 'blue',
  multiple; true
}}
```

--------------------------------

### Image Text Decoration Configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Apply text decorations such as underlines. Accepts string values like 'underline'. For advanced styling, refer to Cloudinary's transformation reference.

```javascript
underline
```

--------------------------------

### Set Custom Domain (CNAME) for URLs

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/video-player/configuration.mdx

Specify a custom domain name for building URLs when `secure` is set to `false`. This allows for branded URLs.

```jsx
cname = 'spacejelly.dev';
```

--------------------------------

### CldVideoPlayer - Programmatic Control

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Binds the player instance to a variable for programmatic control and sets up event listeners for playback events.

```svelte
<script>
  import { CldVideoPlayer, getCldImageUrl } from 'svelte-cloudinary';
  import type { CloudinaryVideoPlayer } from '@cloudinary-util/types';

  let player: CloudinaryVideoPlayer | undefined;
</script>

<!-- Bind to player instance for programmatic control -->
<CldVideoPlayer
  src="videos/mountain-stars"
  width={1920}
  height={1080}
  bind:player
  onPlay={({ player }) => console.log('Playing')}
  onPause={({ player }) => console.log('Paused')}
  onEnded={({ player }) => console.log('Ended')}
  onError={({ player, video }) => console.error('Playback error', video.src)}
/>
<button on:click={() => player?.pause()}>Pause</button>
```

--------------------------------

### Apply Background Color

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Use the `background` prop to set a background color for transparent or empty areas of an image. Accepts a string representing a color.

```jsx
background = 'blue';
```

--------------------------------

### Replace an object using object configuration

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/configuration.mdx

Configure the `replace` prop with an object for more advanced replacement options, including specifying the source object, the replacement, and whether to preserve geometry.

```jsx
replace={{
  from: 'apple',
  to: 'banana',
  preserveGeometry; true
}}
```

--------------------------------

### Set Color Background with <CldImage />

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/examples.mdx

After removing the background, specify a color using the `background` prop to set a new background. The color can be any valid CSS color.

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage
	width="960"
	height="600"
	src="<Your Public ID>"
	sizes="100vw"
	alt=""
	removeBackground
	background="blueviolet" />
```

--------------------------------

### Integrate Cloudinary Upload Widget with CldUploadWidget

Source: https://context7.com/cloudinary-community/svelte-cloudinary/llms.txt

Renders the Cloudinary Upload Widget, exposing lifecycle events. Requires a trigger element via the `let:open` slot prop. Supports unsigned (upload preset) and signed (signature endpoint) uploads.

```svelte
<script>
  import { CldUploadWidget } from 'svelte-cloudinary';

  let uploadedUrl = '';
</script>

<!-- Unsigned upload with preset -->
<CldUploadWidget
  uploadPreset="my_unsigned_preset"
  onSuccess={(result, { widget }) => {
    uploadedUrl = result.info.secure_url;
    widget.close();
  }}
  onError={(error) => {
    console.error('Upload error:', error);
  }}
  let:open
  let:isLoading>
  <button on:click={open} disabled={isLoading}>
    {isLoading ? 'Loading widget…' : 'Upload Image'}
  </button>
</CldUploadWidget>

{#if uploadedUrl}
  <p>Uploaded: <a href={uploadedUrl}>{uploadedUrl}</a></p>
{/if}

<!-- Signed upload with backend signature endpoint -->
<CldUploadWidget
  signatureEndpoint="/api/sign-cloudinary-params"
  options={{
    sources: ['local', 'url', 'unsplash'],
    multiple: true,
    maxFiles: 5,
    cropping: true,
  }}
  onQueuesEnd={(results, { widget }) => {
    console.log('All uploads finished:', results);
  }}
  onClose={() => console.log('Widget closed')}
  let:open
  let:isLoading
  let:widget>
  <button on:click={() => open()}>Open Upload Widget</button>
  <button on:click={() => widget?.close()}>Close</button>
</CldUploadWidget>
```

--------------------------------

### Basic CldImage Usage

Source: https://github.com/cloudinary-community/svelte-cloudinary/blob/main/packages/docs/src/content/docs/components/image/index.mdx

Use the CldImage component for basic image display. Required props include width, height, src, and alt.

```html
<CldImage src="images/turtle" alt="Turtle" width={960} height={600} />
```

```svelte
<script>
	import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage src="images/turtle" alt="Turtle" width={960} height={600} />
```