Cloudinary cookbook background

Cloudinary Cookbook

Recipes of the Upload tag

← View popular recipes
Find recipes by tags:
View all tags

Adding a watermark to a video

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.

Original Video

Full video watermark

Mid-video watermark

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/abbey_road.mp4
Ruby:
Copy to clipboard
cl_video_tag("abbey_road")
PHP:
Copy to clipboard
cl_video_tag("abbey_road")
Python:
Copy to clipboard
CloudinaryVideo("abbey_road").video()
Node.js:
Copy to clipboard
cloudinary.video("abbey_road")
Java:
Copy to clipboard
cloudinary.url().videoTag("abbey_road");
JS:
Copy to clipboard
cloudinary.videoTag('abbey_road').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("abbey_road")
React:
Copy to clipboard
<Video publicId="abbey_road" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="abbey_road" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="abbey_road" >

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("abbey_road")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("abbey_road.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("abbey_road.mp4")
Read more
by Maor Gariv
Tags:

Animated gif creation

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).

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_400,h_300,c_fill/sample_image.jpg
Ruby:
Copy to clipboard
cl_image_tag("sample_image.jpg", :width=>400, :height=>300, :crop=>"fill")
PHP:
Copy to clipboard
cl_image_tag("sample_image.jpg", array("width"=>400, "height"=>300, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryImage("sample_image.jpg").image(width=400, height=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(400).height(300).crop("fill")).imageTag("sample_image.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('sample_image.jpg', {width: 400, height: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
React:
Copy to clipboard
<Image publicId="sample_image.jpg" >
  <Transformation width="400" height="300" crop="fill" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="sample_image.jpg" >
  <cld-transformation width="400" height="300" crop="fill" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="sample_image.jpg" >
  <cl-transformation width="400" height="300" crop="fill">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(300).Crop("fill")).BuildImageTag("sample_image.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(400).height(300).crop("fill")).generate("sample_image.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(300).setCrop("fill")).generate("sample_image.jpg")!, cloudinary: cloudinary)
Read more
by Maor Gariv
Tags:

Streamlining the Process of Product Image Creation

Whether you've just launched a Shopify site for your latest product, or you're a multibillion dollar retailer with expansive design teams, you probably have significant room to improve and make more efficient the process of how raw photographs are transformed into compelling images on your website’s product pages.

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Photo with Background Removed

Processed Product Photo

Processed Product Photo
URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/wood_chair_orig.jpg
Ruby:
Copy to clipboard
cl_image_tag("wood_chair_orig.jpg")
PHP:
Copy to clipboard
cl_image_tag("wood_chair_orig.jpg")
Python:
Copy to clipboard
CloudinaryImage("wood_chair_orig.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("wood_chair_orig.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("wood_chair_orig.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('wood_chair_orig.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("wood_chair_orig.jpg")
React:
Copy to clipboard
<Image publicId="wood_chair_orig.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="wood_chair_orig.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="wood_chair_orig.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("wood_chair_orig.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("wood_chair_orig.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("wood_chair_orig.jpg")!, cloudinary: cloudinary)
Read more
by Josh Slivken
Tags: