Create a fully working clock using Cloudinary

Ever wanted to make your very own fully operational clock? This recipe would show how to create a dynamic clock in one URL. You could then insert the URL anywhere you want and have a fully working clock image that dynamically changes with the time. This clock leverages cloudinary's Overlay and powerful user variables which allows it to show an accurate hour based on the actual time.

Clock

Clock

The Clock face

The Clock face

The Big hand

The Big hand
Ruby:
Copy to clipboard
cl_image_tag("clock_example/clock.png", :variables=>[["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], :transformation=>[
  {:overlay=>"clock_example:small"},
  {:angle=>"$ha_add_$ma_div_12"},
  {:flags=>"layer_apply"},
  {:overlay=>"clock_example:big"},
  {:angle=>"$ma"},
  {:flags=>"layer_apply"},
  {:width=>550, :height=>550, :crop=>"crop"},
  {:quality=>"auto"}
  ])
PHP:
Copy to clipboard
cl_image_tag("clock_example/clock.png", array("variables"=>array("$minute"=>"50", "$hour"=>"1", "$ma"=>"$minute / 60 * 360", "$ha"=>"$hour / 12 * 360"), "transformation"=>array(
  array("overlay"=>"clock_example:small"),
  array("angle"=>"$ha_add_$ma_div_12"),
  array("flags"=>"layer_apply"),
  array("overlay"=>"clock_example:big"),
  array("angle"=>"$ma"),
  array("flags"=>"layer_apply"),
  array("width"=>550, "height"=>550, "crop"=>"crop"),
  array("quality"=>"auto")
  )))
Python:
Copy to clipboard
CloudinaryImage("clock_example/clock.png").image(variables={"$minute": "50", "$hour": "1", "$ma": "$minute / 60 * 360", "$ha": "$hour / 12 * 360"}, transformation=[
  {'overlay': "clock_example:small"},
  {'angle': "$ha_add_$ma_div_12"},
  {'flags': "layer_apply"},
  {'overlay': "clock_example:big"},
  {'angle': "$ma"},
  {'flags': "layer_apply"},
  {'width': 550, 'height': 550, 'crop': "crop"},
  {'quality': "auto"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("clock_example/clock.png", {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: "clock_example:small"},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: "clock_example:big"},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
.variables(variable("$minute","50"),variable("$hour","1"),variable("$ma","$minute / 60 * 360"),variable("$ha","$hour / 12 * 360")).chain()
  .overlay(new Layer().publicId("clock_example:small")).chain()
  .angle("$ha + $ma / 12").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("clock_example:big")).chain()
  .angle("$ma").chain()
  .flags("layer_apply").chain()
  .width(550).height(550).crop("crop").chain()
  .quality("auto")).imageTag("clock_example/clock.png");
JS:
Copy to clipboard
cloudinary.imageTag('clock_example/clock.png', {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: new cloudinary.Layer().publicId("clock_example:small")},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("clock_example:big")},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("clock_example/clock.png", {variables: [["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]], transformation: [
  {overlay: new cloudinary.Layer().publicId("clock_example:small")},
  {angle: "$ha_add_$ma_div_12"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("clock_example:big")},
  {angle: "$ma"},
  {flags: "layer_apply"},
  {width: 550, height: 550, crop: "crop"},
  {quality: "auto"}
  ]})
React:
Copy to clipboard
<Image publicId="clock_example/clock.png" >
  <Transformation overlay="clock_example:small" />
  <Transformation angle="$ha + $ma / 12" />
  <Transformation flags="layer_apply" />
  <Transformation overlay="clock_example:big" />
  <Transformation angle="$ma" />
  <Transformation flags="layer_apply" />
  <Transformation width="550" height="550" crop="crop" />
  <Transformation quality="auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="clock_example/clock.png" >
  <cld-transformation overlay="clock_example:small" />
  <cld-transformation angle="$ha + $ma / 12" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation overlay="clock_example:big" />
  <cld-transformation angle="$ma" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation width="550" height="550" crop="crop" />
  <cld-transformation quality="auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="clock_example/clock.png" >
  <cl-transformation overlay="clock_example:small">
  </cl-transformation>
  <cl-transformation angle="$ha + $ma / 12">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="clock_example:big">
  </cl-transformation>
  <cl-transformation angle="$ma">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation width="550" height="550" crop="crop">
  </cl-transformation>
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("clock_example:small")).Chain()
  .Angle("$ha + $ma / 12").Chain()
  .Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("clock_example:big")).Chain()
  .Angle("$ma").Chain()
  .Flags("layer_apply").Chain()
  .Width(550).Height(550).Crop("crop").Chain()
  .Quality("auto")).BuildImageTag("clock_example/clock.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$minute","50"),variable("$hour","1"),variable("$ma","$minute / 60 * 360"),variable("$ha","$hour / 12 * 360")).chain()
  .overlay(new Layer().publicId("clock_example:small")).chain()
  .angle("$ha + $ma / 12").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("clock_example:big")).chain()
  .angle("$ma").chain()
  .flags("layer_apply").chain()
  .width(550).height(550).crop("crop").chain()
  .quality("auto")).generate("clock_example/clock.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("clock_example:small").chain()
  .setAngle("$ha + $ma / 12").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("clock_example:big").chain()
  .setAngle("$ma").chain()
  .setFlags("layer_apply").chain()
  .setWidth(550).setHeight(550).setCrop("crop").chain()
  .setQuality("auto")).generate("clock_example/clock.png")!, cloudinary: cloudinary)
by Tal Admon

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
Ruby:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", :width=>200, :height=>250, :page=>2, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("multi_page_pdf.jpg", array("width"=>200, "height"=>250, "page"=>2, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("multi_page_pdf.jpg").image(width=200, height=250, page=2, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).imageTag("multi_page_pdf.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('multi_page_pdf.jpg', {width: 200, height: 250, page: 2, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("multi_page_pdf.jpg", {width: 200, height: 250, page: 2, crop: "fill"})
React:
Copy to clipboard
<Image publicId="multi_page_pdf.jpg" >
  <Transformation width="200" height="250" page="2" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="multi_page_pdf.jpg" >
  <cld-transformation width="200" height="250" page="2" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="multi_page_pdf.jpg" >
  <cl-transformation width="200" height="250" page="2" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(250).Page(2).Crop("fill")).BuildImageTag("multi_page_pdf.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(200).height(250).page(2).crop("fill")).generate("multi_page_pdf.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(250).setPage(2).setCrop("fill")).generate("multi_page_pdf.jpg")!, cloudinary: cloudinary)
by Itay Taragano