Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

Center objects using trim

Center an object within an image with a solid background. Do this by first trimming the background around the object (e_trim) and then pad (c_lpad) and resize the canvas to the image's initial width (w_iw) and height (h_ih).

* A green border was added (bo_4px_solid_green) to better demonstrate the object position within the image.

Here is the original image:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/bo_4px_solid_green/nice_bird.jpg
Ruby:
cl_image_tag("nice_bird.jpg", :border=>"4px_solid_green")
PHP:
cl_image_tag("nice_bird.jpg", array("border"=>"4px_solid_green"))
Python:
CloudinaryImage("nice_bird.jpg").image(border="4px_solid_green")
Node.js:
cloudinary.image("nice_bird.jpg", {border: "4px_solid_green"})
Java:
cloudinary.url().transformation(new Transformation().border("4px_solid_green")).imageTag("nice_bird.jpg");
JS:
cloudinary.imageTag('nice_bird.jpg', {border: "4px_solid_green"}).toHtml();
jQuery:
$.cloudinary.image("nice_bird.jpg", {border: "4px_solid_green"})
React:
<Image publicId="nice_bird.jpg" >
  <Transformation border="4px_solid_green" />
</Image>
Angular:
<cl-image public-id="nice_bird.jpg" >
  <cl-transformation border="4px_solid_green">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Border("4px_solid_green")).BuildImageTag("nice_bird.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().border("4px_solid_green")).generate("nice_bird.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setBorder("4px_solid_green")).generate("nice_bird.jpg")!, cloudinary: cloudinary)
Original

And here it is after trimming, padding, and resizing:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/e_trim/c_lpad,w_iw,h_ih/bo_4px_solid_green/nice_bird.jpg
Ruby:
cl_image_tag("nice_bird.jpg", :transformation=>[
  {:effect=>"trim"},
  {:width=>"iw", :height=>"ih", :crop=>"lpad"},
  {:border=>"4px_solid_green"}
  ])
PHP:
cl_image_tag("nice_bird.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("width"=>"iw", "height"=>"ih", "crop"=>"lpad"),
  array("border"=>"4px_solid_green")
  )))
Python:
CloudinaryImage("nice_bird.jpg").image(transformation=[
  {'effect': "trim"},
  {'width': "iw", 'height': "ih", 'crop': "lpad"},
  {'border': "4px_solid_green"}
  ])
Node.js:
cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .width("iw").height("ih").crop("lpad").chain()
  .border("4px_solid_green")).imageTag("nice_bird.jpg");
JS:
cloudinary.imageTag('nice_bird.jpg', {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("nice_bird.jpg", {transformation: [
  {effect: "trim"},
  {width: "iw", height: "ih", crop: "lpad"},
  {border: "4px_solid_green"}
  ]})
React:
<Image publicId="nice_bird.jpg" >
  <Transformation effect="trim" />
  <Transformation width="iw" height="ih" crop="lpad" />
  <Transformation border="4px_solid_green" />
</Image>
Angular:
<cl-image public-id="nice_bird.jpg" >
  <cl-transformation effect="trim">
  </cl-transformation>
  <cl-transformation width="iw" height="ih" crop="lpad">
  </cl-transformation>
  <cl-transformation border="4px_solid_green">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Width("iw").Height("ih").Crop("lpad").Chain()
  .Border("4px_solid_green")).BuildImageTag("nice_bird.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .width("iw").height("ih").crop("lpad").chain()
  .border("4px_solid_green")).generate("nice_bird.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("trim").chain()
  .setWidth("iw").setHeight("ih").setCrop("lpad").chain()
  .setBorder("4px_solid_green")).generate("nice_bird.jpg")!, cloudinary: cloudinary)
Trimmed and Padded

by Roee Ben Ari
Tags: