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 Name | Type | Default | Example |
|---|---|---|---|
| options | object | - | { src: 'myimage', ... } |
| config | object | - | { 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 Name | Type | Default | Example |
|---|---|---|---|
| crop | string | "limit" | "thumb" |
| deliveryType | string | "upload" | "fetch" |
| dpr | number/string | - | "2.0" |
| effects | array | - | [{ background: 'blue' }] |
| format | string | "auto" | "webp" |
| fillBackground (Beta) | bool/object | - | {{ gravity: 'east' }} |
| gravity | string | "auto" | "faces" |
| height | number/string | - | 600 |
| 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 | - | "Next 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 Options
| Option 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" |
| 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 (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 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" |