Cloudinary Cookbook recipes about PHP

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

The Clock face

The Big hand

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/$minute_50/$hour_1/$ma_$minute_div_60_mul_360/$ha_$hour_div_12_mul_360/l_clock_example:small/a_$ha_add_$ma_div_12/fl_layer_apply/l_clock_example:big/a_$ma/fl_layer_apply/w_550,h_550,c_crop/q_auto/clock_example/clock.png

Ruby:

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:

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:

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:

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:

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:

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:

$.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:

<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:

<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:

<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:

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:

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:

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 Jul 02, 2020

Tags: