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") )))
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)
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) } }); } }); }); }
There are many cases where you need to adjust the background of your images.
Rotating and flipping videos on Cloudinary is a cakewalk. To rotate a video to an angle you desire, set the angle parameter. To mirror a video and vertically or horizontally flip it, set vflip or hflip as the angle value. Examples:
To add custom engravings to your products, such as gadgets like watches, electronic devices, and the like, you could use the paid tools on the market. Why not leverage Cloudinary to do so? It’s a simple tool that seamlessly delivers excellent results—for free.
Original
With Text
,co_white,g_center,y_-189,x_1/w_250/scout-chrono.png "With Text")
Round Text
,co_white,e_distort:arc:60,g_center,y_-189,x_1/w_250/scout-chrono.png "Round Text")
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!Sample Text!"]], :transformation=>[ {:quality=>"auto", :flags=>"lossy"}, {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :gravity=>"center", :y=>-189, :x=>1}, {:width=>250, :crop=>"scale"} ])
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!Sample Text!"), "transformation"=>array( array("quality"=>"auto", "flags"=>"lossy"), array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "gravity"=>"center", "y"=>-189, "x"=>1), array("width"=>250, "crop"=>"scale") )))
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!Sample Text!"}, transformation=[ {'quality': "auto", 'flags': "lossy"}, {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'gravity': "center", 'y': -189, 'x': 1}, {'width': 250, 'crop': "scale"} ])
cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [ {quality: "auto", flags: "lossy"}, {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", gravity: "center", y: -189, x: 1}, {width: 250, crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .variables(variable("$text","!Sample Text!")).chain() .quality("auto").flags("lossy").chain() .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain() .width(250).crop("scale")).imageTag("scout-chrono.png");
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!Sample Text!"]], transformation: [ {quality: "auto", flags: "lossy"}, {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1}, {width: 250, crop: "scale"} ]}).toHtml();
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [ {quality: "auto", flags: "lossy"}, {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1}, {width: 250, crop: "scale"} ]})
<cld-image publicId="scout-chrono.png" > <cld-transformation quality="auto" flags="lossy" /> <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" gravity="center" y="-189" x="1" /> <cld-transformation width="250" crop="scale" /> </cld-image>
<cl-image public-id="scout-chrono.png" > <cl-transformation quality="auto" flags="lossy"> </cl-transformation> <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" gravity="center" y="-189" x="1"> </cl-transformation> <cl-transformation width="250" crop="scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Quality("auto").Flags("lossy").Chain() .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Gravity("center").Y(-189).X(1).Chain() .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
MediaManager.get().url().transformation(new Transformation() .variables(variable("$text","!Sample Text!")).chain() .quality("auto").flags("lossy").chain() .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain() .width(250).crop("scale")).generate("scout-chrono.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setQuality("auto").setFlags("lossy").chain() .setOverlay("text:futura_50:%24%28text%29").setColor("white").setGravity("center").setY(-189).setX(1).chain() .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
Adding watermarks to videos on Cloudinary yields many enhancements, involving only a few simple steps. The sections below describe the various scenarios along with examples.
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.
Original
Overlaid
,y_0.4,co_red/$title_ctx:!title!/l_text:arial_22_bold:$(title),y_0.28/courtfrasco.jpg "Overlaid")
Templatized
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} ])
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) )))
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} ])
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"} ]})
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");
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();
$.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"} ]})
<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>
<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>
<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>
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")
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");
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)
You can add text dynamically to the image by using overlays with syntax l_ in the URL.
Here's an example of a URL with on-the-fly generated text transformation:
Dynamic style
Dynamic style
sky
sky
Center an object within an image with a solid background. Do this by first trimming the background around the object (e_trim) and then pad (c_lpad) and resize the canvas to the image's initial width (w_iw) and height (h_ih).
Original
Cut out any shape from an image. Do this by having your own custom image as the mask for the cutout by setting overlay parameter as your mask image's public ID and chaining a transformation with effect parameter as cut_out and flags parameter as layer_apply (l_<public_id>/e_cut_out,fl_layer_apply in URLs).
Original
Custom cut out
Semi-transparency
You don't have to wait to go to a theme park to take an old-timey photograph with your family. Instead, you can use Cloudinary to quickly and easily create this effect on any of your current images.
Old timey photograph
Baby with bubbles picture
Old piece of parchment
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array( array("width"=>1000, "crop"=>"scale"), array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter")), array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>"relative", "opacity"=>40), array("effect"=>"sepia") )))
CloudinaryImage("mac-bubbles.jpg").image(transformation=[ {'width': 1000, 'crop': "scale"}, {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]}, {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': "relative", 'opacity': 40}, {'effect': "sepia"} ])
cloudinary.url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain() .effect("sepia")).imageTag("mac-bubbles.jpg");
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [ {width: 1000, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40}, {effect: "sepia"} ]}).toHtml();
$.cloudinary.image("mac-bubbles.jpg", {transformation: [ {width: 1000, crop: "scale"}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]}, {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40}, {effect: "sepia"} ]})
<Image publicId="mac-bubbles.jpg" > <Transformation width="1000" crop="scale" /> <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} /> <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" /> <Transformation effect="sepia" /> </Image>
<cld-image publicId="mac-bubbles.jpg" > <cld-transformation width="1000" crop="scale" /> <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} /> <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" /> <cld-transformation effect="sepia" /> </cld-image>
<cl-image public-id="mac-bubbles.jpg" > <cl-transformation width="1000" crop="scale"> </cl-transformation> <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}> </cl-transformation> <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40"> </cl-transformation> <cl-transformation effect="sepia"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(1000).Crop("scale").Chain() .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain() .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain() .Effect("sepia")).BuildImageTag("mac-bubbles.jpg")
MediaManager.get().url().transformation(new Transformation() .width(1000).crop("scale").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain() .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain() .effect("sepia")).generate("mac-bubbles.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(1000).setCrop("scale").chain() .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain() .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40).chain() .setEffect("sepia")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Creating a dynamic and engaging animated video preview (as opposed to a static image) can have a lot of benefits:
Apply a pixelization effect to an image by setting the effect parameter to pixelate (e_pixelate in URLs). You can choose to pixelate the whole image or just a certain region of the image, and the size of the squares is customizable.
Original
Pixeling an image
Pixeling a region
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setEffect("pixelate")).generate("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")!, cloudinary: cloudinary)
Color an image to any other color simply by setting the effect parameter to colorize (e_colorize in URLs), then set the color you want as the value of the color parameter (co in URLs). The color can be given by either it's name (e.g., green) or by an RGB value (e.g., 00FF00).
Original
Solid colorizing
Custom intensity
Rotate an image by setting the angle parameter (a in URLs) to a given value representing the degree of rotation. A positive value rotates the image clockwise while a negative value rotates it counterclockwise.
Original
Rotated 90°
Rotated overlay
