• CldImage/Configuration

CldImage Configuration

Configuration for CldImage is the same as getCldImageUrl, which both use the same underlying API.

General Props

Prop Name Type Default Example
config object - { url: { secureDistribution: 'spacejelly.dev' } }
crop string "limit" "thumb"
deliveryType string "upload" "fetch"
effects array - [{ background: 'blue' }]
fillBackground (Beta) bool/object - {{ gravity: 'east' }}
format string "auto" "webp"
gravity string "auto" "faces"
height number/string - 600
onError function/bool - (event) => {}
overlays array - See Below
preserveTransformations string false true
quality string "auto" "90"
rawTransformations array - ['e_blur:2000']
removeBackground bool/string false true
sanitize bool true if svg true (Applies only to SVG)
seoSuffix string - my-image-content
src string - "my-public-id"
text string - "Svelte Cloudinary"
transformations string/array - ['my-named-transformation']
underlay string - "my-public-id"
underlays array - See Below
version number - 1234
width number/string - 600
zoom string - 0.5
zoompan bool/string/object - See Below

Effect Props

Prop Name Type Default Example
art string - "al_dente"
autoBrightness bool/string - true, "80"
autoColor bool/string - true, "80"
autoContrast bool/string - true, "80"
assistColorblind bool/string - true, "20", "xray"
background string - "blue"
blackwhite bool/string - true, "40"
blur bool/string - true, "800"
blurFaces bool/string - true, "800"
blurRegion bool/string - true, "1000,h_425,w_550,x_600,y_400"
border string - "5px_solid_purple"
brightness bool/string - true, "100"
brightnessHSB bool/string - true, "100"
cartoonify bool/string - true, "70:80"
color string - "blue"
colorize string - "35,co_darkviolet"
contrast bool/string - true, "100", "level_-70"
distort string - "150:340:1500:10:1500:1550:50:1000", "arc:180.0"
fillLight bool/string - true, "70:20"
gamma bool/string - true, "100"
gradientFade bool/string - true, "symmetric:10,x_0.2,y_0.4"
grayscale bool - true
improve bool/string - true, "50", "indoor"
multiply bool - true
negate bool - true
oilPaint bool/string - true, "40"
opacity number/string - 40, "40"
outline bool/string - true, "40", "outer:15:200"
overlay bool - true
pixelate bool/string - true, "20"
pixelateFaces bool/string - true, "20"
pixelateRegion bool/string - true, "35,h_425,w_550,x_600,y_400"
redeye bool/string - true
replaceColor string - "saddlebrown", "2F4F4F:20", "silver:55:89b8ed"
saturation bool/string - true, "70"
screen bool - true
sepia bool/string - true, "50"
shadow bool/string - true, "50,x_-15,y_15"
sharpen bool/string - true, "100"
shear string - "20.0:0.0"
simulateColorblind bool/string - "deuteranopia"
trim bool/string - true, "50:yellow"
tint bool/string - true, "100:red:blue:yellow"
unsharpMask bool/string - true, "500"
vectorize bool/string - true, "3:0.5"
vibrance bool/string - true, "70"
vignette bool/string - true, "30"

View the Cloudinary docs to see learn more about using effects.

Overlay Props

The overlays prop is an array of objects with the following configuration options:

Property Name Type Example
appliedEffects array Same as effects, added as applied transformation
effects array See Below
position object See Below
publicId string "thumb"
text object string
url string "https://.../image.jpg"

The position property can include:

Property Name Type Example
angle number 45
gravity string ‘“north_west”’
x number 10
y number 10

Objects in the effects array can include everything in the effects options above as well as:

Property Name Type Example
aspectRatio string "3.0"
crop string 10
gravity string ‘“north_west”’
height number ‘600’
width number ‘600’

The text property can include:

Property Name Type Example
border string "20px_solid_blue"
color string "blueviolet"
fontFamily string "Open Sans"
fontSize number 48
fontWeight string "bold"
letterSpacing number "14"
lineSpacing number "14"
stroke bool true in coordination with Border
textDecoration string "underline"
MIT 2023 ©