Cloudinary supports 3D models in various different formats and allows certain transformations as described below.
Three models are used in the examples below:
CldLogo3D.glb : a GLB file, uploaded as an image
asset type.
DamagedHelmet3D.gltz : a zip file, uploaded as an image
asset type, containing a glTF file and other associated files.
foyer-table.fbxz : a zip file, uploaded as an image
asset type, containing an FBX file and other associated files. [© HippoStance ]
To generate a 360 animated image from a 3D model, use the animated flag and specify a file format that supports animation, such as GIF (f_gif,fl_animated
). The following example generates a 360 animated GIF from a GLB model of the Cloudinary logo (in addition to applying other image transformations):
Ruby (cloudinary 1.x):
cl_image_tag(" docs/CldLogo3D " , :transformation =>[
{:delay =>" 10 " , :flags =>" animated " , :fetch_format =>" gif " },
{:height =>200 , :width =>400 , :crop =>" fill " },
{:background =>" #3448C5 " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/CldLogo3D ' ))
->transcode(Transcode ::toAnimated(
AnimatedFormat ::gif()))
->animated(Animated ::edit()->delay(10 ))
->resize(Resize ::fill()->width(400 )
->height(200 ))
->backgroundColor(Color ::rgb(" 3448C5 " ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/CldLogo3D " , array (" transformation " =>array (
array (" delay " =>" 10 " , " flags " =>" animated " , " fetch_format " =>" gif " ),
array (" height " =>200 , " width " =>400 , " crop " =>" fill " ),
array (" background " =>" #3448C5 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/CldLogo3D " ).image(transformation=[
{' delay ' : " 10 " , ' flags ' : " animated " , ' fetch_format ' : " gif " },
{' height ' : 200 , ' width ' : 400 , ' crop ' : " fill " },
{' background ' : " #3448C5 " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" docs/CldLogo3D " , {transformation : [
{delay : " 10 " , flags : " animated " , fetch_format : " gif " },
{height : 200 , width : 400 , crop : " fill " },
{background : " #3448C5 " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" gif " ).chain()
.height(200 ).width(400 ).crop(" fill " ).chain()
.background(" #3448C5 " )).imageTag(" docs/CldLogo3D " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/CldLogo3D " )
.transcode(toAnimated(" gif " ))
.animated(edit().delay(10 ))
.resize(fill().width(400 ).height(200 ))
.backgroundColor(" #3448C5 " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/CldLogo3D ' , {transformation : [
{delay : " 10 " , flags : " animated " , fetchFormat : " gif " },
{height : 200 , width : 400 , crop : " fill " },
{background : " #3448C5 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/CldLogo3D " , {transformation : [
{delay : " 10 " , flags : " animated " , fetch_format : " gif " },
{height : 200 , width : 400 , crop : " fill " },
{background : " #3448C5 " }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/CldLogo3D " )
.transcode(toAnimated(" gif " ))
.animated(edit().delay(10 ))
.resize(fill().width(400 ).height(200 ))
.backgroundColor(" #3448C5 " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/CldLogo3D " >
<Transformation delay =" 10 " flags =" animated " fetchFormat =" gif " />
<Transformation height =" 200 " width =" 400 " crop =" fill " />
<Transformation background =" #3448C5 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" docs/CldLogo3D " >
<cld-transformation delay =" 10 " flags =" animated " fetch-format =" gif " />
<cld-transformation height =" 200 " width =" 400 " crop =" fill " />
<cld-transformation background =" #3448C5 " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/CldLogo3D " )
.transcode(toAnimated(" gif " ))
.animated(edit().delay(10 ))
.resize(fill().width(400 ).height(200 ))
.backgroundColor(" #3448C5 " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/CldLogo3D " >
<cl-transformation delay=" 10 " flags=" animated " fetch-format=" gif " >
</ cl-transformation>
<cl-transformation height="200" width="400" crop="fill">
< / cl-transformation>
<cl-transformation background=" #3448C5 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Delay(" 10 " ).Flags(" animated " ).FetchFormat(" gif " ).Chain()
.Height(200 ).Width(400 ).Crop(" fill " ).Chain()
.Background(" #3448C5 " )).BuildImageTag(" docs/CldLogo3D " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setDelay(" 10 " ).setFlags(" animated " ).setFetchFormat(" gif " ).chain()
.setHeight(200 ).setWidth(400 ).setCrop(" fill " ).chain()
.setBackground(" #3448C5 " )).generate(" docs/CldLogo3D " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" gif " ).chain()
.height(200 ).width(400 ).crop(" fill " ).chain()
.background(" #3448C5 " )).generate(" docs/CldLogo3D " );
Kotlin (kotlin-url-gen 1.x):
To generate a 360 video from a 3D model, use the animated flag and specify a video file format , such as MP4 (f_mp4,fl_animated
). The following example generates a 360 video from an FBX model of a foyer table (in addition to applying other image transformations):
3D model zip files are uploaded as image types, so make sure you set the resource_type
parameter to image
when implementing the video tag:
Ruby (cloudinary 1.x):
cl_video_tag(" docs/foyer-table " ,
:resource_type =>" image " ,
:transformation =>[
{:delay =>" 10 " , :flags =>" animated " , :fetch_format =>" mp4 " },
{:height =>300 , :width =>500 , :crop =>" fill " },
{:background =>" #d5d2ca " }]
PHP (cloudinary_php 2.x):
(new VideoTag (' docs/foyer-table ' ))
->transcode(Transcode ::toAnimated(
AnimatedFormat ::videoMp4()))
->animated(Animated ::edit()->delay(10 ))
->resize(Resize ::fill()->width(500 )
->height(300 ))
->backgroundColor(Color ::rgb(" d5d2ca " ))
->assetType(" image " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" docs/foyer-table " , " resource_type " =>" image " , array (" transformation " =>array (
array (" delay " =>" 10 " , " flags " =>" animated " , " fetch_format " =>" mp4 " ),
array (" height " =>300 , " width " =>500 , " crop " =>" fill " ),
array (" background " =>" #d5d2ca " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryVideo(" docs/foyer-table " ).video(resource_type = " image " ,
transformation =
[{' delay ' : " 10 " , ' flags ' : " animated " , ' fetch_format ' : " mp4 " },
{' height ' : 300 , ' width ' : 500 , ' crop ' : " fill " },
{' background ' : " #d5d2ca " }])
Node.js (cloudinary 1.x):
cloudinary.video(" docs/foyer-table " ,
{resource_type : " image " ,
transformation : [
{delay : " 10 " , flags : " animated " , fetch_format : " mp4 " },
{height : 300 , width : 500 , crop : " fill " },
{background : " #d5d2ca " }]}
)
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" mp4 " ).chain()
.height(300 ).width(500 ).crop(" fill " ).chain()
.background(" #d5d2ca " )).videoTag(" docs/foyer-table " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.videoTag(' docs/foyer-table ' , resource_type : " image " , {transformation : [
{delay : " 10 " , flags : " animated " , fetchFormat : " mp4 " },
{height : 300 , width : 500 , crop : " fill " },
{background : " #d5d2ca " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" docs/foyer-table " , {resource_type : " image " , transformation : [
{delay : " 10 " , flags : " animated " , fetch_format : " mp4 " },
{height : 300 , width : 500 , crop : " fill " },
{background : " #d5d2ca " }
]})
React (cloudinary-react 1.x):
<Video publicId =" docs/foyer-table " resourceType =" image " >
<Transformation delay =" 10 " flags =" animated " fetchFormat =" mp4 " />
<Transformation height =" 300 " width =" 500 " crop =" fill " />
<Transformation background =" #d5d2ca " />
</Video>
Vue.js (cloudinary-vue 1.x):
<cld-video publicId=" docs/foyer-table " resourceType=" image " >
<cld-transformation delay =" 10 " flags =" animated " fetch-format =" mp4 " />
<cld-transformation height =" 300 " width =" 500 " crop =" fill " />
<cld-transformation background =" #d5d2ca " />
</ cld-video>
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-video public -id=" docs/foyer-table " resource-type=" image " >
<cl-transformation delay=" 10 " flags=" animated " fetch-format=" mp4 " >
</ cl-transformation>
<cl-transformation height="300" width="500" crop="fill">
< / cl-transformation>
<cl-transformation background=" #d5d2ca " >
</ cl-transformation>
< / cl-video>
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.Delay(" 10 " ).Flags(" animated " ).FetchFormat(" mp4 " ).Chain()
.Height(300 ).Width(500 ).Crop(" fill " ).Chain()
.Background(" #d5d2ca " ))
.ResourceType(" image " )
.BuildVideoTag(" docs/foyer-table " );
iOS (cloudinary 3.x):
cloudinary.createUrl().setResourceType(" image " ).setTransformation(CLDTransformation()
.setDelay(" 10 " ).setFlags(" animated " ).setFetchFormat(" mp4 " ).chain()
.setHeight(300 ).setWidth(500 ).setCrop(" fill " ).chain()
.setBackground(" #d5d2ca " )).generate(" docs/foyer-table " )
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" mp4 " ).chain()
.height(300 ).width(500 ).crop(" fill " ).chain()
.background(" #d5d2ca " ))
.resourceType(" image " ).generate(" docs/foyer-table " );
Kotlin (kotlin-url-gen 1.x):
Go (cloudinary-go 1.x):
myImg, err := cld.Image(" docs/foyer-table " )
myImg.Transformation = " dl_10,f_mp4,fl_animated/c_fill,h_300,w_500/b_rgb:d5d2ca "
url, err := myImg.String()
You can generate a single image from a 3D model by setting the format to an image format such as PNG or JPG.
For example, the DamagedHelmet3D.gltz
file can be requested as a PNG file (f_png
) as follows:
Ruby (cloudinary 1.x):
cl_image_tag(" DamagedHelmet3D.gltz " , :fetch_format =>" png " )
PHP (cloudinary_php 2.x):
(new ImageTag (' DamagedHelmet3D.gltz ' ))
->delivery(Delivery ::format(
Format ::png()));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" DamagedHelmet3D.gltz " , array (" fetch_format " =>" png " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" DamagedHelmet3D.gltz " ).image(fetch_format=" png " )
Node.js (cloudinary 1.x):
cloudinary.image(" DamagedHelmet3D.gltz " , {fetch_format : " png " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().fetchFormat(" png " )).imageTag(" DamagedHelmet3D.gltz " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" DamagedHelmet3D.gltz " ).delivery(format(png()));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' DamagedHelmet3D.gltz ' , {fetchFormat : " png " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" DamagedHelmet3D.gltz " , {fetch_format : " png " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" DamagedHelmet3D.gltz " ).delivery(format(png()));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" DamagedHelmet3D.gltz " >
<Transformation fetchFormat =" png " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" DamagedHelmet3D.gltz " >
<cld-transformation fetch-format =" png " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" DamagedHelmet3D.gltz " ).delivery(format(png()));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" DamagedHelmet3D.gltz " >
<cl-transformation fetch-format=" png " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat(" png " )).BuildImageTag(" DamagedHelmet3D.gltz " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat(" png " )).generate(" DamagedHelmet3D.gltz " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().fetchFormat(" png " )).generate(" DamagedHelmet3D.gltz " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" DamagedHelmet3D.gltz " )
delivery(Delivery.format(
Format .png()))
}.generate()
Or, by specifying the .png extension:
Ruby (cloudinary 1.x):
cl_image_tag(" DamagedHelmet3D.png " )
PHP (cloudinary_php 2.x):
(new ImageTag (' DamagedHelmet3D.png ' ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" DamagedHelmet3D.png " )
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" DamagedHelmet3D.png " ).image()
Node.js (cloudinary 1.x):
cloudinary.image(" DamagedHelmet3D.png " )
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().imageTag(" DamagedHelmet3D.png " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" DamagedHelmet3D.png " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' DamagedHelmet3D.png ' ).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" DamagedHelmet3D.png " )
React (@cloudinary/react 1.x):
new CloudinaryImage(" DamagedHelmet3D.png " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" DamagedHelmet3D.png " >
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" DamagedHelmet3D.png " >
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" DamagedHelmet3D.png " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" DamagedHelmet3D.png " >
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.BuildImageTag(" DamagedHelmet3D.png " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().generate(" DamagedHelmet3D.png " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().generate(" DamagedHelmet3D.png " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" DamagedHelmet3D.png " )
}.generate()
You can then apply further transformations to the image, for example:
Ruby (cloudinary 1.x):
cl_image_tag(" DamagedHelmet3D " , :transformation =>[
{:fetch_format =>" png " },
{:angle =>90 },
{:aspect_ratio =>" 1 " , :gravity =>" auto " , :height =>200 , :crop =>" fill " },
{:background =>" #a17ec5 " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' DamagedHelmet3D ' ))
->delivery(Delivery ::format(
Format ::png()))
->rotate(Rotate ::byAngle(90 ))
->resize(Resize ::fill()->height(200 )
->aspectRatio(1.0 )
->gravity(
Gravity ::autoGravity())
)
->backgroundColor(Color ::rgb(" a17ec5 " ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" DamagedHelmet3D " , array (" transformation " =>array (
array (" fetch_format " =>" png " ),
array (" angle " =>90 ),
array (" aspect_ratio " =>" 1 " , " gravity " =>" auto " , " height " =>200 , " crop " =>" fill " ),
array (" background " =>" #a17ec5 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" DamagedHelmet3D " ).image(transformation=[
{' fetch_format ' : " png " },
{' angle ' : 90 },
{' aspect_ratio ' : " 1 " , ' gravity ' : " auto " , ' height ' : 200 , ' crop ' : " fill " },
{' background ' : " #a17ec5 " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" DamagedHelmet3D " , {transformation : [
{fetch_format : " png " },
{angle : 90 },
{aspect_ratio : " 1 " , gravity : " auto " , height : 200 , crop : " fill " },
{background : " #a17ec5 " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.fetchFormat(" png " ).chain()
.angle(90 ).chain()
.aspectRatio(" 1 " ).gravity(" auto " ).height(200 ).crop(" fill " ).chain()
.background(" #a17ec5 " )).imageTag(" DamagedHelmet3D " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" DamagedHelmet3D " )
.delivery(format(png()))
.rotate(byAngle(90 ))
.resize(
fill()
.height(200 )
.aspectRatio(" 1.0 " )
.gravity(autoGravity())
)
.backgroundColor(" #a17ec5 " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' DamagedHelmet3D ' , {transformation : [
{fetchFormat : " png " },
{angle : 90 },
{aspectRatio : " 1 " , gravity : " auto " , height : 200 , crop : " fill " },
{background : " #a17ec5 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" DamagedHelmet3D " , {transformation : [
{fetch_format : " png " },
{angle : 90 },
{aspect_ratio : " 1 " , gravity : " auto " , height : 200 , crop : " fill " },
{background : " #a17ec5 " }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" DamagedHelmet3D " )
.delivery(format(png()))
.rotate(byAngle(90 ))
.resize(
fill()
.height(200 )
.aspectRatio(" 1.0 " )
.gravity(autoGravity())
)
.backgroundColor(" #a17ec5 " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" DamagedHelmet3D " >
<Transformation fetchFormat =" png " />
<Transformation angle =" 90 " />
<Transformation aspectRatio =" 1 " gravity =" auto " height =" 200 " crop =" fill " />
<Transformation background =" #a17ec5 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" DamagedHelmet3D " >
<cld-transformation fetch-format =" png " />
<cld-transformation angle =" 90 " />
<cld-transformation aspect-ratio =" 1 " gravity =" auto " height =" 200 " crop =" fill " />
<cld-transformation background =" #a17ec5 " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" DamagedHelmet3D " )
.delivery(format(png()))
.rotate(byAngle(90 ))
.resize(
fill()
.height(200 )
.aspectRatio(" 1.0 " )
.gravity(autoGravity())
)
.backgroundColor(" #a17ec5 " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" DamagedHelmet3D " >
<cl-transformation fetch-format=" png " >
</ cl-transformation>
<cl-transformation angle="90">
< / cl-transformation>
<cl-transformation aspect-ratio=" 1 " gravity=" auto " height=" 200 " crop=" fill " >
</ cl-transformation>
<cl-transformation background="#a17ec5">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.FetchFormat(" png " ).Chain()
.Angle(90 ).Chain()
.AspectRatio(" 1 " ).Gravity(" auto " ).Height(200 ).Crop(" fill " ).Chain()
.Background(" #a17ec5 " )).BuildImageTag(" DamagedHelmet3D " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setFetchFormat(" png " ).chain()
.setAngle(90 ).chain()
.setAspectRatio(" 1 " ).setGravity(" auto " ).setHeight(200 ).setCrop(" fill " ).chain()
.setBackground(" #a17ec5 " )).generate(" DamagedHelmet3D " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.fetchFormat(" png " ).chain()
.angle(90 ).chain()
.aspectRatio(" 1 " ).gravity(" auto " ).height(200 ).crop(" fill " ).chain()
.background(" #a17ec5 " )).generate(" DamagedHelmet3D " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" DamagedHelmet3D " )
delivery(Delivery.format(
Format .png()))
rotate(Rotate.byAngle(90 ))
resize(Resize.fill() { height(200 )
aspectRatio(1.0F )
gravity(
Gravity.autoGravity())
})
backgroundColor(Color .rgb(" a17ec5 " ))
}.generate()
You can optimize the mesh buffer in glTF files using Draco compression . To apply Draco compression, use the draco
flag (fl_draco
in URLs):
Ruby (cloudinary 1.x):
cl_image_tag(" DamagedHelmet3D.gltz " , :flags =>" draco " )
PHP (cloudinary_php 2.x):
(new ImageTag (' DamagedHelmet3D.gltz ' ))
->addFlag(" draco " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" DamagedHelmet3D.gltz " , array (" flags " =>" draco " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" DamagedHelmet3D.gltz " ).image(flags=" draco " )
Node.js (cloudinary 1.x):
cloudinary.image(" DamagedHelmet3D.gltz " , {flags : " draco " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().flags(" draco " )).imageTag(" DamagedHelmet3D.gltz " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" DamagedHelmet3D.gltz " ).addFlag(" draco " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' DamagedHelmet3D.gltz ' , {flags : " draco " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" DamagedHelmet3D.gltz " , {flags : " draco " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" DamagedHelmet3D.gltz " ).addFlag(" draco " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" DamagedHelmet3D.gltz " >
<Transformation flags =" draco " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" DamagedHelmet3D.gltz " >
<cld-transformation flags =" draco " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" DamagedHelmet3D.gltz " ).addFlag(" draco " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" DamagedHelmet3D.gltz " >
<cl-transformation flags=" draco " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(" draco " )).BuildImageTag(" DamagedHelmet3D.gltz " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(" draco " )).generate(" DamagedHelmet3D.gltz " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().flags(" draco " )).generate(" DamagedHelmet3D.gltz " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" DamagedHelmet3D.gltz " )
addFlag(" draco " )
}.generate()
If you use the .gltz extension, the whole zip file is delivered containing the modified glTF file, referencing the Draco mesh.
If you use the .gltf extension, only the modified glTF file is delivered.
You can deliver any uploaded 3D model in any other format that is supported for encoding.
3D format
Supported for upload as an image type
Supported for encoding
bw
Yes
No
fbx
Yes
No
glb
Yes
Yes
gltf
Yes
Yes
obj
Yes
No
ply
Yes
Yes
u3ma
Yes
No
usdz
No
Yes
So, for example, you can deliver an OBJ model as GLB, or a glTF model as USDZ. However, you cannot deliver a glTF model as FBX, or a PLY model as OBJ.
To deliver a model in a different format, either:
Specify the 3D format as the extension on the public ID (see Example 1 ), or
Set the fetch_format
/format
transformation parameter to the required format (see Example 2 ).
GLB is the binary file format representation of 3D models saved in the GL Transmission Format (glTF).
Deliver the DamagedHelmet3D
glTF model as a GLB model by setting the extension to .glb
, as follows:
Ruby (cloudinary 1.x):
cl_image_tag(" DamagedHelmet3D.glb " )
PHP (cloudinary_php 2.x):
(new ImageTag (' DamagedHelmet3D.glb ' ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" DamagedHelmet3D.glb " )
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" DamagedHelmet3D.glb " ).image()
Node.js (cloudinary 1.x):
cloudinary.image(" DamagedHelmet3D.glb " )
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().imageTag(" DamagedHelmet3D.glb " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" DamagedHelmet3D.glb " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' DamagedHelmet3D.glb ' ).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" DamagedHelmet3D.glb " )
React (@cloudinary/react 1.x):
new CloudinaryImage(" DamagedHelmet3D.glb " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" DamagedHelmet3D.glb " >
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" DamagedHelmet3D.glb " >
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" DamagedHelmet3D.glb " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" DamagedHelmet3D.glb " >
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.BuildImageTag(" DamagedHelmet3D.glb " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().generate(" DamagedHelmet3D.glb " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().generate(" DamagedHelmet3D.glb " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" DamagedHelmet3D.glb " )
}.generate()
USDZ (Universal Scene Description) is a file format for 3D models, introduced by Apple for its ARKit, to display 3D models on iPad, iPhone or Mac.
Deliver the foyer-table
FBX model as a USDZ model by setting the fetch_format
/format
parameter to usdz
, as follows:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/foyer-table.fbxz " , :fetch_format =>" usdz " )
PHP (cloudinary_php 2.x):
(new ImageTag (' docs/foyer-table.fbxz ' ))
->delivery(Delivery ::format(
Format ::usdz()));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/foyer-table.fbxz " , array (" fetch_format " =>" usdz " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/foyer-table.fbxz " ).image(fetch_format=" usdz " )
Node.js (cloudinary 1.x):
cloudinary.image(" docs/foyer-table.fbxz " , {fetch_format : " usdz " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().fetchFormat(" usdz " )).imageTag(" docs/foyer-table.fbxz " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" docs/foyer-table.fbxz " ).delivery(format(usdz()));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/foyer-table.fbxz ' , {fetchFormat : " usdz " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/foyer-table.fbxz " , {fetch_format : " usdz " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" docs/foyer-table.fbxz " ).delivery(format(usdz()));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/foyer-table.fbxz " >
<Transformation fetchFormat =" usdz " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" docs/foyer-table.fbxz " >
<cld-transformation fetch-format =" usdz " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" docs/foyer-table.fbxz " ).delivery(format(usdz()));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/foyer-table.fbxz " >
<cl-transformation fetch-format=" usdz " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat(" usdz " )).BuildImageTag(" docs/foyer-table.fbxz " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat(" usdz " )).generate(" docs/foyer-table.fbxz " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().fetchFormat(" usdz " )).generate(" docs/foyer-table.fbxz " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" docs/foyer-table.fbxz " )
delivery(Delivery.format(
Format .usdz()))
}.generate()
You can replace the texture of a 3D model by using the swap_image effect. This effect takes two parameters, image
and index
. Set image
to a file reference variable , initialized with the public ID of the new texture to use (any image). Set index
to the index in the model to swap with.
In this example, the image at index 0 is replaced with the raindrops image that's in the docs folder:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/CldLogo3D " , :transformation =>[
{:variables =>[[" $new " , " ref:!docs:raindrops! " ]]},
{:effect =>" swap_image:image_$new;index_0 " },
{:delay =>" 10 " , :flags =>" animated " , :fetch_format =>" gif " },
{:height =>200 , :width =>400 , :crop =>" fill " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/CldLogo3D " , array (" transformation " =>array (
array (" variables " =>array (array (" $new " , " ref:!docs:raindrops! " ))),
array (" effect " =>" swap_image:image_ $new ;index_0 " ),
array (" delay " =>" 10 " , " flags " =>" animated " , " fetch_format " =>" gif " ),
array (" height " =>200 , " width " =>400 , " crop " =>" fill " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/CldLogo3D " ).image(transformation=[
{' variables ' : [[" $new " , " ref:!docs:raindrops! " ]]},
{' effect ' : " swap_image:image_$new;index_0 " },
{' delay ' : " 10 " , ' flags ' : " animated " , ' fetch_format ' : " gif " },
{' height ' : 200 , ' width ' : 400 , ' crop ' : " fill " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" docs/CldLogo3D " , {transformation : [
{variables : [[" $new " , " ref:!docs:raindrops! " ]]},
{effect : " swap_image:image_$new;index_0 " },
{delay : " 10 " , flags : " animated " , fetch_format : " gif " },
{height : 200 , width : 400 , crop : " fill " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.variables(variable(" $new " ," ref:!docs:raindrops! " )).chain()
.effect(" swap_image:image_$new;index_0 " ).chain()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" gif " ).chain()
.height(200 ).width(400 ).crop(" fill " )).imageTag(" docs/CldLogo3D " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/CldLogo3D ' , {transformation : [
{variables : [[" $new " , " ref:!docs:raindrops! " ]]},
{effect : " swap_image:image_$new;index_0 " },
{delay : " 10 " , flags : " animated " , fetchFormat : " gif " },
{height : 200 , width : 400 , crop : " fill " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/CldLogo3D " , {transformation : [
{variables : [[" $new " , " ref:!docs:raindrops! " ]]},
{effect : " swap_image:image_$new;index_0 " },
{delay : " 10 " , flags : " animated " , fetch_format : " gif " },
{height : 200 , width : 400 , crop : " fill " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/CldLogo3D " >
<Transformation variables ={ [ [ " $new " , " ref: ! docs:raindrops ! " ] ] } />
<Transformation effect =" swap_image:image_$new;index_0 " />
<Transformation delay =" 10 " flags =" animated " fetchFormat =" gif " />
<Transformation height =" 200 " width =" 400 " crop =" fill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" docs/CldLogo3D " >
<cld-transformation :variables =" [['$new', 'ref:!docs:raindrops!']] " />
<cld-transformation effect =" swap_image:image_$new;index_0 " />
<cld-transformation delay =" 10 " flags =" animated " fetch-format =" gif " />
<cld-transformation height =" 200 " width =" 400 " crop =" fill " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/CldLogo3D " >
<cl-transformation variables=" [['$new', 'ref:!docs:raindrops!']] " >
</ cl-transformation>
<cl-transformation effect="swap_image:image_$new;index_0">
< / cl-transformation>
<cl-transformation delay=" 10 " flags=" animated " fetch-format=" gif " >
</ cl-transformation>
<cl-transformation height="200" width="400" crop="fill">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Variables(" $new " , ref:!docs:raindrops!).Chain()
.Effect(" swap_image:image_$new;index_0 " ).Chain()
.Delay(" 10 " ).Flags(" animated " ).FetchFormat(" gif " ).Chain()
.Height(200 ).Width(400 ).Crop(" fill " )).BuildImageTag(" docs/CldLogo3D " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.chain()
.setEffect(" swap_image:image_$new;index_0 " ).chain()
.setDelay(" 10 " ).setFlags(" animated " ).setFetchFormat(" gif " ).chain()
.setHeight(200 ).setWidth(400 ).setCrop(" fill " )).generate(" docs/CldLogo3D " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.variables(variable(" $new " ," ref:!docs:raindrops! " )).chain()
.effect(" swap_image:image_$new;index_0 " ).chain()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" gif " ).chain()
.height(200 ).width(400 ).crop(" fill " )).generate(" docs/CldLogo3D " );
Kotlin (kotlin-url-gen 1.x):
You can also use a base64 encoded URL of a remote image as the texture by setting the file reference variable to !fetch:<encoded URL>!
. For example:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/CldLogo3D " , :transformation =>[
{:variables =>[[" $new " , " ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " ]]},
{:effect =>" swap_image:image_$new;index_0 " },
{:delay =>" 10 " , :flags =>" animated " , :fetch_format =>" gif " },
{:height =>200 , :width =>400 , :crop =>" fill " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/CldLogo3D " , array (" transformation " =>array (
array (" variables " =>array (array (" $new " , " ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " ))),
array (" effect " =>" swap_image:image_ $new ;index_0 " ),
array (" delay " =>" 10 " , " flags " =>" animated " , " fetch_format " =>" gif " ),
array (" height " =>200 , " width " =>400 , " crop " =>" fill " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/CldLogo3D " ).image(transformation=[
{' variables ' : [[" $new " , " ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " ]]},
{' effect ' : " swap_image:image_$new;index_0 " },
{' delay ' : " 10 " , ' flags ' : " animated " , ' fetch_format ' : " gif " },
{' height ' : 200 , ' width ' : 400 , ' crop ' : " fill " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" docs/CldLogo3D " , {transformation : [
{variables : [[" $new " , " ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " ]]},
{effect : " swap_image:image_$new;index_0 " },
{delay : " 10 " , flags : " animated " , fetch_format : " gif " },
{height : 200 , width : 400 , crop : " fill " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.variables(variable(" $new " ," ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " )).chain()
.effect(" swap_image:image_$new;index_0 " ).chain()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" gif " ).chain()
.height(200 ).width(400 ).crop(" fill " )).imageTag(" docs/CldLogo3D " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/CldLogo3D ' , {transformation : [
{variables : [[" $new " , " ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " ]]},
{effect : " swap_image:image_$new;index_0 " },
{delay : " 10 " , flags : " animated " , fetchFormat : " gif " },
{height : 200 , width : 400 , crop : " fill " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/CldLogo3D " , {transformation : [
{variables : [[" $new " , " ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " ]]},
{effect : " swap_image:image_$new;index_0 " },
{delay : " 10 " , flags : " animated " , fetch_format : " gif " },
{height : 200 , width : 400 , crop : " fill " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/CldLogo3D " >
<Transformation variables ={ [ [ " $new " , " ref: ! fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn ! " ] ] } />
<Transformation effect =" swap_image:image_$new;index_0 " />
<Transformation delay =" 10 " flags =" animated " fetchFormat =" gif " />
<Transformation height =" 200 " width =" 400 " crop =" fill " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (cloudinary-vue 1.x):
<cld-image public -id=" docs/CldLogo3D " >
<cld-transformation :variables =" [['$new', 'ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!']] " />
<cld-transformation effect =" swap_image:image_$new;index_0 " />
<cld-transformation delay =" 10 " flags =" animated " fetch-format =" gif " />
<cld-transformation height =" 200 " width =" 400 " crop =" fill " />
</ cld-image>
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/CldLogo3D " >
<cl-transformation variables=" [['$new', 'ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!']] " >
</ cl-transformation>
<cl-transformation effect="swap_image:image_$new;index_0">
< / cl-transformation>
<cl-transformation delay=" 10 " flags=" animated " fetch-format=" gif " >
</ cl-transformation>
<cl-transformation height="200" width="400" crop="fill">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Variables(" $new " , ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn!).Chain()
.Effect(" swap_image:image_$new;index_0 " ).Chain()
.Delay(" 10 " ).Flags(" animated " ).FetchFormat(" gif " ).Chain()
.Height(200 ).Width(400 ).Crop(" fill " )).BuildImageTag(" docs/CldLogo3D " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.chain()
.setEffect(" swap_image:image_$new;index_0 " ).chain()
.setDelay(" 10 " ).setFlags(" animated " ).setFetchFormat(" gif " ).chain()
.setHeight(200 ).setWidth(400 ).setCrop(" fill " )).generate(" docs/CldLogo3D " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.variables(variable(" $new " ," ref:!fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvdjE1NzMzMzcwOTEvZG9jcy9raXRlc19mbHlpbmcuanBn! " )).chain()
.effect(" swap_image:image_$new;index_0 " ).chain()
.delay(" 10 " ).flags(" animated " ).fetchFormat(" gif " ).chain()
.height(200 ).width(400 ).crop(" fill " )).generate(" docs/CldLogo3D " );
Kotlin (kotlin-url-gen 1.x):