Using content aware padding
There are many cases where you need to adjust the background of your images.
Cloudinary Cookbook
Most popular cookbook recipes
Automatically Flip Videos
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:
Leveraging the Image-Overlay Effect for Preview of Customized Engravings
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")
URL:
Ruby:
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"} ])
PHP v1:
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") )))
PHP v2:
(new ImageTag('scout-chrono.png')) ->addVariable(Variable::set('text', 'Sample Text')) ->delivery(Delivery::format(Format::auto()) ->lossy()) ->delivery(Delivery::quality(Quality::auto())) ->overlay( Overlay::source(Source::text('$(text)', (new TextStyle('futura', 50))) ->textColor(Color::WHITE)) ->position((new Position()) ->gravity(Gravity::compass(Compass::center())) ->offsetX(1)->offsetY(-189))) ->resize(Resize::scale()->width(250));
Python:
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"} ])
Node.js:
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"} ]})
Java:
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");
JS:
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();
jQuery:
$.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"} ]})
React:
<Image publicId="scout-chrono.png" variables={[["$text", "!Sample Text!"]]}> <Transformation quality="auto" flags="lossy" /> <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" gravity="center" y="-189" x="1" /> <Transformation width="250" crop="scale" /> </Image>
Vue.js:
<cld-image publicId="scout-chrono.png" :variables="[['$text', '!Sample Text!']]"> <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>
Angular:
<cl-image public-id="scout-chrono.png" variables="[['$text', '!Sample Text!']]"> <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>
.NET:
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")
Android:
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");
iOS:
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 Video Watermark as an Overlay
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.
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.
Original
Overlaid
,y_0.4,co_red/$title_ctx:!title!/l_text:arial_22_bold:$(title),y_0.28/courtfrasco.jpg "Overlaid")
Templatized
URL:
Ruby:
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 v1:
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") )))
PHP v2:
(new ImageTag('courtfrasco.jpg')) ->resize(Resize::scale()->width(200)) ->addVariable(Variable::setFromContext('offer', 'offer')) ->overlay( Overlay::source(Source::text('$(offer)', (new TextStyle('arial', 20))) ->textColor(Color::RED)) ->position((new Position()) ->offsetY(0.4))) ->addVariable(Variable::setFromContext('title', 'title')) ->overlay( Overlay::source( Source::text('$(title)', (new TextStyle('arial', 22)) ->fontWeight(FontWeight::bold()))) ->position((new Position()) ->offsetY(0.28) ));
Python:
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:
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:
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:
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:
$.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:
<Image publicId="courtfrasco.jpg" variables={[["$offer", "ctx:!offer!"], ["$title", "ctx:!title!"]]}> <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:
<cld-image publicId="courtfrasco.jpg" :variables="[['$offer', 'ctx:!offer!'], ['$title', 'ctx:!title!']]"> <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:
<cl-image public-id="courtfrasco.jpg" variables="[['$offer', 'ctx:!offer!'], ['$title', 'ctx:!title!']]"> <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:
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:
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:
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)
Text overlays flowing together irrespective of text size
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 objects using trim
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
Custom shapes cut out
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
Turn your pictures in to old photographs
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
URL:
Ruby:
PHP v1:
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") )))
PHP v2:
(new ImageTag('mac-bubbles.jpg')) ->resize(Resize::scale()->width(1000)) ->reshape( Reshape::cutByImage(Source::image('torn-paper') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(1.0)->height(1.0)->relative())))) ->overlay( Overlay::source(Source::image('torn-paper') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(1.0)->height(1.0)->relative()) ->adjust(Adjust::opacity(40))))) ->effect(Effect::sepia());
Python:
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"} ])
Node.js:
Java:
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");
JS:
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();
jQuery:
$.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"} ]})
React:
<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>
Vue.js:
<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>
Angular:
<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>
.NET:
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")
Android:
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");
iOS:
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)
Generating Video Preview Clips
Creating a dynamic and engaging animated video preview (as opposed to a static image) can have a lot of benefits:
- Improves the ability to captures a user’s attention for the content
- More clearly demonstrates that there is video content available
- Provides several preview clips, allowing the user to decide if the video is relevant pre-click
Pixelate an image or a region
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
URL:
Ruby:
PHP v1:
PHP v2:
Python:
Node.js:
Java:
JS:
jQuery:
React:
Vue.js:
Angular:
.NET:
Android:
iOS:
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 a picture
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
Image rotation
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
Relative size overlays
Resize overlays to a given percentage of the main image, either related to width, height or both by setting the flags parameter to relative (fl_relative in URLs) while also setting the width and/or height parameters to the percentage value you need, represented by a decimal value (e.g., 0.4 for 40%).
Main image
100% width-related
Including text
Change image opacity
Change the image's opacity level by setting the opacity parameter (o in URLs) to a value between 0 to 100 which represents the visibility percentage. Control the opacity level of either the main image or overlaid images.
Original
50% opacity
Flashlight effect
Overlay an image over detected faces
Overlay another image of your choice on top of the faces which are automatically detected in your image. This is done by setting the overlay parameter (l in URLs) to the overlay image's public ID while setting the gravity parameter to faces (g_faces in URLs).
Original
Faces overlay
Funny overlay
URL:
Ruby:
PHP v1:
PHP v2:
(new ImageTag('http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg')) ->overlay( Overlay::source(Source::image('badge') ->transformation((new ImageTransformation()) ->resize(Resize::scale()->width(30)))) ->position((new Position()) ->gravity(Gravity::focusOn(FocusOn::faces())))) ->deliveryType('fetch');
Python:
Node.js:
Java:
JS:
jQuery:
React:
Vue.js:
Angular:
.NET:
Android:
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation().setOverlay("badge").setGravity("faces").setWidth(30)).generate("http://upload.wikimedia.org/wikipedia/commons/4/45/Spain_national_football_team_Euro_2012_final.jpg")!, cloudinary: cloudinary)
Blur or pixelate faces
Hide faces in your images by telling Cloudinary to either blur or automatically pixelate the detected faces. This is done by setting the effect parameter to either blur_faces or pixelate_faces (e_blur_faces or e_pixelate_faces in URLs). The level of blurring and the size of the pixel squares can customized.
Original
Blur faces
Pixelate faces
Add a border to images
Add a border to your images by setting the value of the border parameter (bo in URLs). The border's color, width and opacity can be customized dynamically, and borders can be applied either on main images or on overlaid images.
Original
Bordered
Colored circle
Trim photo background
Apply the trim filter to remove the edges around the image. Do this by setting the effect parameter to trim (e_trim in URLs). You can customize the color similarity tolerance between 0 and 100. The default level is10`.
Original
Trimmed
Custom level
Adjust the hue value of images
Create a different mixture of colors for your images with the Hue filter. This can be applied by setting the effect parameter to hue (e_hue in URLs). The hue level can be customized.
Original
Default level
Custom level
