Cloudinary Cookbook recipes about Resize

Find recipes by tags:

Relative size overlays

Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).

Main image

100% width-related

Including text

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/black_bar.png

Ruby:

cl_image_tag("black_bar.png")

PHP:

cl_image_tag("black_bar.png")

Python:

CloudinaryImage("black_bar.png").image()

Node.js:

cloudinary.image("black_bar.png")

Java:

cloudinary.url().imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png').toHtml();

jQuery:

$.cloudinary.image("black_bar.png")

React:

<Image publicId="black_bar.png" >

</Image>

Vue.js:

<cld-image publicId="black_bar.png" >

</cld-image>

Angular:

<cl-image public-id="black_bar.png" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)

by Itay Taragano Jul 19, 2015

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

1st frame-Default

10th frame

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="bored_animation.jpg" >

</cld-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)

by Itay Taragano Aug 05, 2014

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

Rotated

Adding text

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="cloudinary_animation.gif" >
  <cld-transformation width="0.5" crop="scale" />
</cld-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)

by Itay Taragano Aug 05, 2014

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

Scale and position

Semi-transparent

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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(new Layer().publicId("cloudinary_icon"))).imageTag("envelope.jpg");

JS:

cloudinary.imageTag('envelope.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon")}).toHtml();

jQuery:

$.cloudinary.image("envelope.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon")})

React:

<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>

Vue.js:

<cld-image publicId="envelope.jpg" >
  <cld-transformation overlay="cloudinary_icon" />
</cld-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(new Layer().PublicId("cloudinary_icon"))).BuildImageTag("envelope.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).generate("envelope.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon")).generate("envelope.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jun 15, 2014

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

Collage with text

Another collage

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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=>{:font_family=>"Parisienne", :font_size=>35, :font_weight=>"bold", :text=>"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"=>array("font_family"=>"Parisienne", "font_size"=>35, "font_weight"=>"bold", "text"=>"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': {'font_family': "Parisienne", 'font_size': 35, 'font_weight': "bold", 'text': "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: {font_family: "Parisienne", font_size: 35, font_weight: "bold", text: "Memories%20from%20our%20trip"}, color: "#990C47", y: 155},
  {effect: "shadow"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(220).height(140).crop("fill").chain()
  .overlay(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("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: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("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: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, x: 220, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, y: 140, x: -110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, y: 70, x: 110, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("butterfly.png"), height: 200, x: -10, angle: 10},
  {width: 400, height: 260, radius: 20, crop: "crop"},
  {overlay: new cloudinary.TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("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={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" />
  <Transformation effect="shadow" />
</Image>

Vue.js:

<cld-image publicId="yellow_tulip.jpg" >
  <cld-transformation width="220" height="140" crop="fill" />
  <cld-transformation overlay="brown_sheep" width="220" height="140" x="220" crop="fill" />
  <cld-transformation overlay="horses" width="220" height="140" y="140" x="-110" crop="fill" />
  <cld-transformation overlay="white_chicken" width="220" height="140" y="70" x="110" crop="fill" />
  <cld-transformation overlay="butterfly.png" height="200" x="-10" angle="10" />
  <cld-transformation width="400" height="260" radius="20" crop="crop" />
  <cld-transformation overlay={{fontFamily: "Parisienne", fontSize: 35, fontWeight: "bold", text: "Memories%20from%20our%20trip"}} color="#990C47" y="155" />
  <cld-transformation effect="shadow" />
</cld-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(new Layer().PublicId("brown_sheep")).Width(220).Height(140).X(220).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("horses")).Width(220).Height(140).Y(140).X(-110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("white_chicken")).Width(220).Height(140).Y(70).X(110).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("butterfly.png")).Height(200).X(-10).Angle(10).Chain()
  .Width(400).Height(260).Radius(20).Crop("crop").Chain()
  .Overlay(new TextLayer().FontFamily("Parisienne").FontSize(35).FontWeight("bold").Text("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(new Layer().publicId("brown_sheep")).width(220).height(140).x(220).crop("fill").chain()
  .overlay(new Layer().publicId("horses")).width(220).height(140).y(140).x(-110).crop("fill").chain()
  .overlay(new Layer().publicId("white_chicken")).width(220).height(140).y(70).x(110).crop("fill").chain()
  .overlay(new Layer().publicId("butterfly.png")).height(200).x(-10).angle(10).chain()
  .width(400).height(260).radius(20).crop("crop").chain()
  .overlay(new TextLayer().fontFamily("Parisienne").fontSize(35).fontWeight("bold").text("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)

by Itay Taragano Jun 11, 2014

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

70x70 Limited

1000x1000 Limited

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="cashew_chicken.jpg" >
  <cld-transformation width="70" height="70" crop="limit" />
</cld-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)

by Itay Taragano Jun 11, 2014

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

Fill 150x300

Fill 500x150

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="boulder.jpg" >
  <cld-transformation width="150" height="300" crop="fill" />
</cld-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)

by Itay Taragano Jun 11, 2014

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

Fit 70x90

300x100 fit

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="flower.jpg" >
  <cld-transformation width="70" height="90" crop="fit" />
</cld-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)

by Itay Taragano Jun 11, 2014

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

Scaled

Stretched

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="turtles.jpg" >
  <cld-transformation width="70" height="53" crop="scale" />
</cld-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)

by Itay Taragano Jun 11, 2014

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

With overlays

Multi-page

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

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>

Vue.js:

<cld-image publicId="multi_page_pdf.jpg" >
  <cld-transformation width="200" height="250" page="2" crop="fill" />
</cld-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)

by Itay Taragano Jun 11, 2014

Tags:

Streamlining the Process of Product Image Creation

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.

Photo with Background Removed

Processed Product Photo

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/wood_chair_orig.jpg

Ruby:

cl_image_tag("wood_chair_orig.jpg")

PHP:

cl_image_tag("wood_chair_orig.jpg")

Python:

CloudinaryImage("wood_chair_orig.jpg").image()

Node.js:

cloudinary.image("wood_chair_orig.jpg")

Java:

cloudinary.url().imageTag("wood_chair_orig.jpg");

JS:

cloudinary.imageTag('wood_chair_orig.jpg').toHtml();

jQuery:

$.cloudinary.image("wood_chair_orig.jpg")

React:

<Image publicId="wood_chair_orig.jpg" >

</Image>

Vue.js:

<cld-image publicId="wood_chair_orig.jpg" >

</cld-image>

Angular:

<cl-image public-id="wood_chair_orig.jpg" >

</cl-image>

.Net:

cloudinary.Api.UrlImgUp.BuildImageTag("wood_chair_orig.jpg")

Android:

MediaManager.get().url().generate("wood_chair_orig.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("wood_chair_orig.jpg")!, cloudinary: cloudinary)

by Josh Slivken May 01, 2018

Tags: