Render image context metadata in text overlays

Do you know that, with Cloudinary, you can access and dynamically render the context metadata stored centric to an image into a text overlay in real time? You can then can quickly output product information directly on an image to support merchandising efforts.

As an example, add a border to outline this image:

Ruby:
cl_image_tag("courtfrasco.jpg")
PHP:
cl_image_tag("courtfrasco.jpg")
Python:
CloudinaryImage("courtfrasco.jpg").image()
Node.js:
cloudinary.image("courtfrasco.jpg")
Java:
cloudinary.url().imageTag("courtfrasco.jpg");
JS:
cloudinary.imageTag('courtfrasco.jpg').toHtml();
jQuery:
$.cloudinary.image("courtfrasco.jpg")
React:
<Image publicId="courtfrasco.jpg" >

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

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("courtfrasco.jpg")
Android:
MediaManager.get().url().generate("courtfrasco.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("courtfrasco.jpg")!, cloudinary: cloudinary)
Original

First, ensure that the image’s context-metadata fields are populated. Instead of a manual task, this data is typically ingested at upload or by API upload from another system, such as one for product information management (PIM). For this demo, create two specific fields, title and offer,and enter their values in the context metadata for the image.

Next, tap into that metadata with the syntax ctx:!fieldname!, first assigning it to a user variable and then writing that variable in a text overlay:

Ruby:
cl_image_tag("courtfrasco.jpg", :variables=>[["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], :transformation=>[
  {:width=>200, :crop=>"scale"},
  {:overlay=>{:font_family=>"arial", :font_size=>20, :text=>"%24%28offer%29"}, :y=>0.4, :color=>"red"},
  {:overlay=>{:font_family=>"arial", :font_size=>22, :font_weight=>"bold", :text=>"%24%28title%29"}, :y=>0.28}
  ])
PHP:
cl_image_tag("courtfrasco.jpg", array("variables"=>array("$offer"=>"ctx:!offer!", "$title"=>"ctx:!title!"), "transformation"=>array(
  array("width"=>200, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"arial", "font_size"=>20, "text"=>"%24%28offer%29"), "y"=>0.4, "color"=>"red"),
  array("overlay"=>array("font_family"=>"arial", "font_size"=>22, "font_weight"=>"bold", "text"=>"%24%28title%29"), "y"=>0.28)
  )))
Python:
CloudinaryImage("courtfrasco.jpg").image(variables={"$offer": "ctx:!offer!", "$title": "ctx:!title!"}, transformation=[
  {'width': 200, 'crop': "scale"},
  {'overlay': {'font_family': "arial", 'font_size': 20, 'text': "%24%28offer%29"}, 'y': 0.4, 'color': "red"},
  {'overlay': {'font_family': "arial", 'font_size': 22, 'font_weight': "bold", 'text': "%24%28title%29"}, 'y': 0.28}
  ])
Node.js:
cloudinary.image("courtfrasco.jpg", {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [
  {width: 200, crop: "scale"},
  {overlay: {font_family: "arial", font_size: 20, text: "%24%28offer%29"}, y: "0.4", color: "red"},
  {overlay: {font_family: "arial", font_size: 22, font_weight: "bold", text: "%24%28title%29"}, y: "0.28"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$offer","ctx:!offer!"),variable("$title","ctx:!title!")).chain()
  .width(200).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29")).y(0.4).color("red").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29")).y(0.28)).imageTag("courtfrasco.jpg");
JS:
cloudinary.imageTag('courtfrasco.jpg', {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29"), y: "0.4", color: "red"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29"), y: "0.28"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("courtfrasco.jpg", {variables: [["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]], transformation: [
  {width: 200, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29"), y: "0.4", color: "red"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29"), y: "0.28"}
  ]})
React:
<Image publicId="courtfrasco.jpg" >
  <Transformation width="200" crop="scale" />
  <Transformation overlay={{fontFamily: "arial", fontSize: 20, text: "%24%28offer%29"}} y="0.4" color="red" />
  <Transformation overlay={{fontFamily: "arial", fontSize: 22, fontWeight: "bold", text: "%24%28title%29"}} y="0.28" />
</Image>
Angular:
<cl-image public-id="courtfrasco.jpg" >
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:arial_20:%24%28offer%29" y="0.4" color="red">
  </cl-transformation>
  <cl-transformation overlay="text:arial_22_bold:%24%28title%29" y="0.28">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(20).Text("%24%28offer%29")).Y(0.4).Color("red").Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(22).FontWeight("bold").Text("%24%28title%29")).Y(0.28)).BuildImageTag("courtfrasco.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$offer","ctx:!offer!"),variable("$title","ctx:!title!")).chain()
  .width(200).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(20).text("%24%28offer%29")).y(0.4).color("red").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(22).fontWeight("bold").text("%24%28title%29")).y(0.28)).generate("courtfrasco.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setOverlay("text:arial_20:%24%28offer%29").setY(0.4).setColor("red").chain()
  .setOverlay("text:arial_22_bold:%24%28title%29").setY(0.28)).generate("courtfrasco.jpg")!, cloudinary: cloudinary)
Overlaid

Once you’ve decided on a standardized size or set of sizes for this approach, you can leverage the named transformations to further templatize and streamline the approach and apply it to other products as you see fit. It’s a simple, straightforward, efficient process.

Ruby:
cl_image_tag("courtfrasco.jpg", :transformation=>["offer"], :use_root_path=>true)
PHP:
cl_image_tag("courtfrasco.jpg", array("transformation"=>array("offer"), "use_root_path"=>true))
Python:
CloudinaryImage("courtfrasco.jpg").image(transformation=["offer"], use_root_path=True)
Node.js:
cloudinary.image("courtfrasco.jpg", {transformation: ["offer"], use_root_path: true})
Java:
cloudinary.url().transformation(new Transformation().named("offer")).useRootPath(true).imageTag("courtfrasco.jpg");
JS:
cloudinary.imageTag('courtfrasco.jpg', {transformation: ["offer"], useRootPath: true}).toHtml();
jQuery:
$.cloudinary.image("courtfrasco.jpg", {transformation: ["offer"], use_root_path: true})
React:
<Image publicId="courtfrasco.jpg" useRootPath="true">
  <Transformation transformation={["offer"]} />
</Image>
Angular:
<cl-image public-id="courtfrasco.jpg" use-root-path="true">
  <cl-transformation transformation={{["offer"]}}>
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("offer")).UseRootPath(true).BuildImageTag("courtfrasco.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().named("offer")).useRootPath(true).generate("courtfrasco.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true).setTransformation(CLDTransformation().setNamed("offer")).generate("courtfrasco.jpg")!, cloudinary: cloudinary)
Templatized

by Chris Zakharoff