{"id":26150,"date":"2023-01-09T10:28:51","date_gmt":"2023-01-09T17:28:51","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=26150"},"modified":"2024-09-07T13:14:07","modified_gmt":"2024-09-07T20:14:07","slug":"the-3-ds-of-3d-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary","title":{"rendered":"The 3 Ds of 3D with Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>There are many dimensions to Cloudinary\u2019s capabilities, from image and video transformations to intelligent digital asset management and beyond. Functionality around 3D models is up and coming, so it\u2019s time to check in and see where we\u2019re at, bearing in mind that there\u2019s plenty more functionality to come.<\/p>\n<p>Forget the ABCs of using 3D with Cloudinary, we\u2019re going straight for the 3 Ds: <a href=\"#display\">Display<\/a>, <a href=\"#deliver\">Deliver<\/a> and <a href=\"#discover\">Discover<\/a>.<\/p>\n<h2>Display<\/h2>\n<p>The beauty of 3D models is the ability to view an object from any angle. So, if you just want to capture some realistic images from your model, rather than wasting time and money on a real photo shoot, use the <code>camera<\/code> effect on your model instead.<\/p>\n<p>If you don\u2019t yet have a Cloudinary account, you can <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for free<\/a>, then  <a href=\"https:\/\/cloudinary.com\/documentation\/upload_images#uploading_3d_models\">upload your 3D models<\/a> as <strong>image<\/strong> asset types to your Media Library.  You can try out any of the effects in this post by adding transformation parameters to the delivery URLs of your models, which you can do by hand or using an <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_sdks\">SDK<\/a>.<\/p>\n<p>The <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_camera\">camera<\/a> effect accepts many different parameters including horizontal and vertical positions, zoom, environment and exposure &#8211; each giving you the ability to find your perfect shot.<\/p>\n<p>Here are the <code>e_camera<\/code> parameters used in the following example of the <a href=\"#credits\">cute kitty model<\/a>:<\/p>\n<ul>\n<li>Position the camera at an angle of 45 degrees above the cat (<code>up_45<\/code>)<\/li>\n<li>Rotate the camera 60 degrees to the left (<code>right_-60<\/code>)<\/li>\n<li>Zoom in to 120% (<code>zoom_1.2<\/code>)<\/li>\n<li>Use \u2018whipple_creek\u2019 lighting (<code>env_whipple_creek<\/code>)<\/li>\n<li>Apply 1.8 amount of exposure (<code>exposure_1.8<\/code>)<\/li>\n<\/ul>\n<p>To convert the model to an image, set the format parameter to an image format such as <a href=\"https:\/\/cloudinary.com\/tools\/compress-jpg\">JPG<\/a> (<code>f_jpg<\/code>).<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;jpg\\&quot;&gt; &lt;Transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;jpg\\&quot;&gt;\\n\\t&lt;Transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;jpg\\&quot;&gt; &lt;cld-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;jpg\\&quot;&gt;\\n\\t&lt;cld-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;jpg\\&quot;&gt; &lt;cl-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;jpg\\&quot;&gt;\\n\\t&lt;cl-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/cute-kitty&#039;, {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/cute-kitty&#039;, {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;}).toHtml();&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).image(effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format=\\&quot;jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).image(effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format=\\&quot;jpg\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/cute-kitty&#039;))\\n\\t-&gt;addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/cute-kitty&#039;))\\n\\t-&gt;addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, \\&quot;format\\&quot;=&gt;\\&quot;jpg\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, \\&quot;format\\&quot;=&gt;\\&quot;jpg\\&quot;))&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).format(\\&quot;jpg\\&quot;).imageTag(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).format(\\&quot;jpg\\&quot;).imageTag(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).Format(\\&quot;jpg\\&quot;).BuildImageTag(\\&quot;docs\\\/cute-kitty\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).Format(\\&quot;jpg\\&quot;).BuildImageTag(\\&quot;docs\\\/cute-kitty\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setFormat(\\&quot;jpg\\&quot;).setTransformation(CLDTransformation().setEffect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).generate(\\&quot;docs\\\/cute-kitty\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setFormat(\\&quot;jpg\\&quot;).setTransformation(CLDTransformation().setEffect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).generate(\\&quot;docs\\\/cute-kitty\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).format(\\&quot;jpg\\&quot;).generate(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;)).format(\\&quot;jpg\\&quot;).generate(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/cute-kitty\\&quot;)\\n\\t addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/cute-kitty\\&quot;)\\n\\t addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;, format: \\&quot;jpg\\&quot;})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg\\\/docs\\\/cute-kitty&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8&quot;},{&quot;format&quot;:&quot;jpg&quot;}],&quot;transformation_string&quot;:&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_jpg&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/cute-kitty&quot;,&quot;extension&quot;:&quot;&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;,&quot;error&quot;:{}}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\/f_jpg\/docs\/cute-kitty\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\/f_jpg\/h_150\/docs\/cute-kitty\" alt=\"Image of cute kitty model from a particular angle\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"150\" height=\"150\"\/><\/a><\/p>\n<p>Or, to preserve transparency, convert to a PNG, allowing you to <a href=\"https:\/\/cloudinary.com\/documentation\/layers#image_underlays\">apply an underlay<\/a> as a background, like this:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;}, {fetch_format: \\&quot;png\\&quot;}, {underlay: \\&quot;docs:pathway\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;},\\n  {fetch_format: \\&quot;png\\&quot;},\\n  {underlay: \\&quot;docs:pathway\\&quot;}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/cute-kitty\\&quot; &gt; &lt;Transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt; &lt;Transformation fetchFormat=\\&quot;png\\&quot; \\\/&gt; &lt;Transformation underlay=\\&quot;docs:pathway\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/cute-kitty\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt;\\n\\t&lt;Transformation fetchFormat=\\&quot;png\\&quot; \\\/&gt;\\n\\t&lt;Transformation underlay=\\&quot;docs:pathway\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; &gt; &lt;cld-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt; &lt;cld-transformation fetch-format=\\&quot;png\\&quot; \\\/&gt; &lt;cld-transformation :underlay=\\&quot;docs:pathway\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation fetch-format=\\&quot;png\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :underlay=\\&quot;docs:pathway\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; &gt; &lt;cl-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation fetch-format=\\&quot;png\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation underlay=\\&quot;docs:pathway\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation fetch-format=\\&quot;png\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation underlay=\\&quot;docs:pathway\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/cute-kitty&#039;, {transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;}, {fetchFormat: \\&quot;png\\&quot;}, {underlay: new cloudinary.Layer().publicId(\\&quot;docs:pathway\\&quot;)} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/cute-kitty&#039;, {transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;},\\n  {fetchFormat: \\&quot;png\\&quot;},\\n  {underlay: new cloudinary.Layer().publicId(\\&quot;docs:pathway\\&quot;)}\\n  ]}).toHtml();&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).image(transformation=[ {&#039;effect&#039;: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;}, {&#039;fetch_format&#039;: \\&quot;png\\&quot;}, {&#039;underlay&#039;: \\&quot;docs:pathway\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).image(transformation=[\\n  {&#039;effect&#039;: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;},\\n  {&#039;fetch_format&#039;: \\&quot;png\\&quot;},\\n  {&#039;underlay&#039;: \\&quot;docs:pathway\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/cute-kitty&#039;))\\n\\t-&gt;addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/cute-kitty&#039;))\\n\\t-&gt;addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;), array(\\&quot;fetch_format\\&quot;=&gt;\\&quot;png\\&quot;), array(\\&quot;underlay\\&quot;=&gt;\\&quot;docs:pathway\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;),\\n  array(\\&quot;fetch_format\\&quot;=&gt;\\&quot;png\\&quot;),\\n  array(\\&quot;underlay\\&quot;=&gt;\\&quot;docs:pathway\\&quot;)\\n  )))&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).chain() .fetchFormat(\\&quot;png\\&quot;).chain() .underlay(new Layer().publicId(\\&quot;docs:pathway\\&quot;))).imageTag(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).chain()\\n  .fetchFormat(\\&quot;png\\&quot;).chain()\\n  .underlay(new Layer().publicId(\\&quot;docs:pathway\\&quot;))).imageTag(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;}, {fetch_format: \\&quot;png\\&quot;}, {underlay: \\&quot;docs:pathway\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;},\\n  {fetch_format: \\&quot;png\\&quot;},\\n  {underlay: \\&quot;docs:pathway\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).Chain() .FetchFormat(\\&quot;png\\&quot;).Chain() .Underlay(new Layer().PublicId(\\&quot;docs:pathway\\&quot;))).BuildImageTag(\\&quot;docs\\\/cute-kitty\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).Chain()\\n  .FetchFormat(\\&quot;png\\&quot;).Chain()\\n  .Underlay(new Layer().PublicId(\\&quot;docs:pathway\\&quot;))).BuildImageTag(\\&quot;docs\\\/cute-kitty\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).chain() .setFetchFormat(\\&quot;png\\&quot;).chain() .setUnderlay(\\&quot;docs:pathway\\&quot;)).generate(\\&quot;docs\\\/cute-kitty\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).chain()\\n  .setFetchFormat(\\&quot;png\\&quot;).chain()\\n  .setUnderlay(\\&quot;docs:pathway\\&quot;)).generate(\\&quot;docs\\\/cute-kitty\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).chain() .fetchFormat(\\&quot;png\\&quot;).chain() .underlay(new Layer().publicId(\\&quot;docs:pathway\\&quot;))).generate(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;).chain()\\n  .fetchFormat(\\&quot;png\\&quot;).chain()\\n  .underlay(new Layer().publicId(\\&quot;docs:pathway\\&quot;))).generate(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/cute-kitty\\&quot;)\\n\\t addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/cute-kitty\\&quot;)\\n\\t addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;}, {fetch_format: \\&quot;png\\&quot;}, {underlay: new cloudinary.Layer().publicId(\\&quot;docs:pathway\\&quot;)} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\&quot;},\\n  {fetch_format: \\&quot;png\\&quot;},\\n  {underlay: new cloudinary.Layer().publicId(\\&quot;docs:pathway\\&quot;)}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway\\\/docs\\\/cute-kitty&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8&quot;},{&quot;format&quot;:&quot;png&quot;},{&quot;underlay&quot;:&quot;docs:pathway&quot;}],&quot;transformation_string&quot;:&quot;e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\\\/f_png\\\/u_docs:pathway&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/cute-kitty&quot;,&quot;extension&quot;:&quot;&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;,&quot;error&quot;:{}}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\/f_png\/u_docs:pathway\/docs\/cute-kitty\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_45;right_-60;zoom_1.2;env_whipple_creek;exposure_1.8\/f_png\/u_docs:pathway\/h_300\/docs\/cute-kitty\" alt=\"Image of cute kitty model from a particular angle sitting on a path\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"450\" height=\"300\"\/><\/a><\/p>\n<p>Try out this interactive demo to capture the kitty with different settings:<\/p>\n<\/div>\n\n<div class=\"wp-block-cloudinary-markdown \"><div style=\"padding: 5px;border:1px solid #F96726; border-radius: 10px;background:#F1F2F9;\">\n<p class=\"instructions\">Use the controls to set up the camera, then capture your shot!<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div id=\"sliders\" class=\"sliders\">\n<p class=\"slider_label\">Vertical camera position (-360 to 360): <span id=\"up_val\" class=\"slider_value\">0<\/span><\/p>\n<div class=\"slidecontainer\" style=\"clear: both; margin-bottom: 10px; margin-top: 5px\">\n<input type=\"range\" name=\"up-quantity\" id=\"up-quantity\" align=\"middle\" value=\"0\" min=\"-360\" max=\"360\" class=\"slider\">\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p class=\"slider_label\">Horizontal camera position (-360 to 360): <span id=\"right_val\" class=\"slider_value\">0<\/span><\/p>\n<div class=\"slidecontainer\" style=\"clear: both; margin-bottom: 10px; margin-top: 5px\">\n<input type=\"range\" name=\"right-quantity\" id=\"right-quantity\" align=\"middle\" value=\"0\" min=\"-360\" max=\"360\" class=\"slider\">\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p class=\"slider_label\">Zoom (0.2 to 5.0): <span id=\"zoom_val\" class=\"slider_value\">1.0<\/span><\/p>\n<div class=\"slidecontainer\" style=\"clear: both; margin-bottom: 10px; margin-top: 5px\">\n<input type=\"range\" name=\"zoom-quantity\" id=\"zoom-quantity\" align=\"middle\" value=\"1.0\" min=\"0.2\" max=\"5.0\" step=\"0.1\" class=\"slider\">\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p class=\"slider_label\">Exposure (0.0 to 2.0): <span id=\"exposure_val\" class=\"slider_value\">1.0<\/span><\/p>\n<div class=\"slidecontainer\" style=\"clear: both; margin-bottom: 10px; margin-top: 5px\">\n<input type=\"range\" name=\"exposure-quantity\" id=\"exposure-quantity\" align=\"middle\" value=\"1.0\" min=\"0.0\" max=\"2.0\" step=\"0.1\" class=\"slider\">\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p><label class=\"env_select_label\" for=\"env\">Environment:<\/label><\/p>\n<div class=\"selectcontainer\" style=\"clear: both; margin-top: 1px;\">\n<div style=\"width:280px;\">\n<select id=\"env\" name=\"env\" class=\"select-css\">\n  <option value=\"neutral\">neutral<\/option>\n  <option value=\"spruit_sunrise\">spruit_sunrise<\/option>\n  <option value=\"whipple_creek\">whipple_creek<\/option>\n  <option value=\"music_hall\">music_hall<\/option>\n  <option value=\"pillars\">pillars<\/option>\n  <option value=\"aircraft_workshop\">aircraft_workshop<\/option>\n <option value=\"none\">none<\/option>\n<\/select>\n<\/div>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<\/div>\n<div style=\"text-align:center\" class=\"fix\">\n<span class=\"apply-button\">\n<button id=\"apply-this-button\" class=\"cloudinary-button\">Capture Shot<\/button>\n<\/span>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p class=\"time_warn\">May take a few seconds to generate*<\/p>\n<div id=\"imageblock\">\n<span align=\"center\" style=\"padding: 5px;max-width:70%;display:inline-block;vertical-align:top;\">\n<a id=\"imagelink\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_0;right_0;zoom_1.0;env_neutral;exposure_1.0\/f_jpg\/docs\/cute-kitty\" target =\"_blank\">\n<img decoding=\"async\" onload=\"stopSpinner()\" id=\"testpic\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_0;right_0;zoom_1.0;env_neutral;exposure_1.0\/f_jpg\/docs\/cute-kitty\" alt=\"Your generated image\" title=\"Your generated image\"\/>\n<\/a>\n<div align=\"center\" class=\"div_url\" style=\"font-size: 90%;\">\n <a id=\"cloudurl\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_0;right_0;zoom_1.0;env_neutral;exposure_1.0\/f_jpg\/docs\/cute-kitty\" target=\"_blank\" ><span id=\"c-url\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_0;right_0;zoom_1.0;env_neutral;exposure_1.0\/f_jpg\/docs\/cute-kitty<\/span><\/a>\n<p>\n<\/div>\n<\/div>\n<div id=\"surround\" style=\"height: 430px; display:none;\">\n<div id=\"drop\" style=\"height: 100px;display:none;\">\n<\/div>\n<div id=\"loader\" class=\"loader\" style=\"display:none;\">\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>*It can take a few seconds to generate a new image on the fly if you\u2019ve tried a combination of settings that hasn\u2019t been tried before.  Once an image has been generated though, it\u2019s cached on the CDN, so future requests to the same transformation are much faster. You can learn more about that in our <a href=\"https:\/\/cloudinary.com\/documentation\/solution_overview#delivery_lifecycle\">Service overview<\/a>.<\/p><\/div>\n<style>\n.select-css {\n\tdisplay: block;\n\tfont-size: 16px;\n\tfont-family: sans-serif;\n\tfont-weight: 700;\n\tcolor: #FF5050;\n\tline-height: 1.3;\n\tpadding: .6em 1.4em .5em .8em;\n\twidth: 100%;\n\tmax-width: 100%; \/* useful when width is set to anything other than 100% *\/\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tborder: 1px solid #aaa;\n\tbox-shadow: 0 1px 0 1px rgba(0,0,0,.04);\n\tborder-radius: .5em;\n\t-moz-appearance: none;\n\t-webkit-appearance: none;\n\tappearance: none;\n\tbackground-color: #fff;\n\t\/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. \n\t\tfor the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference\n\n\t*\/\n\n\tbackground-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FF5050%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');\n\n\tbackground-repeat: no-repeat, repeat;\n\n\t\/* arrow icon position (1em from the right, 50% vertical) , then gradient position*\/\n\tbackground-position: right .7em top 50%, 0 0;\n\t\/* icon size, then gradient *\/\n\tbackground-size: .65em auto, 100%;\n}\n\/* Hide arrow icon in IE browsers *\/\n.select-css::-ms-expand {\n\tdisplay: none;\n}\n\/* Hover style *\/\n.select-css:hover {\n\tborder-color: #888;\n}\n\/* Focus style *\/\n.select-css:focus {\n\tborder-color: #FF5050;\n\t\/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow *\/\n\tbox-shadow: 0 0 1px 3px rgba(255, 80, 80, .7);\n\tbox-shadow: 0 0 0 3px -moz-mac-focusring;\n\tcolor: #FF5050; \n\toutline: none;\n}\n\n\/* Set options to normal weight *\/\n.select-css option {\n\tfont-weight:normal;\n}\n\n\/* Support for rtl text, explicit support for Arabic and Hebrew *\/\n*[dir=\"rtl\"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {\n\tbackground-position: left .7em top 50%, 0 0;\n\tpadding: .6em .8em .5em 1.4em;\n}\n\n\/* Disabled styles *\/\n.select-css:disabled, .select-css[aria-disabled=true] {\n\tcolor: graytext;\n\tbackground-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),\n\t  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);\n}\n\n.select-css:disabled:hover, .select-css[aria-disabled=true] {\n\tborder-color: #aaa;\n  \n}\n\ntable{\n    table-layout: fixed;\n}\n\n.time_warn{\n  color: #FF0000;\n  font-size:12px;\n}\n\n.instructions{\nfont-family: Tahoma;\ntext-align: center;\nfont-size:20px;\npadding-left: 10%;\npadding-right: 10%;\n}\n\n.selectcontainer {\n   color: #FF5050;\n   font-weight: bold;\n   font-size:90%;\n   padding-left: 15%;\n}\n\n\/* .selection{\n   display: none;\n   padding-left: 15%;\n} *\/\n\n.select_label{\n   color: #3448C5;\n   font-weight: bold;\n}\n\n.env_select_label{\n   color: #3448C5;\n   font-weight: bold;\n   padding-left: 15%;\n}\n\n.sliders{\n  display: inline;\n}\n\n.slider_value{\n   color: #FF5050;\n   font-weight: bold;\n}\n\n.slider_label{\n   color: #3448C5;\n   font-weight: bold;\n  padding-left: 15%;\n}\n\n.step_number {\n        background:  black;\n        color:  white;\n        width: 24px;\n        height: 24px;\n        display: inline-block;\n        text-align: center;\n        line-height: 24px;\n        border-radius: 100px;\n}\n \n.slidecontainer {\n  width: 85%; \/* Width of the outside container *\/\n  text-align: center;\nfloat: right;\npadding-right: 15%;\n}\n\n\n\/* The slider itself *\/\n\n\/* Mouse-over effects *\/\n.slider:hover {\n  opacity: 1; \/* Fully shown on mouse-over *\/\n}\n\n.slider {\n  -webkit-appearance: none;\n  width: 100%;\n  height: 15px;\n  border-radius: 5px;  \n  background: #3448C5;\n  outline: none;\n  opacity: 0.7;\n  -webkit-transition: .2s;\n  transition: opacity .2s;\n}\n\n.slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 25px;\n  height: 25px;\n  border-radius: 50%; \n  background: #FF5050;\n  cursor: pointer;\n}\n\n.slider::-moz-range-thumb {\n  width: 25px;\n  height: 25px;\n  border-radius: 50%;\n  background: #FF5050;\n  cursor: pointer;\n}\n\n.cloudinary-button {\n  display: inline-block;\n  padding: 15px 25px;\n  font-size: 18px;\n  cursor: pointer;\n  text-align: center;\n  text-decoration: none;\n  outline: none;\n  color: #fff;\n  background-color: #FF5050;\n  border: none;\n  border-radius: 15px;\n  box-shadow: 0 9px #999;\n}\n\n.cloudinary-button:hover {\n  background-color: #ff0303;\n  cursor: pointer;\n}\n\n.cloudinary-button:active {\n  background-color: #ff0303;\n  box-shadow: 0 5px #666;\n  transform: translateY(4px);\n}\n\n.fix {\n display: block;\n}\n\n.loader {\n  position: static;\n  margin-left: 40%;\n  border: 16px solid #5A616A; \n  border-top: 16px solid #3448C5; \n  border-radius: 50%;\n  width: 120px;\n  height: 120px;\n  animation: spin 2s linear infinite;\n} \n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n<\/style>\n<script>\n   \nvar up_slider = document.getElementById(\"up-quantity\");\n\nup_slider.oninput = function() {\n  document.getElementById(\"up_val\").innerHTML = this.value;\n}\n\nvar right_slider = document.getElementById(\"right-quantity\");\n\nright_slider.oninput = function() {\n  document.getElementById(\"right_val\").innerHTML = this.value;\n}\n\nvar zoom_slider = document.getElementById(\"zoom-quantity\");\n\nzoom_slider.oninput = function() {\n  document.getElementById(\"zoom_val\").innerHTML = Number(this.value).toFixed(1);\n}\n\nvar exposure_slider = document.getElementById(\"exposure-quantity\");\n\nexposure_slider.oninput = function() {\n  document.getElementById(\"exposure_val\").innerHTML = Number(this.value).toFixed(1);\n}\n\ndocument.getElementById(\"apply-this-button\").addEventListener(\"click\", function(){\n       \n  var display_lr = \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_#img_up#;right_#img_right#;zoom_#img_zoom#;env_#img_env#;exposure_#img_exposure#\/f_jpg\/docs\/cute-kitty\";\n\n   var up = document.getElementById(\"up-quantity\").value; \n   var right = document.getElementById(\"right-quantity\").value; \n   var zoom = document.getElementById(\"zoom-quantity\").value; \n   var env = document.getElementById(\"env\").value;\n   var exposure = document.getElementById(\"exposure-quantity\").value;\n \n    var newUrl_lr = display_lr.replace('#img_up#', up).replace('#img_right#', right).replace('#img_zoom#', zoom).replace('#img_env#',env).replace('#img_exposure#',exposure);\n\n   var imglink = document.getElementById(\"imagelink\");\n   var img = document.getElementById(\"testpic\");\n   var ccloudurl = document.getElementById(\"cloudurl\");\n\n    document.getElementById(\"c-url\").textContent=newUrl_lr;\n    img.setAttribute(\"src\", newUrl_lr);\n    ccloudurl.setAttribute(\"href\", newUrl_lr);\n    imglink.setAttribute(\"href\", newUrl_lr);  \n\n\n  \/\/ While waiting for the image to load, show a spinner\n  if (document.getElementById(\"testpic\").complete == false)\n  {\n    document.getElementById(\"loader\").style.display = \"block\";\n    document.getElementById(\"surround\").style.display = \"block\";\n    document.getElementById(\"drop\").style.display= \"block\";\n    document.getElementById(\"imageblock\").style.display = \"none\";\n  }\n   \n  }, false);\n\nfunction stopSpinner() {\n  document.getElementById(\"loader\").style.display = \"none\";\n  document.getElementById(\"surround\").style.display= \"none\";\n  document.getElementById(\"drop\").style.display= \"none\";\n  document.getElementById(\"imageblock\").style.display = \"block\";\n}\n<\/script>\n<\/div>\n\n<div class=\"wp-block-cloudinary-markdown \"><p>If you want an easy way to show off all sides of your model, you can capture an animation of the object spinning by combining the camera effect with the <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#fl_animated\">animated flag<\/a> and an image <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#f_format\">file format<\/a> that supports animation, such as WebP (<code>f_webp,fl_animated<\/code>), or video file format, such as MP4 (<code>f_mp4,fl_animated<\/code>).<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {format: \\&quot;webp\\&quot;, transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;}, {flags: \\&quot;animated\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {format: \\&quot;webp\\&quot;, transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;},\\n  {flags: \\&quot;animated\\&quot;}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;webp\\&quot;&gt; &lt;Transformation effect=\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt; &lt;Transformation flags=\\&quot;animated\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;webp\\&quot;&gt;\\n\\t&lt;Transformation effect=\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt;\\n\\t&lt;Transformation flags=\\&quot;animated\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;webp\\&quot;&gt; &lt;cld-transformation effect=\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt; &lt;cld-transformation flags=\\&quot;animated\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;webp\\&quot;&gt;\\n\\t&lt;cld-transformation effect=\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation flags=\\&quot;animated\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;webp\\&quot;&gt; &lt;cl-transformation effect=\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation flags=\\&quot;animated\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/cute-kitty\\&quot; format=\\&quot;webp\\&quot;&gt;\\n\\t&lt;cl-transformation effect=\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation flags=\\&quot;animated\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/cute-kitty&#039;, {format: \\&quot;webp\\&quot;, transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;}, {flags: \\&quot;animated\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/cute-kitty&#039;, {format: \\&quot;webp\\&quot;, transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;},\\n  {flags: \\&quot;animated\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).image(format=\\&quot;webp\\&quot;, transformation=[ {&#039;effect&#039;: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;}, {&#039;flags&#039;: \\&quot;animated\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).image(format=\\&quot;webp\\&quot;, transformation=[\\n  {&#039;effect&#039;: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;},\\n  {&#039;flags&#039;: \\&quot;animated\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/cute-kitty&#039;))\\n\\t-&gt;addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/cute-kitty&#039;))\\n\\t-&gt;addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, array(\\&quot;format\\&quot;=&gt;\\&quot;webp\\&quot;, \\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;), array(\\&quot;flags\\&quot;=&gt;\\&quot;animated\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, array(\\&quot;format\\&quot;=&gt;\\&quot;webp\\&quot;, \\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;),\\n  array(\\&quot;flags\\&quot;=&gt;\\&quot;animated\\&quot;)\\n  )))&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).chain() .flags(\\&quot;animated\\&quot;)).format(\\&quot;webp\\&quot;).imageTag(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).chain()\\n  .flags(\\&quot;animated\\&quot;)).format(\\&quot;webp\\&quot;).imageTag(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, format: \\&quot;webp\\&quot;, transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;}, {flags: \\&quot;animated\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/cute-kitty\\&quot;, format: \\&quot;webp\\&quot;, transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;},\\n  {flags: \\&quot;animated\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).Chain() .Flags(\\&quot;animated\\&quot;)).Format(\\&quot;webp\\&quot;).BuildImageTag(\\&quot;docs\\\/cute-kitty\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).Chain()\\n  .Flags(\\&quot;animated\\&quot;)).Format(\\&quot;webp\\&quot;).BuildImageTag(\\&quot;docs\\\/cute-kitty\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setFormat(\\&quot;webp\\&quot;).setTransformation(CLDTransformation().setEffect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).chain() .setFlags(\\&quot;animated\\&quot;)).generate(\\&quot;docs\\\/cute-kitty\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setFormat(\\&quot;webp\\&quot;).setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).chain()\\n  .setFlags(\\&quot;animated\\&quot;)).generate(\\&quot;docs\\\/cute-kitty\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).chain() .flags(\\&quot;animated\\&quot;)).format(\\&quot;webp\\&quot;).generate(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;).chain()\\n  .flags(\\&quot;animated\\&quot;)).format(\\&quot;webp\\&quot;).generate(\\&quot;docs\\\/cute-kitty\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/cute-kitty&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/cute-kitty\\&quot;)\\n\\t addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/cute-kitty\\&quot;)\\n\\t addTransformation(\\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {format: \\&quot;webp\\&quot;, transformation: [ {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;}, {flags: \\&quot;animated\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/cute-kitty\\&quot;, {format: \\&quot;webp\\&quot;, transformation: [\\n  {effect: \\&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\&quot;},\\n  {flags: \\&quot;animated\\&quot;}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/cute-kitty\\&quot;).addTransformation(\\n  \\&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated\\\/docs\\\/cute-kitty&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8&quot;},{&quot;format&quot;:&quot;webp&quot;,&quot;flags&quot;:&quot;animated&quot;}],&quot;transformation_string&quot;:&quot;e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\\\/f_webp,fl_animated&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/cute-kitty&quot;,&quot;extension&quot;:&quot;&quot;,&quot;format&quot;:&quot;webp&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;,&quot;error&quot;:{}}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\/f_webp,fl_animated\/docs\/cute-kitty\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:up_45;right_-60;zoom_0.9;env_whipple_creek;exposure_1.8\/f_webp,fl_animated\/h_150\/docs\/cute-kitty\" alt=\"Spinning image of cute kitty model from a particular angle\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"150\" height=\"150\"\/><\/a><\/p>\n<p>If you\u2019ve got several variants of a product to display, then you can use the <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference#e_swap_image\">swap_image<\/a> effect to change the model\u2019s texture.  Here, a <a href=\"https:\/\/cloudinary.com\/documentation\/user_defined_variables#file_reference_variables\">file reference variable<\/a> is defined, called <code>new<\/code>, set to the <a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1596619276\/docs\/raindrops.jpg\" target=\"_blank\">raindrops<\/a> image with public ID <code>docs\/raindrops<\/code> (<code>$new_ref:!docs:raindrops!<\/code>). The image parameter of the <code>swap_image<\/code> effect is set to this variable, and the index of the layer to swap is specified as <code>0<\/code> (<code>e_swap_image:image_$new;index_0<\/code>):<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/CldLogo3D\\&quot;, {transformation: [ {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]}, {effect: \\&quot;swap_image:image_$new;index_0\\&quot;}, {effect: \\&quot;camera:zoom_0.9\\&quot;}, {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetch_format: \\&quot;gif\\&quot;}, {height: 200, width: 400, crop: \\&quot;fill\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/CldLogo3D\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]},\\n  {effect: \\&quot;swap_image:image_$new;index_0\\&quot;},\\n  {effect: \\&quot;camera:zoom_0.9\\&quot;},\\n  {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetch_format: \\&quot;gif\\&quot;},\\n  {height: 200, width: 400, crop: \\&quot;fill\\&quot;}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/CldLogo3D\\&quot; &gt; &lt;Transformation variables={[[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]} \\\/&gt; &lt;Transformation effect=\\&quot;swap_image:image_$new;index_0\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;camera:zoom_0.9\\&quot; \\\/&gt; &lt;Transformation delay=\\&quot;10\\&quot; flags=\\&quot;animated\\&quot; fetchFormat=\\&quot;gif\\&quot; \\\/&gt; &lt;Transformation height=\\&quot;200\\&quot; width=\\&quot;400\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/CldLogo3D\\&quot; &gt;\\n\\t&lt;Transformation variables={[[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]} \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;swap_image:image_$new;index_0\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;camera:zoom_0.9\\&quot; \\\/&gt;\\n\\t&lt;Transformation delay=\\&quot;10\\&quot; flags=\\&quot;animated\\&quot; fetchFormat=\\&quot;gif\\&quot; \\\/&gt;\\n\\t&lt;Transformation height=\\&quot;200\\&quot; width=\\&quot;400\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/CldLogo3D\\&quot; &gt; &lt;cld-transformation :variables=\\&quot;[[&#039;$new&#039;, &#039;ref:!docs:raindrops!&#039;]]\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;swap_image:image_$new;index_0\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;camera:zoom_0.9\\&quot; \\\/&gt; &lt;cld-transformation delay=\\&quot;10\\&quot; flags=\\&quot;animated\\&quot; fetch-format=\\&quot;gif\\&quot; \\\/&gt; &lt;cld-transformation height=\\&quot;200\\&quot; width=\\&quot;400\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/CldLogo3D\\&quot; &gt;\\n\\t&lt;cld-transformation :variables=\\&quot;[[&#039;$new&#039;, &#039;ref:!docs:raindrops!&#039;]]\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;swap_image:image_$new;index_0\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;camera:zoom_0.9\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation delay=\\&quot;10\\&quot; flags=\\&quot;animated\\&quot; fetch-format=\\&quot;gif\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation height=\\&quot;200\\&quot; width=\\&quot;400\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/CldLogo3D\\&quot; &gt; &lt;cl-transformation variables=\\&quot;[[&#039;$new&#039;, &#039;ref:!docs:raindrops!&#039;]]\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;swap_image:image_$new;index_0\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;camera:zoom_0.9\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation delay=\\&quot;10\\&quot; flags=\\&quot;animated\\&quot; fetch-format=\\&quot;gif\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation height=\\&quot;200\\&quot; width=\\&quot;400\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/CldLogo3D\\&quot; &gt;\\n\\t&lt;cl-transformation variables=\\&quot;[[&#039;$new&#039;, &#039;ref:!docs:raindrops!&#039;]]\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;swap_image:image_$new;index_0\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;camera:zoom_0.9\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation delay=\\&quot;10\\&quot; flags=\\&quot;animated\\&quot; fetch-format=\\&quot;gif\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation height=\\&quot;200\\&quot; width=\\&quot;400\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/CldLogo3D&#039;, {transformation: [ {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]}, {effect: \\&quot;swap_image:image_$new;index_0\\&quot;}, {effect: \\&quot;camera:zoom_0.9\\&quot;}, {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetchFormat: \\&quot;gif\\&quot;}, {height: 200, width: 400, crop: \\&quot;fill\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/CldLogo3D&#039;, {transformation: [\\n  {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]},\\n  {effect: \\&quot;swap_image:image_$new;index_0\\&quot;},\\n  {effect: \\&quot;camera:zoom_0.9\\&quot;},\\n  {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetchFormat: \\&quot;gif\\&quot;},\\n  {height: 200, width: 400, crop: \\&quot;fill\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).image(transformation=[ {&#039;variables&#039;: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]}, {&#039;effect&#039;: \\&quot;swap_image:image_$new;index_0\\&quot;}, {&#039;effect&#039;: \\&quot;camera:zoom_0.9\\&quot;}, {&#039;delay&#039;: \\&quot;10\\&quot;, &#039;flags&#039;: \\&quot;animated\\&quot;, &#039;fetch_format&#039;: \\&quot;gif\\&quot;}, {&#039;height&#039;: 200, &#039;width&#039;: 400, &#039;crop&#039;: \\&quot;fill\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).image(transformation=[\\n  {&#039;variables&#039;: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]},\\n  {&#039;effect&#039;: \\&quot;swap_image:image_$new;index_0\\&quot;},\\n  {&#039;effect&#039;: \\&quot;camera:zoom_0.9\\&quot;},\\n  {&#039;delay&#039;: \\&quot;10\\&quot;, &#039;flags&#039;: \\&quot;animated\\&quot;, &#039;fetch_format&#039;: \\&quot;gif\\&quot;},\\n  {&#039;height&#039;: 200, &#039;width&#039;: 400, &#039;crop&#039;: \\&quot;fill\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/CldLogo3D&#039;))\\n\\t-&gt;addTransformation(\\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/CldLogo3D&#039;))\\n\\t-&gt;addTransformation(\\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/CldLogo3D\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;))), array(\\&quot;effect\\&quot;=&gt;\\&quot;swap_image:image_$new;index_0\\&quot;), array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:zoom_0.9\\&quot;), array(\\&quot;delay\\&quot;=&gt;\\&quot;10\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;animated\\&quot;, \\&quot;fetch_format\\&quot;=&gt;\\&quot;gif\\&quot;), array(\\&quot;height\\&quot;=&gt;200, \\&quot;width\\&quot;=&gt;400, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/CldLogo3D\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;variables\\&quot;=&gt;array(array(\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;))),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;swap_image:image_$new;index_0\\&quot;),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;camera:zoom_0.9\\&quot;),\\n  array(\\&quot;delay\\&quot;=&gt;\\&quot;10\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;animated\\&quot;, \\&quot;fetch_format\\&quot;=&gt;\\&quot;gif\\&quot;),\\n  array(\\&quot;height\\&quot;=&gt;200, \\&quot;width\\&quot;=&gt;400, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;)\\n  )))&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().variables(variable(\\&quot;$new\\&quot;,\\&quot;ref:!docs:raindrops!\\&quot;)).chain() .effect(\\&quot;swap_image:image_$new;index_0\\&quot;).chain() .effect(\\&quot;camera:zoom_0.9\\&quot;).chain() .delay(\\&quot;10\\&quot;).flags(\\&quot;animated\\&quot;).fetchFormat(\\&quot;gif\\&quot;).chain() .height(200).width(400).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;docs\\\/CldLogo3D\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$new\\&quot;,\\&quot;ref:!docs:raindrops!\\&quot;)).chain()\\n  .effect(\\&quot;swap_image:image_$new;index_0\\&quot;).chain()\\n  .effect(\\&quot;camera:zoom_0.9\\&quot;).chain()\\n  .delay(\\&quot;10\\&quot;).flags(\\&quot;animated\\&quot;).fetchFormat(\\&quot;gif\\&quot;).chain()\\n  .height(200).width(400).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;docs\\\/CldLogo3D\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/CldLogo3D\\&quot;, transformation: [ {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]}, {effect: \\&quot;swap_image:image_$new;index_0\\&quot;}, {effect: \\&quot;camera:zoom_0.9\\&quot;}, {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetch_format: \\&quot;gif\\&quot;}, {height: 200, width: 400, crop: \\&quot;fill\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/CldLogo3D\\&quot;, transformation: [\\n  {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]},\\n  {effect: \\&quot;swap_image:image_$new;index_0\\&quot;},\\n  {effect: \\&quot;camera:zoom_0.9\\&quot;},\\n  {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetch_format: \\&quot;gif\\&quot;},\\n  {height: 200, width: 400, crop: \\&quot;fill\\&quot;}\\n  ])&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Variables(\\&quot;$new\\&quot;, ref:!docs:raindrops!).Chain() .Effect(\\&quot;swap_image:image_$new;index_0\\&quot;).Chain() .Effect(\\&quot;camera:zoom_0.9\\&quot;).Chain() .Delay(\\&quot;10\\&quot;).Flags(\\&quot;animated\\&quot;).FetchFormat(\\&quot;gif\\&quot;).Chain() .Height(200).Width(400).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;docs\\\/CldLogo3D\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Variables(\\&quot;$new\\&quot;, ref:!docs:raindrops!).Chain()\\n  .Effect(\\&quot;swap_image:image_$new;index_0\\&quot;).Chain()\\n  .Effect(\\&quot;camera:zoom_0.9\\&quot;).Chain()\\n  .Delay(\\&quot;10\\&quot;).Flags(\\&quot;animated\\&quot;).FetchFormat(\\&quot;gif\\&quot;).Chain()\\n  .Height(200).Width(400).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;docs\\\/CldLogo3D\\&quot;)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/CldLogo3D&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/CldLogo3D&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().chain() .setEffect(\\&quot;swap_image:image_$new;index_0\\&quot;).chain() .setEffect(\\&quot;camera:zoom_0.9\\&quot;).chain() .setDelay(\\&quot;10\\&quot;).setFlags(\\&quot;animated\\&quot;).setFetchFormat(\\&quot;gif\\&quot;).chain() .setHeight(200).setWidth(400).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;docs\\\/CldLogo3D\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .chain()\\n  .setEffect(\\&quot;swap_image:image_$new;index_0\\&quot;).chain()\\n  .setEffect(\\&quot;camera:zoom_0.9\\&quot;).chain()\\n  .setDelay(\\&quot;10\\&quot;).setFlags(\\&quot;animated\\&quot;).setFetchFormat(\\&quot;gif\\&quot;).chain()\\n  .setHeight(200).setWidth(400).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;docs\\\/CldLogo3D\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().variables(variable(\\&quot;$new\\&quot;,\\&quot;ref:!docs:raindrops!\\&quot;)).chain() .effect(\\&quot;swap_image:image_$new;index_0\\&quot;).chain() .effect(\\&quot;camera:zoom_0.9\\&quot;).chain() .delay(\\&quot;10\\&quot;).flags(\\&quot;animated\\&quot;).fetchFormat(\\&quot;gif\\&quot;).chain() .height(200).width(400).crop(\\&quot;fill\\&quot;)).generate(\\&quot;docs\\\/CldLogo3D\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .variables(variable(\\&quot;$new\\&quot;,\\&quot;ref:!docs:raindrops!\\&quot;)).chain()\\n  .effect(\\&quot;swap_image:image_$new;index_0\\&quot;).chain()\\n  .effect(\\&quot;camera:zoom_0.9\\&quot;).chain()\\n  .delay(\\&quot;10\\&quot;).flags(\\&quot;animated\\&quot;).fetchFormat(\\&quot;gif\\&quot;).chain()\\n  .height(200).width(400).crop(\\&quot;fill\\&quot;)).generate(\\&quot;docs\\\/CldLogo3D\\&quot;);&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/CldLogo3D&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/CldLogo3D&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;));&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/CldLogo3D\\&quot;)\\n\\t addTransformation(\\&quot;\\\\$new_ref:!docs:raindrops!\\\/e_swap_image:image_\\\\$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/CldLogo3D\\&quot;)\\n\\t addTransformation(\\&quot;\\\\$new_ref:!docs:raindrops!\\\/e_swap_image:image_\\\\$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/CldLogo3D\\&quot;, {transformation: [ {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]}, {effect: \\&quot;swap_image:image_$new;index_0\\&quot;}, {effect: \\&quot;camera:zoom_0.9\\&quot;}, {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetch_format: \\&quot;gif\\&quot;}, {height: 200, width: 400, crop: \\&quot;fill\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/CldLogo3D\\&quot;, {transformation: [\\n  {variables: [[\\&quot;$new\\&quot;, \\&quot;ref:!docs:raindrops!\\&quot;]]},\\n  {effect: \\&quot;swap_image:image_$new;index_0\\&quot;},\\n  {effect: \\&quot;camera:zoom_0.9\\&quot;},\\n  {delay: \\&quot;10\\&quot;, flags: \\&quot;animated\\&quot;, fetch_format: \\&quot;gif\\&quot;},\\n  {height: 200, width: 400, crop: \\&quot;fill\\&quot;}\\n  ]})&quot;,&quot;status&quot;:51,&quot;statusText&quot;:&quot;Ruby code_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/CldLogo3D\\&quot;).addTransformation(\\n  \\&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\&quot;\\n);&quot;,&quot;status&quot;:50,&quot;statusText&quot;:&quot;Ruby action_generator_failed_unexpectedly&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400\\\/docs\\\/CldLogo3D&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;$new&quot;:&quot;ref:!docs:raindrops!&quot;},{&quot;effect&quot;:&quot;swap_image:image_$new;index_0&quot;},{&quot;effect&quot;:&quot;camera:zoom_0.9&quot;},{&quot;delay&quot;:&quot;10&quot;,&quot;format&quot;:&quot;gif&quot;,&quot;flags&quot;:&quot;animated&quot;},{&quot;crop_mode&quot;:&quot;fill&quot;,&quot;height&quot;:&quot;200&quot;,&quot;width&quot;:&quot;400&quot;}],&quot;transformation_string&quot;:&quot;$new_ref:!docs:raindrops!\\\/e_swap_image:image_$new;index_0\\\/e_camera:zoom_0.9\\\/dl_10,f_gif,fl_animated\\\/c_fill,h_200,w_400&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/CldLogo3D&quot;,&quot;extension&quot;:&quot;&quot;,&quot;format&quot;:&quot;gif&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;,&quot;error&quot;:{}}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:zoom_0.9\/dl_10,f_gif,fl_animated\/c_fill,h_200,w_300\/docs\/CldLogo3D\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_camera:zoom_0.9\/dl_10,f_gif,fl_animated\/c_fill,h_200,w_300\/docs\/CldLogo3D\" alt=\"Original texture\" title=\"Original texture\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<b style=\"margin-right: 30px;display:block;\">Original texture<\/b>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$new_ref:!docs:raindrops!\/e_swap_image:image_$new;index_0\/e_camera:zoom_0.9\/dl_10,f_gif,fl_animated\/c_fill,h_200,w_300\/docs\/CldLogo3D\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/$new_ref:!docs:raindrops!\/e_swap_image:image_$new;index_0\/e_camera:zoom_0.9\/dl_10,f_gif,fl_animated\/c_fill,h_200,w_300\/docs\/CldLogo3D\" alt=\"Texture swapped \" title=\"Texture swapped\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<b style=\"margin-right: 30px;display:block;\">Texture swapped<\/b>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<h2>Deliver<\/h2>\n<p>In the examples above, we\u2019ve already seen how easy it is to transform a model to an image or video format, but you can also use Cloudinary to convert your <a href=\"https:\/\/cloudinary.com\/guides\/ai\/3d-model-from-images-a-practical-guide\">3D model<\/a> to a different model format.<\/p>\n<p>For example, you can convert an FBX file to a <a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/glb-format-how-it-works-use-cases-and-pros-cons-you-should-know#advantages-of-glb-format\">GLB file<\/a>, simply by setting the <code>format\/fetch format<\/code> parameter to <code>glb<\/code>:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, {fetch_format: \\&quot;glb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, {fetch_format: \\&quot;glb\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/foyer-table.fbxz\\&quot; &gt; &lt;Transformation fetchFormat=\\&quot;glb\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/foyer-table.fbxz\\&quot; &gt;\\n\\t&lt;Transformation fetchFormat=\\&quot;glb\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/foyer-table.fbxz\\&quot; &gt; &lt;cld-transformation fetch-format=\\&quot;glb\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/foyer-table.fbxz\\&quot; &gt;\\n\\t&lt;cld-transformation fetch-format=\\&quot;glb\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/foyer-table.fbxz\\&quot; &gt; &lt;cl-transformation fetch-format=\\&quot;glb\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/foyer-table.fbxz\\&quot; &gt;\\n\\t&lt;cl-transformation fetch-format=\\&quot;glb\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/foyer-table.fbxz&#039;, {fetchFormat: \\&quot;glb\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/foyer-table.fbxz&#039;, {fetchFormat: \\&quot;glb\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).image(fetch_format=\\&quot;glb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).image(fetch_format=\\&quot;glb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/foyer-table.fbxz&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::glb()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/foyer-table.fbxz&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::glb()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, array(\\&quot;fetch_format\\&quot;=&gt;\\&quot;glb\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, array(\\&quot;fetch_format\\&quot;=&gt;\\&quot;glb\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().fetchFormat(\\&quot;glb\\&quot;)).imageTag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().fetchFormat(\\&quot;glb\\&quot;)).imageTag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, fetch_format: \\&quot;glb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, fetch_format: \\&quot;glb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat(\\&quot;glb\\&quot;)).BuildImageTag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat(\\&quot;glb\\&quot;)).BuildImageTag(\\&quot;docs\\\/foyer-table.fbxz\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.fbxz&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.glb())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.fbxz&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.glb())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat(\\&quot;glb\\&quot;)).generate(\\&quot;docs\\\/foyer-table.fbxz\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat(\\&quot;glb\\&quot;)).generate(\\&quot;docs\\\/foyer-table.fbxz\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().fetchFormat(\\&quot;glb\\&quot;)).generate(\\&quot;docs\\\/foyer-table.fbxz\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().fetchFormat(\\&quot;glb\\&quot;)).generate(\\&quot;docs\\\/foyer-table.fbxz\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.fbxz&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.glb())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.fbxz&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.glb())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/foyer-table.fbxz\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.glb())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/foyer-table.fbxz\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.glb())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, {fetch_format: \\&quot;glb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/foyer-table.fbxz\\&quot;, {fetch_format: \\&quot;glb\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.fbxz\\&quot;).delivery(format(glb()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/f_glb\\\/docs\\\/foyer-table.fbxz&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;format&quot;:&quot;glb&quot;}],&quot;transformation_string&quot;:&quot;f_glb&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/foyer-table.fbxz&quot;,&quot;extension&quot;:&quot;fbxz&quot;,&quot;format&quot;:&quot;fbxz&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p>Or even by changing the file extension in the URL:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/foyer-table.glb\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/foyer-table.glb\\&quot; &gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/foyer-table.glb\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/foyer-table.glb\\&quot; &gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/foyer-table.glb\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/foyer-table.glb\\&quot; &gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/foyer-table.glb&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/foyer-table.glb&#039;).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;).image()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/foyer-table.glb&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/foyer-table.glb&#039;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.glb&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.glb&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;docs\\\/foyer-table.glb\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;docs\\\/foyer-table.glb\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.glb&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/foyer-table.glb&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/foyer-table.glb\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/foyer-table.glb\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/foyer-table.glb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/foyer-table.glb\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/docs\\\/foyer-table.glb&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/foyer-table.glb&quot;,&quot;extension&quot;:&quot;glb&quot;,&quot;format&quot;:&quot;glb&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p>Note that some formats aren\u2019t supported, so make sure to check out <a href=\"https:\/\/cloudinary.com\/documentation\/transformations_on_3d_models#delivering_3d_models_in_different_3d_formats\">these docs<\/a> to find out which formats you can convert to.<\/p>\n<p>If you\u2019re working with glTF files, you can apply Draco compression to optimize your models for faster delivery using the <code>draco<\/code> flag:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;DamagedHelmet3D.gltz\\&quot;, {flags: \\&quot;draco\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;DamagedHelmet3D.gltz\\&quot;, {flags: \\&quot;draco\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;DamagedHelmet3D.gltz\\&quot; &gt; &lt;Transformation flags=\\&quot;draco\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;DamagedHelmet3D.gltz\\&quot; &gt;\\n\\t&lt;Transformation flags=\\&quot;draco\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;DamagedHelmet3D.gltz\\&quot; &gt; &lt;cld-transformation flags=\\&quot;draco\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;DamagedHelmet3D.gltz\\&quot; &gt;\\n\\t&lt;cld-transformation flags=\\&quot;draco\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;DamagedHelmet3D.gltz\\&quot; &gt; &lt;cl-transformation flags=\\&quot;draco\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;DamagedHelmet3D.gltz\\&quot; &gt;\\n\\t&lt;cl-transformation flags=\\&quot;draco\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;DamagedHelmet3D.gltz&#039;, {flags: \\&quot;draco\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;DamagedHelmet3D.gltz&#039;, {flags: \\&quot;draco\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).image(flags=\\&quot;draco\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).image(flags=\\&quot;draco\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;DamagedHelmet3D.gltz&#039;))\\n\\t-&gt;addFlag(\\&quot;draco\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;DamagedHelmet3D.gltz&#039;))\\n\\t-&gt;addFlag(\\&quot;draco\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;DamagedHelmet3D.gltz\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;draco\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;DamagedHelmet3D.gltz\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;draco\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;draco\\&quot;)).imageTag(\\&quot;DamagedHelmet3D.gltz\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;draco\\&quot;)).imageTag(\\&quot;DamagedHelmet3D.gltz\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;DamagedHelmet3D.gltz\\&quot;, flags: \\&quot;draco\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;DamagedHelmet3D.gltz\\&quot;, flags: \\&quot;draco\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;draco\\&quot;)).BuildImageTag(\\&quot;DamagedHelmet3D.gltz\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;draco\\&quot;)).BuildImageTag(\\&quot;DamagedHelmet3D.gltz\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;DamagedHelmet3D.gltz&#039;).transformation(Transformation()\\n\\t.addFlag(\\&quot;draco\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;DamagedHelmet3D.gltz&#039;).transformation(Transformation()\\n\\t.addFlag(\\&quot;draco\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;draco\\&quot;)).generate(\\&quot;DamagedHelmet3D.gltz\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;draco\\&quot;)).generate(\\&quot;DamagedHelmet3D.gltz\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;draco\\&quot;)).generate(\\&quot;DamagedHelmet3D.gltz\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;draco\\&quot;)).generate(\\&quot;DamagedHelmet3D.gltz\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;DamagedHelmet3D.gltz&#039;).transformation(Transformation()\\n\\t.addFlag(\\&quot;draco\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;DamagedHelmet3D.gltz&#039;).transformation(Transformation()\\n\\t.addFlag(\\&quot;draco\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;DamagedHelmet3D.gltz\\&quot;)\\n\\t addFlag(\\&quot;draco\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;DamagedHelmet3D.gltz\\&quot;)\\n\\t addFlag(\\&quot;draco\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;DamagedHelmet3D.gltz\\&quot;, {flags: \\&quot;draco\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;DamagedHelmet3D.gltz\\&quot;, {flags: \\&quot;draco\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;DamagedHelmet3D.gltz\\&quot;).addFlag(\\&quot;draco\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/fl_draco\\\/DamagedHelmet3D.gltz&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;flags&quot;:&quot;draco&quot;}],&quot;transformation_string&quot;:&quot;fl_draco&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;DamagedHelmet3D.gltz&quot;,&quot;extension&quot;:&quot;gltz&quot;,&quot;format&quot;:&quot;gltz&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<h2>Discover<\/h2>\n<p>Let your visitor interact with and discover more about your objects by using an appropriate viewer.<\/p>\n<p>The <a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery\">Cloudinary Product Gallery<\/a> has built-in support for 3D models in the <a href=\"https:\/\/cloudinary.com\/guides\/image-formats\/gltf-features-applications-and-5-essential-best-practices\">glTF format<\/a>, but if your model is in a different format, it can automatically convert it.  For example, here are <a href=\"#credits\">a few models of different formats<\/a> being displayed in the product gallery.  Feel free to zoom in and out of each model, and twist them round to all angles:<\/p>\n<script src=\"https:\/\/product-gallery.cloudinary.com\/all.js\" type=\"text\/javascript\">\n<\/script>  \n<div id=\"my-gallery\" style=\"max-width:80%;margin:auto\">\n<\/div>\n<script type=\"text\/javascript\">  \nconst myGallery= cloudinary.galleryWidget({\n  container: \"#my-gallery\",\n  cloudName: \"demo\",\n  mediaAssets: [\n    {publicId: \"docs\/cute-kitty\", mediaType: \"3d\"},\n    {publicId: \"docs\/CldLogo3D\", mediaType: \"3d\"},\n    {publicId: \"DamagedHelmet3D\", mediaType: \"3d\"}\n  ]\n});\n\nmyGallery.render();\n<\/script>\n<p>Here\u2019s the code you need to create the Product Gallery &#8211; just make sure to set the <code>mediaType<\/code> of each model to <code>3d<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/product-gallery.cloudinary.com\/all.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>  \n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-gallery\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"max-width:80%;margin:auto\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"actionscript\">  \n<span class=\"hljs-keyword\">const<\/span> myGallery= cloudinary.galleryWidget({\n  container: <span class=\"hljs-string\">\"#my-gallery\"<\/span>,\n  cloudName: <span class=\"hljs-string\">\"demo\"<\/span>,\n  mediaAssets: &#91;\n    {publicId: <span class=\"hljs-string\">\"docs\/cute-kitty\"<\/span>, mediaType: <span class=\"hljs-string\">\"3d\"<\/span>},\n    {publicId: <span class=\"hljs-string\">\"docs\/CldLogo3D\"<\/span>, mediaType: <span class=\"hljs-string\">\"3d\"<\/span>},\n    {publicId: <span class=\"hljs-string\">\"DamagedHelmet3D\"<\/span>, mediaType: <span class=\"hljs-string\">\"3d\"<\/span>}\n  ]\n});\n\nmyGallery.render();\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To show just one model, without the carousel options, you can specify <code>carouselStyle: &quot;none&quot;,<\/code> with one <code>mediaAsset<\/code>:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/product-gallery.cloudinary.com\/all.js\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>  \n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"my-gallery2\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"max-width:80%;margin:auto\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"actionscript\">  \n<span class=\"hljs-keyword\">const<\/span> myGallery2= cloudinary.galleryWidget({\n  container: <span class=\"hljs-string\">\"#my-gallery2\"<\/span>,\n  cloudName: <span class=\"hljs-string\">\"demo\"<\/span>,\n  carouselStyle: <span class=\"hljs-string\">\"none\"<\/span>,\n  mediaAssets: &#91;\n    {publicId: <span class=\"hljs-string\">\"docs\/cute-kitty\"<\/span>, mediaType: <span class=\"hljs-string\">\"3d\"<\/span>}\n  ]\n});\n\nmyGallery2.render();\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then, you can interact with the single model in its own viewer:<\/p>\n<div id=\"my-gallery2\" style=\"max-width:80%;margin:auto\">\n<\/div>\n<script type=\"text\/javascript\">  \nconst myGallery2= cloudinary.galleryWidget({\n  container: \"#my-gallery2\",\n  cloudName: \"demo\",\n  carouselStyle: \"none\",\n  mediaAssets: [\n    {publicId: \"docs\/cute-kitty\", mediaType: \"3d\"}\n  ]\n});\n\nmyGallery2.render();\n<\/script>\n<p>If you like that, then you\u2019ll love the <a href=\"https:\/\/cloudinary.com\/documentation\/ar_3d_viewer\">Cloudinary AR\/3D viewer<\/a>, a project that\u2019s being developed under <a href=\"https:\/\/cloudinary.com\/labs\">Cloudinary Labs<\/a>. Not only does this let you interact with your models, like the Product Gallery does, but it also lets you see your models in real world environments through augmented reality.<\/p>\n<p>The basic viewer is very easy to set up &#8211; just copy and paste this code into your HTML, setting <code>cloud<\/code> to the name of your product environment (a.k.a cloud name), and <code>models<\/code> to the public ID of a model in your Media Library.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/ar-3d-viewer.cloudinary.com\/main.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"width: 100%;\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ar-3d-viewer<\/span> <span class=\"hljs-attr\">cloud<\/span>=<span class=\"hljs-string\">\"demo\"<\/span> <span class=\"hljs-attr\">models<\/span>=<span class=\"hljs-string\">\"docs\/CldLogo3D\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ar-3d-viewer<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>It\u2019s that simple, and here\u2019s what you get:<\/p>\n<!--<script src=\"https:\/\/ar-3d-viewer.cloudinary.com\/main.js\"><\/script>-->\n<div style=\"width: 100%;\">\n<ar-3d-viewer cloud=\"demo\" models=\"docs\/CldLogo3D\">\n<\/ar-3d-viewer>\n<\/div>\n<p>If you click the \u2018View in AR\u2019 button, you can use a mobile device to see the model in your environment.<\/p>\n<p>There are loads of ways to customize the viewer, including applying dynamic lighting, skyboxes, texture variants, animations and more.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/ar-3d-viewer.cloudinary.com\/main.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"width: 100%;\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ar-3d-viewer<\/span> <span class=\"hljs-attr\">cloud<\/span>=<span class=\"hljs-string\">\"demo\"<\/span> <span class=\"hljs-attr\">models<\/span>=<span class=\"hljs-string\">\"docs\/3d\/cute-kitty\"<\/span> <span class=\"hljs-attr\">variants<\/span>=<span class=\"hljs-string\">\"true\"<\/span> <span class=\"hljs-attr\">hdr<\/span>=<span class=\"hljs-string\">\"docs\/park.hdr\"<\/span> <span class=\"hljs-attr\">skybox<\/span>=<span class=\"hljs-string\">\"true\"<\/span> <span class=\"hljs-attr\">animation-name<\/span>=<span class=\"hljs-string\">\"Walk\"<\/span> <span class=\"hljs-attr\">animation-play<\/span>=<span class=\"hljs-string\">\"true\"<\/span> <span class=\"hljs-attr\">shadow<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ar-3d-viewer<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<script src=\"https:\/\/ar-3d-viewer.cloudinary.com\/main.js\"><\/script>\n<div style=\"width: 100%;\">\n<ar-3d-viewer cloud=\"demo\" models=\"docs\/3d\/cute-kitty\" variants=\"true\" hdr=\"docs\/park.hdr\" skybox=\"true\" animation-name=\"Walk\" animation-play=\"true\" shadow=\"true\">\n<\/ar-3d-viewer>\n<\/div>\n<p>You can play with the features in this <a href=\"https:\/\/ar-3d-viewer-demo.cloudinary.com\/\">demo<\/a> and learn all about them in the <a href=\"https:\/\/cloudinary.com\/documentation\/ar_3d_viewer\">docs<\/a>.<\/p>\n<h2>What\u2019s Your Angle?<\/h2>\n<p>So, now you know the basics of how to display, deliver and discover more about your 3D models, how will you approach your next 3D challenge?  We\u2019d love to hear about your use cases and solutions &#8211; <a href=\"https:\/\/community.cloudinary.com\/\">join the discussion<\/a>!<\/p>\n<h2>Credits<\/h2>\n<p>These are the models used in the post:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1641313115\/docs\/CldLogo3D.glb\">CldLogo3D.glb<\/a>: a GLB file.<\/li>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1550654300\/DamagedHelmet3D.gltz\">DamagedHelmet3D.gltz<\/a>: a zip file, uploaded as an <code>image<\/code> asset type, containing a glTF file and other associated files.<\/li>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/foyer-table.fbxz\">foyer-table.fbxz<\/a>: a zip file, uploaded as an <code>image<\/code> asset type, containing an FBX file and other associated files. [\u00a9 <a href=\"https:\/\/sketchfab.com\/hippostance\" target=\"blank\">HippoStance<\/a>]<\/li>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/cute-kitty.glb\">cute-kitty.glb<\/a>: a GLB file. [\u201cCute Little Kitty\u201d <a href=\"https:\/\/skfb.ly\/ospAT\">https:\/\/skfb.ly\/ospAT<\/a> by Diskette96 is licensed under <a href=\"http:\/\/creativecommons.org\/licenses\/by\/4.0\/\">Creative Commons Attribution<\/a>.]<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":51,"featured_media":26610,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[354],"class_list":["post-26150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-3d"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The 3 Ds of 3D with Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to display, deliver and discover more about your 3D models using Cloudinary functionality.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The 3 Ds of 3D with Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to display, deliver and discover more about your 3D models using Cloudinary functionality.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-09T17:28:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-07T20:14:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1672949956\/3Ds_blog\/3Ds_blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"carolinelevison\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary\"},\"author\":{\"name\":\"carolinelevison\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/3aa69a111d568040952bbae297d8c8fb\"},\"headline\":\"The 3 Ds of 3D with Cloudinary\",\"datePublished\":\"2023-01-09T17:28:51+00:00\",\"dateModified\":\"2024-09-07T20:14:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA\",\"keywords\":[\"3D\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary\",\"name\":\"The 3 Ds of 3D with Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA\",\"datePublished\":\"2023-01-09T17:28:51+00:00\",\"dateModified\":\"2024-09-07T20:14:07+00:00\",\"description\":\"Learn how to display, deliver and discover more about your 3D models using Cloudinary functionality.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The 3 Ds of 3D with Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/3aa69a111d568040952bbae297d8c8fb\",\"name\":\"carolinelevison\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/84ac4e7f81e08358ca4d375889c0a8ffff006b90ba8a469d27d206229f779912?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/84ac4e7f81e08358ca4d375889c0a8ffff006b90ba8a469d27d206229f779912?s=96&d=mm&r=g\",\"caption\":\"carolinelevison\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The 3 Ds of 3D with Cloudinary","description":"Learn how to display, deliver and discover more about your 3D models using Cloudinary functionality.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary","og_locale":"en_US","og_type":"article","og_title":"The 3 Ds of 3D with Cloudinary","og_description":"Learn how to display, deliver and discover more about your 3D models using Cloudinary functionality.","og_url":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2023-01-09T17:28:51+00:00","article_modified_time":"2024-09-07T20:14:07+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1672949956\/3Ds_blog\/3Ds_blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"carolinelevison","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary"},"author":{"name":"carolinelevison","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/3aa69a111d568040952bbae297d8c8fb"},"headline":"The 3 Ds of 3D with Cloudinary","datePublished":"2023-01-09T17:28:51+00:00","dateModified":"2024-09-07T20:14:07+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA","keywords":["3D"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary","url":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary","name":"The 3 Ds of 3D with Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA","datePublished":"2023-01-09T17:28:51+00:00","dateModified":"2024-09-07T20:14:07+00:00","description":"Learn how to display, deliver and discover more about your 3D models using Cloudinary functionality.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/the-3-ds-of-3d-with-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The 3 Ds of 3D with Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/3aa69a111d568040952bbae297d8c8fb","name":"carolinelevison","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/84ac4e7f81e08358ca4d375889c0a8ffff006b90ba8a469d27d206229f779912?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/84ac4e7f81e08358ca4d375889c0a8ffff006b90ba8a469d27d206229f779912?s=96&d=mm&r=g","caption":"carolinelevison"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1672949956\/3Ds_blog\/3Ds_blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=26150"}],"version-history":[{"count":319,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26150\/revisions"}],"predecessor-version":[{"id":35589,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26150\/revisions\/35589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/26610"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=26150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=26150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=26150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}