getCldImageUrl
Configuration

getCldImageUrl Configuration

Configuration for getCldImageUrl is the same as CldImage, which both use the same underlying API @cloudinary-util/url-loader (opens in a new tab).

The function takes two main arguments: options and config.

Option NameTypeDefaultExample
optionsobject-{ src: 'myimage', ... }
configobject-{ cloud: { cloudName: 'name' } }

The function also accepts a third argument of analytics that's intended to be used configure analytics properties for usage statistics.

General Options

Option NameTypeDefaultExample
cropstring"limit""thumb"
deliveryTypestring"upload""fetch"
dprnumber/string-"2.0"
effectsarray-[{ background: 'blue' }]
formatstring"auto""webp"
fillBackground (Beta)bool/object-{{ gravity: 'east' }}
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 Options

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

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

Overlay Options

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"