Components
<CldImage />
Configuration

CldImage Configuration

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

General Props

Prop NameTypeDefaultExample
configobject-{ url: { secureDistribution: 'spacejelly.dev' } }
cropstring"limit""thumb"
deliveryTypestring"upload""fetch"
effectsarray-[{ background: 'blue' }]
formatstring"auto""webp"
gravitystring"auto""faces"
heightnumber/string-600
overlaysarray-See Below
preserveTransformationsstringfalsetrue
qualitystring"auto""90"
rawTransformationsarray-['e_blur:2000']
removeBackgroundbool/stringfalsetrue
sanitizebooltrue if svgtrue (Applies only to SVG)
seoSuffixstring-my-image-content
srcstring-"my-public-id"
textstring-"Next Cloudinary"
transformationsstring/array-['my-named-transformation']
underlaystring-"my-public-id"
underlaysarray-See Below
versionnumber-1234
widthnumber/string-600
zoomstring-0.5
zoompanbool/string/object-See Below

Effect Props

All effect props are disabled by default.

Prop NameTypeExample
artstring"al_dente"
autoBrightnessbool/stringtrue, "80"
autoColorbool/stringtrue, "80"
autoContrastbool/stringtrue, "80"
assistColorblindbool/stringtrue, "20", "xray"
backgroundstring"blue"
blackwhitebool/stringtrue, "40"
blurbool/stringtrue, "800"
blurFacesbool/stringtrue, "800"
blurRegionbool/stringtrue, "1000,h_425,w_550,x_600,y_400"
borderstring"5px_solid_purple"
brightnessbool/stringtrue, "100"
brightnessHSBbool/stringtrue, "100"
cartoonifybool/stringtrue, "70:80"
colorstring"blue"
colorizestring"35,co_darkviolet"
contrastbool/stringtrue, "100", "level_-70"
distortstring"150:340:1500:10:1500:1550:50:1000", "arc:180.0"
fillLightbool/stringtrue, "70:20"
gammabool/stringtrue, "100"
gradientFadebool/stringtrue, "symmetric:10,x_0.2,y_0.4"
grayscalebooltrue
improvebool/stringtrue, "50", "indoor"
multiplybooltrue
negatebooltrue
oilPaintbool/stringtrue, "40"
opacitynumber/string40, "40"
outlinebool/stringtrue, "40", "outer:15:200"
overlaybooltrue
pixelatebool/stringtrue, "20"
pixelateFacesbool/stringtrue, "20"
pixelateRegionbool/stringtrue, "35,h_425,w_550,x_600,y_400"
redeyebool/stringtrue
replaceColorstring"saddlebrown", "2F4F4F:20", "silver:55:89b8ed"
saturationbool/stringtrue, "70"
screenbooltrue
sepiabool/stringtrue, "50"
shadowbool/stringtrue, "50,x_-15,y_15"
sharpenbool/stringtrue, "100"
shearstring"20.0:0.0"
simulateColorblindbool/string"deuteranopia"
trimbool/stringtrue, "50:yellow"
tintbool/stringtrue, "100:red:blue:yellow"
unsharpMaskbool/stringtrue, "500"
vectorizebool/stringtrue, "3:0.5"
vibrancebool/stringtrue, "70"
vignettebool/stringtrue, "30"

View the Cloudinary docs (opens in a new tab) to see learn more about using effects.

Overlay Props

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

Property NameTypeExample
appliedEffectsarraySame as effects, added as applied transformation
effectsarraySee Below
positionobjectSee Below
publicIdstring"thumb"
textobjectstring
urlstring"https://.../image.jpg"

The position property can include:

Property NameTypeExample
anglenumber45
gravitystring'"north_west"'
xnumber10
ynumber10

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

Property NameTypeExample
aspectRatiostring"3.0"
cropstring10
gravitystring'"north_west"'
heightnumber'600'
widthnumber'600'

The text property can include:

Property NameTypeExample
borderstring"20px_solid_blue"
colorstring"blueviolet"
fontFamilystring"Open Sans"
fontSizenumber48
fontWeightstring"bold"
letterSpacingnumber"14"
lineSpacingnumber"14"
strokebooltrue in coordination with Border
textDecorationstring"underline"