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).
For example, let’s upload this kitten image 6 times -
Ruby:
cl_image_tag("sample_image.jpg", :width=>400, :height=>300, :crop=>"fill")
PHP v1:
cl_image_tag("sample_image.jpg", array("width"=>400, "height"=>300, "crop"=>"fill"))
PHP v2:
(new ImageTag('sample_image.jpg'))
->resize(Resize::fill()->width(400)->height(300));
Python:
CloudinaryImage("sample_image.jpg").image(width=400, height=300, crop="fill")
Node.js:
cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
Java:
cloudinary.url().transformation(new Transformation().width(400).height(300).crop("fill")).imageTag("sample_image.jpg");
JS:
cloudinary.imageTag('sample_image.jpg', {width: 400, height: 300, crop: "fill"}).toHtml();
jQuery:
$.cloudinary.image("sample_image.jpg", {width: 400, height: 300, crop: "fill"})
React:
<Image publicId="sample_image.jpg" >
<Transformation width="400" height="300" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="sample_image.jpg" >
<cld-transformation width="400" height="300" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="sample_image.jpg" >
<cl-transformation width="400" height="300" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(300).Crop("fill")).BuildImageTag("sample_image.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(400).height(300).crop("fill")).generate("sample_image.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(300).setCrop("fill")).generate("sample_image.jpg")!, cloudinary: cloudinary)
One for each angle of 0,60,120,180,240,300 with the “twisted_kitten” tag. The result GIF is ready for further transformations and delivery -
Ruby:
cl_image_tag("twisted_kitten.gif", :type=>"multi")
PHP v1:
cl_image_tag("twisted_kitten.gif", array("type"=>"multi"))
PHP v2:
(new ImageTag('twisted_kitten.gif'))
->deliveryType('multi');
Python:
CloudinaryImage("twisted_kitten.gif").image(type="multi")
Node.js:
cloudinary.image("twisted_kitten.gif", {type: "multi"})
Java:
cloudinary.url().type("multi").imageTag("twisted_kitten.gif");
JS:
cloudinary.imageTag('twisted_kitten.gif', {type: "multi"}).toHtml();
jQuery:
$.cloudinary.image("twisted_kitten.gif", {type: "multi"})
React:
<Image publicId="twisted_kitten.gif" type="multi">
</Image>
Vue.js:
<cld-image publicId="twisted_kitten.gif" type="multi">
</cld-image>
Angular:
<cl-image public-id="twisted_kitten.gif" type="multi">
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Action("multi").BuildImageTag("twisted_kitten.gif")
Android:
MediaManager.get().url().type("multi").generate("twisted_kitten.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "multi").generate("twisted_kitten.gif")!, cloudinary: cloudinary)
