Cloudinary

Unpic can transform images with Cloudinary using the cloudinary provider. It can be used with Unpic framework components, or you can use the base unpic libary to generate image URLs directly.

You can import the cloudinary provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/cloudinary';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a cloudinary key. This is lets you use extra features supported by Cloudinary, or set custom configuration options.

This example uses @unpic/astro, but the same applies to any Unpic component:

---
import { Image } from '@unpic/astro';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  options={{
      "cloudinary": {
      // cloudinary options here
      }
  }}
  operations={{
      "cloudinary": {
      // cloudinary operations here
      }
  }}
/>

In supported frameworks you can also import the base component and pass the transformer to it directly. This lets you create a custom component that doesn’t need to include and other transformer code.

---
import { Image } from '@unpic/astro/base';
import { transform } from 'unpic/providers/cloudinary';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The cloudinary provider supports the following arguments:

Options

cloudName

Type: string

privateCdn

Type: boolean

domain

Type: string

Operations

a

Type: number | "auto"

Rotates the image by a specified degree.

ac

Type: "aac" | "mp3" | "opus"

Specifies the audio codec for video/audio assets.

af

Type: number

Sets the audio frequency in Hz.

ar

Type: string

Adjusts the aspect ratio of the image or video.

b

Type: string

Sets the background color.

bo

Type: string

Adds a border to the image with the format width_px_solid_color.

br

Type: string | number

Specifies the video bitrate.

c

Type: "fill" | "auto" | "crop" | "pad" | "fit" | "lfill" | "fill_pad" | "thumb" | "scale" | "limit" | "mfit" | "lpad" | "mpad" | "imagga_scale" | "imagga_crop"

Defines the crop mode.

co

Type: string

Specifies the color for overlays, text, etc.

cs

Type: "srgb" | "cmyk" | "no_cmyk"

Adjusts the color space of the image (e.g., srgb, cmyk).

d

Type: string

Specifies the default image if the original is missing.

dl

Type: number

Sets the delay between frames in animated images.

dn

Type: number

Controls the image density (DPI).

dpr

Type: number

Adjusts for device pixel ratio.

du

Type: number

Defines the video duration in seconds.

e

Type: (string & {}) | "grayscale" | "sepia" | "blur" | "shadow" | "red" | "blue" | "green" | "negate" | "oil_paint" | "cartoonify" | "vectorize" | "vignette" | "auto_color" | "auto_contrast" | ... 6 more ... | "unsharp_mask"

Applies an effect.

eo

Type: number

Sets the end offset for videos.

f

Type: CloudinaryFormats

Specifies the output format.

fl

Type: (string & {}) | "progressive" | "lossy" | "attachment" | "streaming_attachment" | "keep_iptc" | "clip" | "region_relative" | "relative" | "no_overflow" | "layer_apply" | "splice" | "force_strip"

Adds transformation flags.

fn

Type: string

Adds custom functionality, such as external image overlays.

fps

Type: string | number

Sets the frames per second for video.

g

Type: (string & {}) | "center" | "north" | "south" | "east" | "west" | "auto" | "face" | "north_east" | "north_west" | "south_east" | "south_west" | "faces" | "body" | "liquid"

Adjusts the gravity for cropping

h

Type: number

Defines the height of the image/video.

if

Type: string

Allows for conditional transformations.

ki

Type: number

Sets the keyframe interval for videos.

l

Type: string

Adds an overlay image or text layer.

o

Type: number

Controls the opacity of overlays.

p

Type: string

Prefixes the public ID of the asset.

pg

Type: number

Selects a specific page/layer in multi-page assets (e.g., PDFs).

q

Type: number | "auto"

Sets the quality level of the asset (1-100 or auto).

r

Type: number | "max"

Rounds the corners of the image/video.

so

Type: number

Sets the start offset for video.

sp

Type: string

Specifies the streaming profile for video.

t

Type: string

Applies named transformations.

u

Type: string

Adds an underlay image or text layer.

vc

Type: string

Specifies the video codec.

vs

Type: number

Controls video frame sampling (used for animated images).

w

Type: number

Sets the width of the image/video.

x

Type: number

Sets the X-coordinate for overlays or cropping.

y

Type: number

Sets the Y-coordinate for overlays or cropping.

z

Type: number

Zooms into the image.

$

Type: Record<string, any>

Defines custom variables for transformation.

width

Type: string | number

height

Type: string | number

format

Type: (string & {}) | "jpeg" | "jpg" | "png" | "webp" | "avif" | "auto" | "gif" | "bmp" | "ico" | "tiff" | "pdf" | "heif" | "heic" | "mp4" | "webm" | "ogv"

quality

Type: string | number

This page is auto-generated from the cloudinary provider types. See anything wrong or missing? Suggest a change on GitHub.