Most popular cookbook recipes
A cool new design trend popularized by Shopify is Duotone imagery. There’s a good post on the Shopify blog covering this and some other trends so you can read that there if curious (4 Trendy Visual Design Trends - Shopify Blog). In the spirit of Cloudinary Cookbooks, we’re going to get right down to business.
Original
Duotone Red
Blue/Yellow
You can crop an image based on any custom shape. Do this by having your own custom image as a mask for cropping, setting the overlay parameter as your mask image's public ID and setting the flags parameter to cutter (in URLs: l_<mask_image>,fl_cutter).
Original
Custom shaped
Semi-transparency
Instead of coloring your text with a solid color, fill it with an image and give it an interesting texture. How? Choose an image as your text texture, dynamically add a text overlay as explained in the Dynamic text overlay blog post, and set the flags parameter to cutter (fl_cutter in URLs).
Original image
Text texture
Fetch + texture
Generate a great looking profile completeness meter to notify your users of their progress. Whether it's for profile page details, survey progress, or just to show your users the percentage of the completion of any task. Use Cloudinary's powerful manipulation tools to generate just what you need.
Badge meter
User's thumbnail
Avatar meter
cl_image_tag("avatar.jpg", :transformation=>[ {:effect=>"trim"}, {:effect=>"colorize", :color=>"white"}, {:background=>"#D0CDCD"}, {:overlay=>"avatar", :effect=>"trim", :width=>1.0, :height=>0.6, :gravity=>"south", :crop=>"crop"}, {:flags=>"layer_apply", :gravity=>"south"}, {:overlay=>{:font_family=>"Playball", :font_size=>40, :text=>"60%2525"}, :color=>"white", :y=>80}, {:width=>200, :crop=>"scale"} ])
cl_image_tag("avatar.jpg", array("transformation"=>array( array("effect"=>"trim"), array("effect"=>"colorize", "color"=>"white"), array("background"=>"#D0CDCD"), array("overlay"=>"avatar", "effect"=>"trim", "width"=>"1.0", "height"=>"0.6", "gravity"=>"south", "crop"=>"crop"), array("flags"=>"layer_apply", "gravity"=>"south"), array("overlay"=>array("font_family"=>"Playball", "font_size"=>40, "text"=>"60%2525"), "color"=>"white", "y"=>80), array("width"=>200, "crop"=>"scale") )))
(new ImageTag('avatar.jpg')) ->reshape(Reshape::trim()) ->effect(Effect::colorize()->color(Color::WHITE)) ->backgroundColor(Color::rgb('D0CDCD')) ->overlay( Overlay::source(Source::image('avatar') ->transformation((new ImageTransformation()) ->reshape(Reshape::trim()) ->resize(Resize::crop()->width(1.0)->height(0.6)->gravity(Gravity::compass(Compass::south()))))) ->position((new Position()) ->gravity(Gravity::compass(Compass::south())))) ->overlay( Overlay::source(Source::text('60%25', (new TextStyle('Playball', 40))) ->textColor(Color::WHITE)) ->position((new Position()) ->offsetY(80))) ->resize(Resize::scale()->width(200));
CloudinaryImage("avatar.jpg").image(transformation=[ {'effect': "trim"}, {'effect': "colorize", 'color': "white"}, {'background': "#D0CDCD"}, {'overlay': "avatar", 'effect': "trim", 'width': "1.0", 'height': "0.6", 'gravity': "south", 'crop': "crop"}, {'flags': "layer_apply", 'gravity': "south"}, {'overlay': {'font_family': "Playball", 'font_size': 40, 'text': "60%2525"}, 'color': "white", 'y': 80}, {'width': 200, 'crop': "scale"} ])
cloudinary.image("avatar.jpg", {transformation: [ {effect: "trim"}, {effect: "colorize", color: "white"}, {background: "#D0CDCD"}, {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"}, {flags: "layer_apply", gravity: "south"}, {overlay: {font_family: "Playball", font_size: 40, text: "60%2525"}, color: "white", y: 80}, {width: 200, crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .effect("trim").chain() .effect("colorize").color("white").chain() .background("#D0CDCD").chain() .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain() .flags("layer_apply").gravity("south").chain() .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain() .width(200).crop("scale")).imageTag("avatar.jpg");
cloudinary.imageTag('avatar.jpg', {transformation: [ {effect: "trim"}, {effect: "colorize", color: "white"}, {background: "#D0CDCD"}, {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"}, {flags: "layer_apply", gravity: "south"}, {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80}, {width: 200, crop: "scale"} ]}).toHtml();
$.cloudinary.image("avatar.jpg", {transformation: [ {effect: "trim"}, {effect: "colorize", color: "white"}, {background: "#D0CDCD"}, {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"}, {flags: "layer_apply", gravity: "south"}, {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80}, {width: 200, crop: "scale"} ]})
<Image publicId="avatar.jpg" > <Transformation effect="trim" /> <Transformation effect="colorize" color="white" /> <Transformation background="#D0CDCD" /> <Transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" /> <Transformation flags="layer_apply" gravity="south" /> <Transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" /> <Transformation width="200" crop="scale" /> </Image>
<cld-image publicId="avatar.jpg" > <cld-transformation effect="trim" /> <cld-transformation effect="colorize" color="white" /> <cld-transformation background="#D0CDCD" /> <cld-transformation :overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" /> <cld-transformation flags="layer_apply" gravity="south" /> <cld-transformation :overlay="{fontFamily: 'Playball', fontSize: 40, text: '60%2525'}" color="white" y="80" /> <cld-transformation width="200" crop="scale" /> </cld-image>
<cl-image public-id="avatar.jpg" > <cl-transformation effect="trim"> </cl-transformation> <cl-transformation effect="colorize" color="white"> </cl-transformation> <cl-transformation background="#D0CDCD"> </cl-transformation> <cl-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop"> </cl-transformation> <cl-transformation flags="layer_apply" gravity="south"> </cl-transformation> <cl-transformation overlay="text:Playball_40:60%2525" color="white" y="80"> </cl-transformation> <cl-transformation width="200" crop="scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Effect("trim").Chain() .Effect("colorize").Color("white").Chain() .Background("#D0CDCD").Chain() .Overlay(new Layer().PublicId("avatar")).Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain() .Flags("layer_apply").Gravity("south").Chain() .Overlay(new TextLayer().FontFamily("Playball").FontSize(40).Text("60%2525")).Color("white").Y(80).Chain() .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")
MediaManager.get().url().transformation(new Transformation() .effect("trim").chain() .effect("colorize").color("white").chain() .background("#D0CDCD").chain() .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain() .flags("layer_apply").gravity("south").chain() .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain() .width(200).crop("scale")).generate("avatar.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setEffect("trim").chain() .setEffect("colorize").setColor("white").chain() .setBackground("#D0CDCD").chain() .setOverlay("avatar").setEffect("trim").setWidth(1.0).setHeight(0.6).setGravity("south").setCrop("crop").chain() .setFlags("layer_apply").setGravity("south").chain() .setOverlay("text:Playball_40:60%2525").setColor("white").setY(80).chain() .setWidth(200).setCrop("scale")).generate("avatar.jpg")!, cloudinary: cloudinary)
Overlay profile picture from a social network on top of another image by setting the overlayparameter (l in URLs) to the corresponding network and user name. Cloudinary will automatically fetch the latest profile picture of social network sites.
Overlay
Transformed
Strong colored image with opacity
Automatically fetch social networks' profile pictures by setting the type parameter to the required network (e.g., facebook), apply any further transformations and add the user's initials as a text overlay.
Original
Face detection
With initials
cl_image_tag("Beckham.jpg", array("type"=>"facebook", "transformation"=>array( array("width"=>100, "height"=>100, "gravity"=>"face", "effect"=>"blur:200", "radius"=>"max", "crop"=>"thumb"), array("overlay"=>array("font_family"=>"Arial", "font_size"=>50, "font_weight"=>"bold", "text"=>"DB"), "color"=>"white") )))
(new ImageTag('Beckham.jpg')) ->resize(Resize::thumbnail()->width(100)->height(100)->gravity(Gravity::focusOn(FocusOn::face()))) ->roundCorners(RoundCorners::max()) ->effect(Effect::blur()->strength(200)) ->overlay( Overlay::source( Source::text('DB', (new TextStyle('Arial', 50)) ->fontWeight(FontWeight::bold())) ->textColor(Color::WHITE))) ->deliveryType('facebook');
CloudinaryImage("Beckham.jpg").image(type="facebook", transformation=[ {'width': 100, 'height': 100, 'gravity': "face", 'effect': "blur:200", 'radius': "max", 'crop': "thumb"}, {'overlay': {'font_family': "Arial", 'font_size': 50, 'font_weight': "bold", 'text': "DB"}, 'color': "white"} ])
cloudinary.url().transformation(new Transformation() .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain() .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").imageTag("Beckham.jpg");
cloudinary.imageTag('Beckham.jpg', {type: "facebook", transformation: [ {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"}, {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"} ]}).toHtml();
$.cloudinary.image("Beckham.jpg", {type: "facebook", transformation: [ {width: 100, height: 100, gravity: "face", effect: "blur:200", radius: "max", crop: "thumb"}, {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB"), color: "white"} ]})
<cld-image publicId="Beckham.jpg" type="facebook"> <cld-transformation width="100" height="100" gravity="face" effect="blur:200" radius="max" crop="thumb" /> <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 50, fontWeight: 'bold', text: 'DB'}" color="white" /> </cld-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(100).Height(100).Gravity("face").Effect("blur:200").Radius("max").Crop("thumb").Chain() .Overlay(new TextLayer().FontFamily("Arial").FontSize(50).FontWeight("bold").Text("DB")).Color("white")).Action("facebook").BuildImageTag("Beckham.jpg")
MediaManager.get().url().transformation(new Transformation() .width(100).height(100).gravity("face").effect("blur:200").radius("max").crop("thumb").chain() .overlay(new TextLayer().fontFamily("Arial").fontSize(50).fontWeight("bold").text("DB")).color("white")).type("facebook").generate("Beckham.jpg");
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation() .setWidth(100).setHeight(100).setGravity("face").setEffect("blur:200").setRadius("max").setCrop("thumb").chain() .setOverlay("text:Arial_50_bold:DB").setColor("white")).generate("Beckham.jpg")!, cloudinary: cloudinary)
Ever wanted to make your very own fully operational clock?
Clock
The Clock face
The Big hand
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"} ])
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") )))
(new ImageTag('clock_example/clock.png')) ->addVariable(Variable::set('minute', 50)) ->addVariable(Variable::set('hour', 1)) ->addVariable(Variable::set('ma', Expression::expression('$minute / 60 * 360'))) ->addVariable(Variable::set('ha', Expression::expression('$hour / 12 * 360'))) ->overlay( Overlay::source(Source::image('clock_example/small') ->transformation((new ImageTransformation()) ->rotate(Rotate::mode(RotationMode::$ha + $ma :: 12()))))) ->overlay( Overlay::source(Source::image('clock_example/big') ->transformation((new ImageTransformation()) ->rotate(Rotate::mode(RotationMode::$ma()))))) ->resize(Resize::crop()->width(550)->height(550)) ->delivery(Delivery::quality(Quality::auto()));
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"} ])
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"} ]})
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");
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();
$.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"} ]})
<Image publicId="clock_example/clock.png" variables={[["$minute", "50"], ["$hour", "1"], ["$ma", "$minute / 60 * 360"], ["$ha", "$hour / 12 * 360"]]}> <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>
<cld-image publicId="clock_example/clock.png" :variables="[['$minute', '50'], ['$hour', '1'], ['$ma', '$minute / 60 * 360'], ['$ha', '$hour / 12 * 360']]"> <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>
<cl-image public-id="clock_example/clock.png" variables="[['$minute', '50'], ['$hour', '1'], ['$ma', '$minute / 60 * 360'], ['$ha', '$hour / 12 * 360']]"> <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>
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")
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");
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 overlaying a video on top of itself, we can create the visual noise effect for a limited period of time.
For that we’ll use the noise effect for 3 seconds in the start of the video. Let’s also add e_fade parameter, so the video will also fade in and out.
(new VideoTag('dog.mp4')) ->overlay( Overlay::source(Source::video('dog') ->transformation((new VideoTransformation()) ->effect(Effect::noise()->level(60)))) ->timeline(Timeline::position()->startOffset(0)->endOffset(3))) ->effect(Effect::fadeIn()->duration(2000)) ->effect(Effect::fadeOut()->duration(4000));
<cl-video public-id="dog" > <cl-transformation effect="noise:60" start-offset="0" end-offset="3" overlay="video:dog" flags="layer_apply"> </cl-transformation> <cl-transformation effect="fade:2000"> </cl-transformation> <cl-transformation effect="fade:-4000"> </cl-transformation> </cl-video>
Place a video on top of another by using the overlay parameter while adding the ‘video:’ type to it (l_video in URLs).
cl_video_tag("dog", :transformation=>[ {:width=>150, :effect=>"accelerate:100", :overlay=>"video:abbey_road"}, {:gravity=>"west", :start_offset=>"0", :end_offset=>"2", :flags=>"layer_apply"}, {:overlay=>"video:abbey_road"}, {:width=>150, :effect=>"accelerate:100", :gravity=>"center", :start_offset=>"2", :end_offset=>"5", :flags=>"layer_apply", :crop=>"scale"}, {:overlay=>"video:abbey_road"}, {:width=>150, :effect=>"accelerate:100", :gravity=>"east", :start_offset=>"5", :flags=>"layer_apply", :crop=>"scale"} ])
cl_video_tag("dog", array("transformation"=>array( array("width"=>150, "effect"=>"accelerate:100", "overlay"=>"video:abbey_road"), array("gravity"=>"west", "start_offset"=>"0", "end_offset"=>"2", "flags"=>"layer_apply"), array("overlay"=>"video:abbey_road"), array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"center", "start_offset"=>"2", "end_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale"), array("overlay"=>"video:abbey_road"), array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"east", "start_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale") )))
(new VideoTag('dog.mp4')) ->overlay( Overlay::source(Source::video('abbey_road') ->transformation((new VideoTransformation()) ->resize(Resize::scale()->width(150)) ->effect(Effect::accelerate()->rate(100)))) ->position((new Position()) ->gravity(Gravity::compass(Compass::west()))) ->timeline(Timeline::position()->startOffset(0)->endOffset(2))) ->overlay( Overlay::source(Source::video('abbey_road') ->transformation((new VideoTransformation()) ->resize(Resize::scale()->width(150)) ->effect(Effect::accelerate()->rate(100)))) ->position((new Position()) ->gravity(Gravity::compass(Compass::center()))) ->timeline(Timeline::position()->startOffset(2)->endOffset(5))) ->overlay( Overlay::source(Source::video('abbey_road') ->transformation((new VideoTransformation()) ->resize(Resize::scale()->width(150)) ->effect(Effect::accelerate()->rate(100)))) ->position((new Position()) ->gravity(Gravity::compass(Compass::east()))) ->timeline(Timeline::position()->startOffset(5)) );
CloudinaryVideo("dog").video(transformation=[ {'width': 150, 'effect': "accelerate:100", 'overlay': "video:abbey_road"}, {'gravity': "west", 'start_offset': "0", 'end_offset': "2", 'flags': "layer_apply"}, {'overlay': "video:abbey_road"}, {'width': 150, 'effect': "accelerate:100", 'gravity': "center", 'start_offset': "2", 'end_offset': "5", 'flags': "layer_apply", 'crop': "scale"}, {'overlay': "video:abbey_road"}, {'width': 150, 'effect': "accelerate:100", 'gravity': "east", 'start_offset': "5", 'flags': "layer_apply", 'crop': "scale"} ])
cloudinary.video("dog", {transformation: [ {width: 150, effect: "accelerate:100", overlay: "video:abbey_road"}, {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"}, {overlay: "video:abbey_road"}, {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"}, {overlay: "video:abbey_road"}, {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain() .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).videoTag("dog");
cloudinary.videoTag('dog', {transformation: [ {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {gravity: "west", startOffset: "0", endOffset: "2", flags: "layer_apply"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "center", startOffset: "2", endOffset: "5", flags: "layer_apply", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "east", startOffset: "5", flags: "layer_apply", crop: "scale"} ]}).toHtml();
$.cloudinary.video("dog", {transformation: [ {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("video:abbey_road")}, {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"} ]})
<Video publicId="dog" > <Transformation width="150" effect="accelerate:100" overlay="video:abbey_road" /> <Transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" /> <Transformation overlay="video:abbey_road" /> <Transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" /> <Transformation overlay="video:abbey_road" /> <Transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" /> </Video>
<cld-video publicId="dog" > <cld-transformation width="150" effect="accelerate:100" :overlay="video:abbey_road" /> <cld-transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" /> <cld-transformation :overlay="video:abbey_road" /> <cld-transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" /> <cld-transformation :overlay="video:abbey_road" /> <cld-transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" /> </cld-video>
<cl-video public-id="dog" > <cl-transformation width="150" effect="accelerate:100" overlay="video:abbey_road"> </cl-transformation> <cl-transformation gravity="west" start-offset="0" end-offset="2" flags="layer_apply"> </cl-transformation> <cl-transformation overlay="video:abbey_road"> </cl-transformation> <cl-transformation width="150" effect="accelerate:100" gravity="center" start-offset="2" end-offset="5" flags="layer_apply" crop="scale"> </cl-transformation> <cl-transformation overlay="video:abbey_road"> </cl-transformation> <cl-transformation width="150" effect="accelerate:100" gravity="east" start-offset="5" flags="layer_apply" crop="scale"> </cl-transformation> </cl-video>
cloudinary.Api.UrlVideoUp.Transform(new Transformation() .Width(150).Effect("accelerate:100").Overlay(new Layer().PublicId("video:abbey_road")).Chain() .Gravity("west").StartOffset("0").EndOffset("2").Flags("layer_apply").Chain() .Overlay(new Layer().PublicId("video:abbey_road")).Chain() .Width(150).Effect("accelerate:100").Gravity("center").StartOffset("2").EndOffset("5").Flags("layer_apply").Crop("scale").Chain() .Overlay(new Layer().PublicId("video:abbey_road")).Chain() .Width(150).Effect("accelerate:100").Gravity("east").StartOffset("5").Flags("layer_apply").Crop("scale")).BuildVideoTag("dog")
MediaManager.get().url().transformation(new Transformation() .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain() .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain() .overlay(new Layer().publicId("video:abbey_road")).chain() .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).resourceType("video").generate("dog.mp4");
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation() .setWidth(150).setEffect("accelerate:100").setOverlay("video:abbey_road").chain() .setGravity("west").setStartOffset("0").setEndOffset("2").setFlags("layer_apply").chain() .setOverlay("video:abbey_road").chain() .setWidth(150).setEffect("accelerate:100").setGravity("center").setStartOffset("2").setEndOffset("5").setFlags("layer_apply").setCrop("scale").chain() .setOverlay("video:abbey_road").chain() .setWidth(150).setEffect("accelerate:100").setGravity("east").setStartOffset("5").setFlags("layer_apply").setCrop("scale")).generate("dog.mp4")
Heard a nice soundtrack and want to have it in your Cloudinary storage on-the-fly? Simply change the extension to any of our supported audio formats - MP3, OGG, WAV and get only the audio channel -
Audio channel -
A common practice among many of our customers - watermark images or videos to give credit for the owners and/or to protect their high-res original resources.
Rotate a video by setting the angle parameter (a_ in URLs). Positive values for clockwise and negative for counterclockwise. Very useful if you want to change the view from “portrait” to “landscape” when shooting videos in mobile -
Easily create and manipulate an animated gif from images. First, choose the images you wish to include in the GIF by tagging them. Then, use the multi API to turn them into animated GIF (the images will be ordered alphabetically within the GIF).
You can create a waveform from every uploaded audio or video (which includes an audio channel) file. Simply use the waveform flag (fl_waveform in URLs) and set the file’s extension to any image format you like.
By setting the audio_codec to none (ac_none in URLs), you can strip the audio channel from the video, serving it without sound.
You can also chain another audio file as an overlay to replace the video’s original audio.
The original video file (with audio) -
By using the accelerate effect (e_accelerate in URLs) you can determine how fast the video is going to run. Values are between -50 to 100, positive values for making the video faster and negative for slowing it down.
Playing a video in both directions - by applying the overlay parameter on the video and using the splice flag. For example, let’s create an instant replay of this bike stunt -
(new VideoTag('bike_stunt.mp4')) ->videoEdit( VideoEdit::concatenate(Concatenate::videoSource('bike_stunt') ->transformation((new VideoTransformation()) ->effect(Effect::reverse())))) ->videoEdit( VideoEdit::concatenate(Concatenate::videoSource('bike_stunt') ->transformation((new VideoTransformation()) ->effect(Effect::accelerate()->rate(-50)) )));
MediaManager.get().url().transformation(new Transformation() .overlay(new Layer().publicId("video:bike_stunt")).effect("reverse").flags("splice").chain() .overlay(new Layer().publicId("video:bike_stunt")).effect("accelerate:-50").flags("splice")).resourceType("video").generate("bike_stunt.mp4");
Add the Bevel effect to any image. We will create a generalized transformation URL, which could be used to apply the bevel effect to any image. In order to do this, we'll make use of variables, overlays, the colorize effect, the cut-out effect, and more. Here is the final result - The Bevel effect
The Bevel effect
Triangle Image
Top Bevel
Video profile are an awesome way to allow your users to inject some personality into their profile in dynamic and creative ways.
If a picture is worth a thousand words, an animated one must be worth even more. Nowadays, email marketers are pushing the boundaries of email design, by using animated GIFs to display their products and services in action.
const cloudinary = require('cloudinary'); const async = require("async"); cloudinary.config({ cloud_name: "<cloud_name>", api_key: "<api_key>", api_secret: "<api_secret>" }); var baseImageUrl = "https://res.cloudinary.com/yakir/image/upload/v1578887770/r69yfic0g5ndp7vkv5rb.png"; var backgroundColors = ["#D9D9D9", "#F1E7DD", "#F7EABC", "#C7DCE8", "#FFFFFF"]; var delayBetweenFrames = 500; createGif(baseImageUrl, backgroundColors, delayBetweenFrames, function (err, gifUrl) { if (err) { console.log(err) } else { console.log(gifUrl) } }) function createGif(image_url, colors, delay, callback) { //1. Generate a unique tag for this uploading process. let tag = new Date().getTime(); let imagesToUpload = []; for (var i = 0, len = colors.length; i < len; i++) { imagesToUpload.push({ src: image_url, params: { tags: [tag], folder: 'tmp', background: colors[i] } }); }; var uploadTasks = []; imagesToUpload.map(function (element, index, items) { uploadTasks.push(function (callback) { console.log("Uploading image #" + index) cloudinary.v2.uploader.upload(element.src, element.params, function (err, result) { if (err) { return callback(err) } callback(null, result); }); }); }); //2. Uploading the base product image with different background-color async.parallelLimit(uploadTasks, 5, function (err) { //3. Call the `multi` method to generate gif with the tag console.log("Generating gif...") cloudinary.v2.uploader.multi(tag, { delay: delay }, function (error, gif) { if (error) { return callback(error) } else { //4. Delete the temporary images we used to generate the gif console.log("Deleting tmp images...") cloudinary.v2.api.delete_resources_by_tag(tag, {}, function (error, result) { if (error) { return callback(error) } else { console.log("Done! :)") callback(null, gif.secure_url) } }); } }); }); }
