Cloudinary cookbook background

Cloudinary Cookbook

Most popular cookbook recipes

Find recipes by tags:
View all tags

Extract frames from an animated GIF

Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.

Original

Original

1st frame-Default

1st frame-Default

10th frame

10th frame
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/bored_animation.jpg
Ruby:
cl_image_tag("bored_animation.jpg")
PHP:
cl_image_tag("bored_animation.jpg")
Python:
CloudinaryImage("bored_animation.jpg").image()
Node.js:
cloudinary.image("bored_animation.jpg")
Java:
cloudinary.url().imageTag("bored_animation.jpg");
JS:
cloudinary.imageTag('bored_animation.jpg').toHtml();
jQuery:
$.cloudinary.image("bored_animation.jpg")
React:
<Image publicId="bored_animation.jpg" >

</Image>
Angular:
<cl-image public-id="bored_animation.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.jpg")
Android:
MediaManager.get().url().generate("bored_animation.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("bored_animation.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Original

Original

Rotated

Rotated

Adding text

Adding text
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_0.5/cloudinary_animation.gif
Ruby:
cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")
PHP:
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))
Python:
CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")
Node.js:
cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif");
JS:
cloudinary.imageTag('cloudinary_animation.gif', {width: "0.5", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {width: "0.5", crop: "scale"})
React:
<Image publicId="cloudinary_animation.gif" >
  <Transformation width="0.5" crop="scale" />
</Image>
Angular:
<cl-image public-id="cloudinary_animation.gif" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")
Android:
MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("cloudinary_animation.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("cloudinary_animation.gif")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Adding watermarks as an overlay

Add your watermark as an overlay on top of any image by setting the overlay parameter (l in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.

Overlaying

Overlaying

Scale and position

Scale and position

Semi-transparent

Semi-transparent
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon/envelope.jpg
Ruby:
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")
PHP:
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))
Python:
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")
Node.js:
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon")).imageTag("envelope.jpg");
JS:
cloudinary.imageTag('envelope.jpg', {overlay: "cloudinary_icon"}).toHtml();
jQuery:
$.cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
React:
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Angular:
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon")).BuildImageTag("envelope.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("cloudinary_icon")).generate("envelope.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon")).generate("envelope.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Converting an image format

Convert your images to any other format either by simply changing the extension of the file, or by setting the format parameter. You can either covert the image's format while uploading or upload the image as is and dynamically convert its format on delivery.

GIF

GIF

Circle cropped PNG

Circle cropped PNG

Low quality JPG

Low quality JPG
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/nice_beach.gif
Ruby:
cl_image_tag("nice_beach.gif")
PHP:
cl_image_tag("nice_beach.gif")
Python:
CloudinaryImage("nice_beach.gif").image()
Node.js:
cloudinary.image("nice_beach.gif")
Java:
cloudinary.url().imageTag("nice_beach.gif");
JS:
cloudinary.imageTag('nice_beach.gif').toHtml();
jQuery:
$.cloudinary.image("nice_beach.gif")
React:
<Image publicId="nice_beach.gif" >

</Image>
Angular:
<cl-image public-id="nice_beach.gif" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("nice_beach.gif")
Android:
MediaManager.get().url().generate("nice_beach.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("nice_beach.gif")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Generate your photo collage online

Take your base image and use the overlay parameter (l in URLs) to add any further images. Set the required width and height (w and h in URLs) with the required crop mode, and add any further transformations, effects and texts.

Various images

Various images

Collage with text

Collage with text

Another collage

Another collage
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_220,h_140,c_fill/l_brown_sheep,w_220,h_140,c_fill,x_220/l_horses,w_220,h_140,c_fill,y_140,x_-110/l_white_chicken,w_220,h_140,c_fill,y_70,x_110/l_butterfly.png,h_200,x_-10,a_10/w_400,h_260,c_crop,r_20/l_text:Parisienne_35_bold:Memories from our trip,co_rgb:990C47,y_155/e_shadow/yellow_tulip.jpg
Ruby:
cl_image_tag("yellow_tulip.jpg", :transformation=>[
  {:width=>220, :height=>140, :crop=>"fill"},
  {:overlay=>"brown_sheep", :width=>220, :height=>140, :x=>220, :crop=>"fill"},
  {:overlay=>"horses", :width=>220, :height=>140, :y=>140, :x=>-110, :crop=>"fill"},
  {:overlay=>"white_chicken", :width=>220, :height=>140, :y=>70, :x=>110, :crop=>"fill"},
  {:overlay=>"butterfly.png", :height=>200, :x=>-10, :angle=>10},
  {:width=>400, :height=>260, :radius=>20, :crop=>"crop"},
  {:overlay=>"text:Parisienne_35_bold:Memories%20from%20our%20trip", :color=>"#990C47", :y=>155},
  {:effect=>"shadow"}
  ])
PHP:
cl_image_tag("yellow_tulip.jpg", array("transformation"=>array(
  array("width"=>220, "height"=>140, "crop"=>"fill"),
  array("overlay"=>"brown_sheep", "width"=>220, "height"=>140, "x"=>220, "crop"=>"fill"),
  array("overlay"=>"horses", "width"=>220, "height"=>140, "y"=>140, "x"=>-110, "crop"=>"fill"),
  array("overlay"=>"white_chicken", "width"=>220, "height"=>140, "y"=>70, "x"=>110, "crop"=>"fill"),
  array("overlay"=>"butterfly.png", "height"=>200, "x"=>-10, "angle"=>10),
  array("width"=>400, "height"=>260, "radius"=>20, "crop"=>"crop"),
  array("overlay"=>"text:Parisienne_35_bold:Memories%20from%20our%20trip", "color"=>"#990C47", "y"=>155),
  array("effect"=>"shadow")
  )))
Python:
CloudinaryImage("yellow_tulip.jpg").image(transformation=[
  {"width": 220, "height": 140, "crop": "fill"},
  {"overlay": "brown_sheep", "width": 220, "height": 140, "x": 220, "crop": "fill"},
  {"overlay": "horses", "width": 220, "height": 140, "y": 140, "x": -110, "crop": "fill"},
  {"overlay": "white_chicken", "width": 220, "height": 140, "y": 70, "x": 110, "crop": "fill"},
  {"overlay": "butterfly.png", "height": 200, "x": -10, "angle": 10},
  {"width": 400, "height": 260, "radius": 20, "crop": "crop"},
  {"overlay": "text:Parisienne_35_bold:Memories%20from%20our%20trip", "color": "#990C47", "y": 155},
  {"effect": "shadow"}
  ])
Node.js:
cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: "butterfly.png", height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: "text:Parisienne_35_bold:Memories%20from%20our%20trip", color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay("brown_sheep").width(220).height(140).x(220).crop("fill").chain()
  .overlay("horses").width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay("white_chicken").width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay("butterfly.png").height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").color("#990C47").y(155).chain()
  .effect("shadow")).imageTag("yellow_tulip.jpg");
JS:
cloudinary.imageTag('yellow_tulip.jpg', {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: "butterfly.png", height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: "text:Parisienne_35_bold:Memories%20from%20our%20trip", color: "#990C47", y: 155},
  {effect: "shadow"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("yellow_tulip.jpg", {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: "brown_sheep", width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: "horses", width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: "white_chicken", width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: "butterfly.png", height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: "text:Parisienne_35_bold:Memories%20from%20our%20trip", color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})
React:
<Image publicId="yellow_tulip.jpg" >
  <Transformation width="220" height="140" crop="fill" />
  <Transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <Transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <Transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <Transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
  <Transformation width="400" height="260" radius="20" crop="crop" />
  <Transformation overlay="text:Parisienne_35_bold:Memories%20from%20our%20trip" color="#990C47" y="155" />
  <Transformation effect="shadow" />
</Image>
Angular:
<cl-image public-id="yellow_tulip.jpg" >
  <cl-transformation width="220" height="140" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="butterfly.png" height="200" x="-10" angle="10">
  </cl-transformation>
  <cl-transformation width="400" height="260" radius="20" crop="crop">
  </cl-transformation>
  <cl-transformation overlay="text:Parisienne_35_bold:Memories%20from%20our%20trip" color="#990C47" y="155">
  </cl-transformation>
  <cl-transformation effect="shadow">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(220).Height(140).Crop("fill").Chain()
  .Overlay("brown_sheep").Width(220).Height(140).X(220).Crop("fill").Chain()
  .Overlay("horses").Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain()
  .Overlay("white_chicken").Width(220).Height(140).Y(70).X(110).Crop("fill").Chain()
  .Overlay("butterfly.png").Height(200).X(-10).Angle(10).Chain()
  .Width(400).Height(260).Radius(20).Crop("crop").Chain()
  .Overlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").Color("#990C47").Y(155).Chain()
  .Effect("shadow")).BuildImageTag("yellow_tulip.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay("brown_sheep").width(220).height(140).x(220).crop("fill").chain()
  .overlay("horses").width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay("white_chicken").width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay("butterfly.png").height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").color("#990C47").y(155).chain()
  .effect("shadow")).generate("yellow_tulip.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(220).setHeight(140).setCrop("fill").chain()
  .setOverlay("brown_sheep").setWidth(220).setHeight(140).setX(220).setCrop("fill").chain()
  .setOverlay("horses").setWidth(220).setHeight(140).setY(140).setX(-110).setCrop("fill").chain()
  .setOverlay("white_chicken").setWidth(220).setHeight(140).setY(70).setX(110).setCrop("fill").chain()
  .setOverlay("butterfly.png").setHeight(200).setX(-10).setAngle(10).chain()
  .setWidth(400).setHeight(260).setRadius(20).setCrop("crop").chain()
  .setOverlay("text:Parisienne_35_bold:Memories%20from%20our%20trip").setColor("#990C47").setY(155).chain()
  .setEffect("shadow")).generate("yellow_tulip.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Applying rounded corners to an image

Transforming an image to a rounded version is simply done by using the radius parameter (r in URLs). It accepts the number of pixels of the radius of all four corners.

Original

Original

Rounded corners

Rounded corners

Facebook picture

Facebook picture
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/r_50/front_face.jpg
Ruby:
cl_image_tag("front_face.jpg", :radius=>50)
PHP:
cl_image_tag("front_face.jpg", array("radius"=>50))
Python:
CloudinaryImage("front_face.jpg").image(radius=50)
Node.js:
cloudinary.image("front_face.jpg", {radius: 50})
Java:
cloudinary.url().transformation(new Transformation().radius(50)).imageTag("front_face.jpg");
JS:
cloudinary.imageTag('front_face.jpg', {radius: 50}).toHtml();
jQuery:
$.cloudinary.image("front_face.jpg", {radius: 50})
React:
<Image publicId="front_face.jpg" >
  <Transformation radius="50" />
</Image>
Angular:
<cl-image public-id="front_face.jpg" >
  <cl-transformation radius="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Radius(50)).BuildImageTag("front_face.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().radius(50)).generate("front_face.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setRadius(50)).generate("front_face.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Text overlay positioning

Customize text overlay's position by setting the gravity (g in URLs) and the optional offset of the x and y. While the default text positioning ('gravity') is center, you can place your text in any other area of the image (tip: even outside the image's boundaries).

Default - center

Default - center

South gravity

South gravity

Custom position

Custom position
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Hello World,g_north_west,x_20,y_20/face_center.jpg
Ruby:
cl_image_tag("face_center.jpg", :overlay=>"text:Arial_45_bold:Hello%20World", :gravity=>"north_west", :x=>20, :y=>20)
PHP:
cl_image_tag("face_center.jpg", array("overlay"=>"text:Arial_45_bold:Hello%20World", "gravity"=>"north_west", "x"=>20, "y"=>20))
Python:
CloudinaryImage("face_center.jpg").image(overlay="text:Arial_45_bold:Hello%20World", gravity="north_west", x=20, y=20)
Node.js:
cloudinary.image("face_center.jpg", {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_45_bold:Hello%20World").gravity("north_west").x(20).y(20)).imageTag("face_center.jpg");
JS:
cloudinary.imageTag('face_center.jpg', {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20}).toHtml();
jQuery:
$.cloudinary.image("face_center.jpg", {overlay: "text:Arial_45_bold:Hello%20World", gravity: "north_west", x: 20, y: 20})
React:
<Image publicId="face_center.jpg" >
  <Transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20" />
</Image>
Angular:
<cl-image public-id="face_center.jpg" >
  <cl-transformation overlay="text:Arial_45_bold:Hello%20World" gravity="north_west" x="20" y="20">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_45_bold:Hello%20World").Gravity("north_west").X(20).Y(20)).BuildImageTag("face_center.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("text:Arial_45_bold:Hello%20World").gravity("north_west").x(20).y(20)).generate("face_center.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_45_bold:Hello%20World").setGravity("north_west").setX(20).setY(20)).generate("face_center.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Limiting an image by specified dimensions

Limit the size of the image by specifying the width and height (w and h in URLs) while setting the crop parameter to limit. This will create an image that does not exceed the given width and height. All original image parts remain visible and the aspect ratio of the original image is kept.

Original

Original

70x70 Limited

70x70 Limited

1000x1000 Limited

1000x1000 Limited
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_70,h_70,c_limit/cashew_chicken.jpg
Ruby:
cl_image_tag("cashew_chicken.jpg", :width=>70, :height=>70, :crop=>"limit")
PHP:
cl_image_tag("cashew_chicken.jpg", array("width"=>70, "height"=>70, "crop"=>"limit"))
Python:
CloudinaryImage("cashew_chicken.jpg").image(width=70, height=70, crop="limit")
Node.js:
cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})
Java:
cloudinary.url().transformation(new Transformation().width(70).height(70).crop("limit")).imageTag("cashew_chicken.jpg");
JS:
cloudinary.imageTag('cashew_chicken.jpg', {width: 70, height: 70, crop: "limit"}).toHtml();
jQuery:
$.cloudinary.image("cashew_chicken.jpg", {width: 70, height: 70, crop: "limit"})
React:
<Image publicId="cashew_chicken.jpg" >
  <Transformation width="70" height="70" crop="limit" />
</Image>
Angular:
<cl-image public-id="cashew_chicken.jpg" >
  <cl-transformation width="70" height="70" crop="limit">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(70).Crop("limit")).BuildImageTag("cashew_chicken.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(70).height(70).crop("limit")).generate("cashew_chicken.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(70).setHeight(70).setCrop("limit")).generate("cashew_chicken.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Face detection-based image cropping

Crop an image based on an automatically detected face or faces by specifying the width and height (w and h in URLs), setting the gravity parameter to face or faces (g_face or g_faces in URLs), then choose the crop mode most suitable to your requirements.

Original

Original

Face detection

Face detection

Faces detection

Faces detection
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_100,h_100,c_thumb,g_face/couple.jpg
Ruby:
cl_image_tag("couple.jpg", :width=>100, :height=>100, :gravity=>"face", :crop=>"thumb")
PHP:
cl_image_tag("couple.jpg", array("width"=>100, "height"=>100, "gravity"=>"face", "crop"=>"thumb"))
Python:
CloudinaryImage("couple.jpg").image(width=100, height=100, gravity="face", crop="thumb")
Node.js:
cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).imageTag("couple.jpg");
JS:
cloudinary.imageTag('couple.jpg', {width: 100, height: 100, gravity: "face", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("couple.jpg", {width: 100, height: 100, gravity: "face", crop: "thumb"})
React:
<Image publicId="couple.jpg" >
  <Transformation width="100" height="100" gravity="face" crop="thumb" />
</Image>
Angular:
<cl-image public-id="couple.jpg" >
  <cl-transformation width="100" height="100" gravity="face" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Crop("thumb")).BuildImageTag("couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").crop("thumb")).generate("couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setCrop("thumb")).generate("couple.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Crop pictures by custom coordinates

Crop your images by specifying the width and height parameters (w and h in URLs) while setting the crop parameter to crop (c_crop in URLs). This will extract only part of a given width & height out of the original image. The original proportions are retained and so is the size of the graphics.

Original

Original

Center crop

Center crop

By Coordinates

By Coordinates
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_300,h_250,c_crop/kitten.jpg
Ruby:
cl_image_tag("kitten.jpg", :width=>300, :height=>250, :crop=>"crop")
PHP:
cl_image_tag("kitten.jpg", array("width"=>300, "height"=>250, "crop"=>"crop"))
Python:
CloudinaryImage("kitten.jpg").image(width=300, height=250, crop="crop")
Node.js:
cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(250).crop("crop")).imageTag("kitten.jpg");
JS:
cloudinary.imageTag('kitten.jpg', {width: 300, height: 250, crop: "crop"}).toHtml();
jQuery:
$.cloudinary.image("kitten.jpg", {width: 300, height: 250, crop: "crop"})
React:
<Image publicId="kitten.jpg" >
  <Transformation width="300" height="250" crop="crop" />
</Image>
Angular:
<cl-image public-id="kitten.jpg" >
  <cl-transformation width="300" height="250" crop="crop">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(250).Crop("crop")).BuildImageTag("kitten.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(300).height(250).crop("crop")).generate("kitten.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(250).setCrop("crop")).generate("kitten.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Resizing an image to fill given dimensions

Resize your images to fill specified dimensions by setting the width and height (w and h in URLs), while setting the crop parameter to fill (c_fill in URLs). This will resize and crop the image so an image with the exact specified dimensions is generated. The fill crop mode keeps the original image's aspect ratio, therefore parts of the images may be cut-off.

Original

Original

Fill 150x300

Fill 150x300

Fill 500x150

Fill 500x150
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_150,h_300,c_fill/boulder.jpg
Ruby:
cl_image_tag("boulder.jpg", :width=>150, :height=>300, :crop=>"fill")
PHP:
cl_image_tag("boulder.jpg", array("width"=>150, "height"=>300, "crop"=>"fill"))
Python:
CloudinaryImage("boulder.jpg").image(width=150, height=300, crop="fill")
Node.js:
cloudinary.image("boulder.jpg", {width: 150, height: 300, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(150).height(300).crop("fill")).imageTag("boulder.jpg");
JS:
cloudinary.imageTag('boulder.jpg', {width: 150, height: 300, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("boulder.jpg", {width: 150, height: 300, crop: "fill"})
React:
<Image publicId="boulder.jpg" >
  <Transformation width="150" height="300" crop="fill" />
</Image>
Angular:
<cl-image public-id="boulder.jpg" >
  <cl-transformation width="150" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(300).Crop("fill")).BuildImageTag("boulder.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(150).height(300).crop("fill")).generate("boulder.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(300).setCrop("fill")).generate("boulder.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Fitting an image within specified dimensions

To change the image size to fit in given width and height while retaining original proportions, specify the width and height parameters (w and h in URLs) while setting the crop parameter to fit (c_fit in URLs).

Original

Original

Fit 70x90

Fit 70x90

300x100 fit

300x100 fit
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_70,h_90,c_fit/flower.jpg
Ruby:
cl_image_tag("flower.jpg", :width=>70, :height=>90, :crop=>"fit")
PHP:
cl_image_tag("flower.jpg", array("width"=>70, "height"=>90, "crop"=>"fit"))
Python:
CloudinaryImage("flower.jpg").image(width=70, height=90, crop="fit")
Node.js:
cloudinary.image("flower.jpg", {width: 70, height: 90, crop: "fit"})
Java:
cloudinary.url().transformation(new Transformation().width(70).height(90).crop("fit")).imageTag("flower.jpg");
JS:
cloudinary.imageTag('flower.jpg', {width: 70, height: 90, crop: "fit"}).toHtml();
jQuery:
$.cloudinary.image("flower.jpg", {width: 70, height: 90, crop: "fit"})
React:
<Image publicId="flower.jpg" >
  <Transformation width="70" height="90" crop="fit" />
</Image>
Angular:
<cl-image public-id="flower.jpg" >
  <cl-transformation width="70" height="90" crop="fit">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(90).Crop("fit")).BuildImageTag("flower.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(70).height(90).crop("fit")).generate("flower.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(70).setHeight(90).setCrop("fit")).generate("flower.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Resize an image

Resize your images by setting the width and/or height parameters (w and h in URLs). When resizing using Cloudinary's URL-based transformations, Cloudinary will automatically apply the scale crop mode. Alternatively, you can use any one of our many supported crop modes.

Original

Original

Scaled

Scaled

Stretched

Stretched
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_70,h_53,c_scale/turtles.jpg
Ruby:
cl_image_tag("turtles.jpg", :width=>70, :height=>53, :crop=>"scale")
PHP:
cl_image_tag("turtles.jpg", array("width"=>70, "height"=>53, "crop"=>"scale"))
Python:
CloudinaryImage("turtles.jpg").image(width=70, height=53, crop="scale")
Node.js:
cloudinary.image("turtles.jpg", {width: 70, height: 53, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(70).height(53).crop("scale")).imageTag("turtles.jpg");
JS:
cloudinary.imageTag('turtles.jpg', {width: 70, height: 53, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("turtles.jpg", {width: 70, height: 53, crop: "scale"})
React:
<Image publicId="turtles.jpg" >
  <Transformation width="70" height="53" crop="scale" />
</Image>
Angular:
<cl-image public-id="turtles.jpg" >
  <cl-transformation width="70" height="53" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(70).Height(53).Crop("scale")).BuildImageTag("turtles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(70).height(53).crop("scale")).generate("turtles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(70).setHeight(53).setCrop("scale")).generate("turtles.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Convert PDF to JPG

Convert your PDF files to a JPG thumbnail by simply switching the extension of the file to JPG. You can also specify the target thumbnail dimensions using the width and height parameters and any available crop mode. If your PDF file has multiple pages, you can specify the specific page to convert using the page parameter (pg in URLs). For example: Multi-page

PDF thumbnail

PDF thumbnail

With overlays

With overlays

Multi-page

Multi-page
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_200,h_250,c_fill,pg_2/multi_page_pdf.jpg
Ruby:
cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")
PHP:
cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))
Python:
CloudinaryImage("multi_page_pdf.jpg").image(width=200, height=250, page=2, crop="fill")
Node.js:
cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).imageTag("multi_page_pdf.jpg");
JS:
cloudinary.imageTag('multi_page_pdf.jpg', {width: 200, height: 250, page: 2, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
React:
<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="200" height="250" page="2" crop="fill" />
</Image>
Angular:
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="200" height="250" page="2" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Page(2).Crop("fill")).BuildImageTag("multi_page_pdf.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).generate("multi_page_pdf.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(250).setPage(2).setCrop("fill")).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Add a shadow effect to an image

Add a shadow effect to any image just by setting the effect parameter to shadow (e_shadow in URLs). You can customize the x and y offsets of the shadow and the blurring level. The shadow's color can be also changed by setting the color parameter (co in URLs).

Original

Original

Custom shadow

Custom shadow

Colored shadow

Colored shadow
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_shadow:90,x_15,y_15,co_brown/cloudinary_icon.png
Ruby:
cl_image_tag("cloudinary_icon.png", :effect=>"shadow:90", :x=>15, :y=>15, :color=>"brown")
PHP:
cl_image_tag("cloudinary_icon.png", array("effect"=>"shadow:90", "x"=>15, "y"=>15, "color"=>"brown"))
Python:
CloudinaryImage("cloudinary_icon.png").image(effect="shadow:90", x=15, y=15, color="brown")
Node.js:
cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
Java:
cloudinary.url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("brown")).imageTag("cloudinary_icon.png");
JS:
cloudinary.imageTag('cloudinary_icon.png', {effect: "shadow:90", x: 15, y: 15, color: "brown"}).toHtml();
jQuery:
$.cloudinary.image("cloudinary_icon.png", {effect: "shadow:90", x: 15, y: 15, color: "brown"})
React:
<Image publicId="cloudinary_icon.png" >
  <Transformation effect="shadow:90" x="15" y="15" color="brown" />
</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >
  <cl-transformation effect="shadow:90" x="15" y="15" color="brown">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("shadow:90").X(15).Y(15).Color("brown")).BuildImageTag("cloudinary_icon.png")
Android:
MediaManager.get().url().transformation(new Transformation().effect("shadow:90").x(15).y(15).color("brown")).generate("cloudinary_icon.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("shadow:90").setX(15).setY(15).setColor("brown")).generate("cloudinary_icon.png")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Automatically improve photos

Automatically improve the visual quality of your images using Cloudinary. Image improving is done by setting the effect parameter to improve (e_improve in URLs). All images and thumbnails of your website would seamlessly look much clearer and vivid.

Original

Original

Improved

Improved

Improved, cropped

Improved, cropped
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_improve/gray_mountain.jpg
Ruby:
cl_image_tag("gray_mountain.jpg", :effect=>"improve")
PHP:
cl_image_tag("gray_mountain.jpg", array("effect"=>"improve"))
Python:
CloudinaryImage("gray_mountain.jpg").image(effect="improve")
Node.js:
cloudinary.image("gray_mountain.jpg", {effect: "improve"})
Java:
cloudinary.url().transformation(new Transformation().effect("improve")).imageTag("gray_mountain.jpg");
JS:
cloudinary.imageTag('gray_mountain.jpg', {effect: "improve"}).toHtml();
jQuery:
$.cloudinary.image("gray_mountain.jpg", {effect: "improve"})
React:
<Image publicId="gray_mountain.jpg" >
  <Transformation effect="improve" />
</Image>
Angular:
<cl-image public-id="gray_mountain.jpg" >
  <cl-transformation effect="improve">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("improve")).BuildImageTag("gray_mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("improve")).generate("gray_mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("improve")).generate("gray_mountain.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Adjust image brightness

Dynamically adjust the brightness of an image. Either manually set the brightness level, or tell Cloudinary to automatically balance the brightness level. Brightness level change can be manually applied by setting the effect parameter to brightness (e_brightness in URLs), or by using the auto_brightness effect for automatic brightness adjustment.

Original

Original

30% brighter

30% brighter

50% darker

50% darker
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_brightness:30/mountain.jpg
Ruby:
cl_image_tag("mountain.jpg", :effect=>"brightness:30")
PHP:
cl_image_tag("mountain.jpg", array("effect"=>"brightness:30"))
Python:
CloudinaryImage("mountain.jpg").image(effect="brightness:30")
Node.js:
cloudinary.image("mountain.jpg", {effect: "brightness:30"})
Java:
cloudinary.url().transformation(new Transformation().effect("brightness:30")).imageTag("mountain.jpg");
JS:
cloudinary.imageTag('mountain.jpg', {effect: "brightness:30"}).toHtml();
jQuery:
$.cloudinary.image("mountain.jpg", {effect: "brightness:30"})
React:
<Image publicId="mountain.jpg" >
  <Transformation effect="brightness:30" />
</Image>
Angular:
<cl-image public-id="mountain.jpg" >
  <cl-transformation effect="brightness:30">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("brightness:30")).BuildImageTag("mountain.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("brightness:30")).generate("mountain.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("brightness:30")).generate("mountain.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Customize color saturation

Saturation level of images can be easily increased or decreased on-the-fly. This can be done by setting the effect parameter to saturation (e_saturation in URLs). Saturation levels can be customized by specifying the saturation percentage, either positive or negative.

Original

Original

+60% Saturation

+60% Saturation

-60% Saturation

-60% Saturation
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_saturation:60/vegetable_soup.jpg
Ruby:
cl_image_tag("vegetable_soup.jpg", :effect=>"saturation:60")
PHP:
cl_image_tag("vegetable_soup.jpg", array("effect"=>"saturation:60"))
Python:
CloudinaryImage("vegetable_soup.jpg").image(effect="saturation:60")
Node.js:
cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
Java:
cloudinary.url().transformation(new Transformation().effect("saturation:60")).imageTag("vegetable_soup.jpg");
JS:
cloudinary.imageTag('vegetable_soup.jpg', {effect: "saturation:60"}).toHtml();
jQuery:
$.cloudinary.image("vegetable_soup.jpg", {effect: "saturation:60"})
React:
<Image publicId="vegetable_soup.jpg" >
  <Transformation effect="saturation:60" />
</Image>
Angular:
<cl-image public-id="vegetable_soup.jpg" >
  <cl-transformation effect="saturation:60">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("saturation:60")).BuildImageTag("vegetable_soup.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("saturation:60")).generate("vegetable_soup.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("saturation:60")).generate("vegetable_soup.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Sharpen an image

Use Cloudinary to sharpen your images easily and dynamically. Image sharpening can be applied by setting the effect parameter to sharpen (e_sharpen in URLs). A custom sharpen level can be set in order to get the exact effect you need.

Original

Original

Sharpened

Sharpened

Sharpened more

Sharpened more
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_sharpen/front_face.jpg
Ruby:
cl_image_tag("front_face.jpg", :effect=>"sharpen")
PHP:
cl_image_tag("front_face.jpg", array("effect"=>"sharpen"))
Python:
CloudinaryImage("front_face.jpg").image(effect="sharpen")
Node.js:
cloudinary.image("front_face.jpg", {effect: "sharpen"})
Java:
cloudinary.url().transformation(new Transformation().effect("sharpen")).imageTag("front_face.jpg");
JS:
cloudinary.imageTag('front_face.jpg', {effect: "sharpen"}).toHtml();
jQuery:
$.cloudinary.image("front_face.jpg", {effect: "sharpen"})
React:
<Image publicId="front_face.jpg" >
  <Transformation effect="sharpen" />
</Image>
Angular:
<cl-image public-id="front_face.jpg" >
  <cl-transformation effect="sharpen">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sharpen")).BuildImageTag("front_face.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("sharpen")).generate("front_face.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sharpen")).generate("front_face.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:

Add a text to an image

Add dynamic text on top of any image, on-the-fly. You can use any one of the hundreds of fonts available by Google Fonts, or even use your own custom font. Embed the text by setting the overlay parameter (l in URLs) to text<text_params>.

Dynamic style

Dynamic style

Colored text

Colored text

Pre-defined style

Pre-defined style
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_text:Arial_24_bold:Dynamic style/site_bg_bright_small.jpg
Ruby:
cl_image_tag("site_bg_bright_small.jpg", :overlay=>"text:Arial_24_bold:Dynamic%20style")
PHP:
cl_image_tag("site_bg_bright_small.jpg", array("overlay"=>"text:Arial_24_bold:Dynamic%20style"))
Python:
CloudinaryImage("site_bg_bright_small.jpg").image(overlay="text:Arial_24_bold:Dynamic%20style")
Node.js:
cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_24_bold:Dynamic%20style")).imageTag("site_bg_bright_small.jpg");
JS:
cloudinary.imageTag('site_bg_bright_small.jpg', {overlay: "text:Arial_24_bold:Dynamic%20style"}).toHtml();
jQuery:
$.cloudinary.image("site_bg_bright_small.jpg", {overlay: "text:Arial_24_bold:Dynamic%20style"})
React:
<Image publicId="site_bg_bright_small.jpg" >
  <Transformation overlay="text:Arial_24_bold:Dynamic%20style" />
</Image>
Angular:
<cl-image public-id="site_bg_bright_small.jpg" >
  <cl-transformation overlay="text:Arial_24_bold:Dynamic%20style">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_24_bold:Dynamic%20style")).BuildImageTag("site_bg_bright_small.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("text:Arial_24_bold:Dynamic%20style")).generate("site_bg_bright_small.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_24_bold:Dynamic%20style")).generate("site_bg_bright_small.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags:
More recipes