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:
Copy to clipboard
cl_image_tag("courtfrasco.jpg")
PHP:
Copy to clipboard
cl_image_tag("courtfrasco.jpg")
Python:
Copy to clipboard
CloudinaryImage("courtfrasco.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("courtfrasco.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("courtfrasco.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('courtfrasco.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("courtfrasco.jpg")
React:
Copy to clipboard
<Image publicId="courtfrasco.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="courtfrasco.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="courtfrasco.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("courtfrasco.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("courtfrasco.jpg");
iOS:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="courtfrasco.jpg" >
  <cld-transformation width="200" crop="scale" />
  <cld-transformation overlay={{fontFamily: "arial", fontSize: 20, text: "%24%28offer%29"}} y="0.4" color="red" />
  <cld-transformation overlay={{fontFamily: "arial", fontSize: 22, fontWeight: "bold", text: "%24%28title%29"}} y="0.28" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("courtfrasco.jpg", :transformation=>["offer"], :use_root_path=>true)
PHP:
Copy to clipboard
cl_image_tag("courtfrasco.jpg", array("transformation"=>array("offer"), "use_root_path"=>true))
Python:
Copy to clipboard
CloudinaryImage("courtfrasco.jpg").image(transformation=["offer"], use_root_path=True)
Node.js:
Copy to clipboard
cloudinary.image("courtfrasco.jpg", {transformation: ["offer"], use_root_path: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().named("offer")).useRootPath(true).imageTag("courtfrasco.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('courtfrasco.jpg', {transformation: ["offer"], useRootPath: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("courtfrasco.jpg", {transformation: ["offer"], use_root_path: true})
React:
Copy to clipboard
<Image publicId="courtfrasco.jpg" useRootPath="true">
  <Transformation transformation={["offer"]} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="courtfrasco.jpg" useRootPath="true">
  <cld-transformation transformation={["offer"]} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="courtfrasco.jpg" use-root-path="true">
  <cl-transformation transformation={{["offer"]}}>
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("offer")).UseRootPath(true).BuildImageTag("courtfrasco.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().named("offer")).useRootPath(true).generate("courtfrasco.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true).setTransformation(CLDTransformation().setNamed("offer")).generate("courtfrasco.jpg")!, cloudinary: cloudinary)
Templatized

by Chris Zakharoff