Cloudinary Logo Cloudinary Docs | Docs
  • Programmable Media
    • Get Started
    • Guides
    • References
    • SDKs
    • Release Notes
    • Home
  • Digital Asset Management
    • Get Started
    • User Guides
    • Admin Guides
    • Release Notes
  • More Products
    • Integrations Add Cloudinary capabilities to your tech stack apps and platforms
    • MediaFlows Low-code workflow automation for images and videos
    • Media Optimizer Low-code media optimization for targeted Enterprise organizations
    • FinalTouch (Early Access) AI-powered virtual photoshoot and image creation for eCommerce
    • Dimensions Create and deliver engaging 3D immersive experiences
    • Cloudinary Labs Leading-edge tools and apps in active development
  • Resources
    • Blog
    • Training
    • Support
    • Community
    • Podcasts
    • Demos
    • Roadmap
    • Cookbook
    • Additional Resources
  • Pricing
cloudinary_web_login_icon Login
sign up for free
  • Get Started
    • Programmable Media overview
    • Developer onboarding guide
      • 5-step walkthrough
      • Service introduction
      • Onboarding FAQ
      • Enterprise onboarding FAQ
      • Migration guide
      • How are transformations counted?
      • Glossary
    • SDK quick starts
    • Try it!
      • Code explorers and feature demos
      • Using Cloudinary Postman collections
    • Video tutorial library
      • Programmatic asset management
      • Transformations and optimizations
      • Administration
  • Guides
    • Upload
      • Uploading assets
      • Transformations on upload
      • Analysis on upload
      • Upload presets
      • Upload API reference
    • Image transformations
      • Image transformations overview
      • Resizing and cropping
      • Placing layers on images
      • Effects and enhancements
      • Face-detection based transformations
      • Animated images
      • Transformations on 3D models
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Custom functions
    • Video transformations
      • Video transformations overview
      • Resizing and cropping
      • Trimming and concatenating
      • Placing layers on videos
      • Effects and enhancements
      • Audio transformations
      • Advanced video transformations
    • Optimization
      • Overview
      • Image optimization
      • Responsive images
      • Video optimization
      • Adaptive bitrate streaming
      • Audio optimization
    • Delivery
      • Deliver remote media files
      • Social media profile pictures
      • Paged and layered media
      • Media access methods
      • Advanced URL delivery options
    • Management
      • Basic management
      • Search for assets
      • Custom metadata
      • Create assets
      • Backups and version management
      • Account usage data
      • Webhook notifications
      • Signatures
    • Video at scale
      • Video best practices
      • Video Analytics
      • Video Player
      • Live streaming
    • AI in action
    • Native mobile best practices
    • Widgets
      • Upload Widget
      • Product Gallery
      • Media Editor
    • Add-ons
      • Advanced Facial Attributes Detection
      • Amazon Rekognition AI Moderation
      • Amazon Rekognition Video Moderation
      • Amazon Rekognition Auto Tagging
      • Amazon Rekognition Celebrity Detection
      • Aspose Document Conversion
      • Cloudinary AI Background Removal
      • Cloudinary AI Content Analysis
      • Cloudinary Duplicate Image Detection
      • Google AI Video Moderation
      • Google AI Video Transcription
      • Google Auto Tagging
      • Google Automatic Video Tagging
      • Google Translation
      • Imagga Auto Tagging
      • Imagga Crop and Scale
      • Perception Point Malware Detection
      • Microsoft Azure Video Indexer
      • Neural Artwork Style Transfer
      • OCR Text Detection and Extraction
      • Pixelz - Remove the Background
      • URL2PNG Website Screenshots
      • VIESUS™ Automatic Image Enhancement
      • WebPurify Image Moderation
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Provisioning API
    • Cloudinary CLI
    • SDK references
      • Transformation Builder reference
      • React SDK reference
      • Vue.js SDK reference
      • JavaScript SDK reference
      • Angular SDK reference
      • PHP SDK reference
      • Go SDK reference
      • Dart SDK reference
      • Flutter SDK reference
    • Postman collections
    • Upload Widget API
    • Product Gallery API
    • Media Editor API
    • Video Player API
  • SDKs
    • Backend SDKs
      • Node.js SDK
      • Python SDK
      • PHP SDK
      • Java SDK
      • Ruby/Rails SDK
      • .NET SDK
      • Go SDK
      • Dart SDK
      • PHP SDK (Legacy)
    • Frontend SDKs
      • React SDK
      • Vue.js SDK
      • Angular SDK
      • JavaScript SDK
      • jQuery SDK
      • React SDK (Legacy)
      • Vue.js SDK (Legacy)
      • Angular SDK (Legacy)
      • JavaScript SDK (Legacy)
    • Mobile SDKs
      • iOS SDK
      • Android SDK
      • Kotlin SDK
      • Flutter SDK
      • React Native SDK
    • Community-developed libraries
      • Gatsby
      • Gridsome
      • Laravel
      • Netlify
      • Next.js
      • NuxtJS
      • Svelte
  • Release Notes
    • Latest: November 13, 2023
    • October 26, 2023
    • September 21, 2023
    • Previous releases
      • August 15, 2023
      • July 13, 2023
      • June 19, 2023
      • May 16, 2023
      • Apr 04, 2023
      • Feb 21, 2023
      • Dec 27, 2022
  • Get Started
    • Programmable Media overview
    • Developer onboarding guide
      • 5-step walkthrough
      • Service introduction
      • Onboarding FAQ
        • Enterprise onboarding FAQ
        • Migration guide
        • How are transformations counted?
        • Glossary
      • SDK quick starts
      • Try it!
        • Code explorers and feature demos
        • Using Cloudinary Postman collections
      • Video tutorial library
        • Programmatic asset management
          • Programmatic upload
            • Upload programmatically
            • Create upload presets
            • Auto upload
            • Auto-tag assets
            • Upload images in Flutter
            • Upload images in Node.js
            • Upload videos in Node.js
            • Upload assets in a React app
            • Upload assets in a SvelteKit app
            • Upload assets in a Remix app
          • Programmatic delivery
            • Deliver images with the Next.js Image component
            • Deliver images with the Nuxt Image component
            • Diagnosing error codes
          • Interaction with Cloudinary APIs
            • Generate upload signature
            • Postman collections introduction
          • Cloudinary SDKs
            • Find your credentials
            • Configure the JavaScript SDK
            • Configure the Flutter SDK
            • Configure the Javascript SDK in Svelte
            • Configure the Node.js SDK
            • Configure the Vue.js SDK
            • Delete assets with Node.js
          • Cloudinary CLI
            • Get started with the CLI
            • Scripting with the CLI
            • Get creative with the CLI
            • Upload with the CLI
          • Widgets
            • Upload Widget
            • Product Gallery
            • Product Gallery in React
            • Product Gallery accessibility
          • Video Player
            • Video Player in React
            • Video Player in Next.js
            • Video Player in HTML
        • Transformations and optimizations
          • Get started with transformations
            • Transformation basics
            • Transformation Builder
            • Optimization tips
            • Gravity-based crops for images
            • Transformations overlays
            • Content-aware video cropping
            • Convert videos to animated images
          • Advanced transformation features
            • Text overlay transformations
            • Complex transformations
            • Named transformations
            • Named transformations using TX Builder
            • Advanced image components
            • Trim videos in Node.js
            • Splice videos in Node.js
            • Zoompan effect
            • Video transformations
            • Optimize images in Flutter
            • Optimize Images with Nuxt Cloudinary
            • Optimize Images in SolidJS with Cloudinary
            • Crop and resize images in React
            • Crop and resize videos in React
            • Optimize videos in React
            • Optimize videos in Next.js
            • Transform and optimize images in Svelte
            • Remove backgrounds and add drop shadows
          • Transformations for social media
            • Social media image cards in Next.js
        • Administration
          • Enable automatic backups
          • Restore asset versions
          • Restore deleted assets
    • Guides
      • Upload
        • Uploading assets
        • Transformations on upload
        • Analysis on upload
        • Upload presets
        • Upload API reference
      • Image transformations
        • Image transformations overview
        • Resizing and cropping
        • Placing layers on images
        • Effects and enhancements
        • Face-detection based transformations
        • Animated images
        • Transformations on 3D models
        • Conditional transformations
        • User-defined variables and arithmetic transformations
        • Custom functions
      • Video transformations
        • Video transformations overview
        • Resizing and cropping
        • Trimming and concatenating
        • Placing layers on videos
        • Effects and enhancements
        • Audio transformations
        • Advanced video transformations
          • Converting videos to animated images
          • Conditional transformations
          • User-defined variables and arithmetic transformations
      • Optimization
        • Overview
        • Image optimization
        • Responsive images
          • Using HTML and dynamic image transformations
          • Using JavaScript frontend frameworks
          • Using the cloudinary-core JS library
          • Using client hints
        • Video optimization
        • Adaptive bitrate streaming
        • Audio optimization
      • Delivery
        • Deliver remote media files
        • Social media profile pictures
        • Paged and layered media
        • Media access methods
        • Advanced URL delivery options
      • Management
        • Basic management
          • Media Explorer
          • Update assets
          • Delete assets
          • Rename assets
          • Relate assets
          • Invalidate cached media assets on the CDN
        • Search for assets
          • Search API method
          • Cacheable search URLs
          • Visual Search
          • Media Explorer search
          • Search expressions
        • Custom metadata
          • Tags
          • Contextual metadata
          • Structured metadata
            • Conditional metadata rules
        • Create assets
          • Animated images
          • Videos
          • Archives
          • Sprites
          • Image collages
          • PDF files from images
          • Images from text
        • Backups and version management
        • Account usage data
        • Webhook notifications
        • Signatures
      • Video at scale
        • Video best practices
        • Video Analytics
        • Video Player
          • Video Player features
          • Installation and setup
          • How to embed the Video Player
          • Video Player customization
          • Playlists and recommendations
          • HLS and MPEG-DASH
          • Video Player advanced features
            • Events and analytics
            • Video ads and monetization
            • Shoppable Video
            • Interactive Video (Beta)
          • Video Player API reference
        • Live streaming
          • Simulated live streaming
      • AI in action
      • Native mobile best practices
      • Widgets
        • Upload Widget
        • Product Gallery
        • Media Editor
      • Add-ons
        • Advanced Facial Attributes Detection
        • Amazon Rekognition AI Moderation
        • Amazon Rekognition Video Moderation
        • Amazon Rekognition Auto Tagging
        • Amazon Rekognition Celebrity Detection
        • Aspose Document Conversion
        • Cloudinary AI Background Removal
        • Cloudinary AI Content Analysis
        • Cloudinary Duplicate Image Detection
        • Google AI Video Moderation
        • Google AI Video Transcription
        • Google Auto Tagging
        • Google Automatic Video Tagging
        • Google Translation
        • Imagga Auto Tagging
        • Imagga Crop and Scale
        • Perception Point Malware Detection
        • Microsoft Azure Video Indexer
        • Neural Artwork Style Transfer
        • OCR Text Detection and Extraction
        • Pixelz - Remove the Background
        • URL2PNG Website Screenshots
        • VIESUS™ Automatic Image Enhancement
        • WebPurify Image Moderation
    • References
      • Transformation URL API
      • Upload API
      • Admin API
      • Provisioning API
      • Cloudinary CLI
      • SDK references
        • Transformation Builder reference
        • React SDK reference
        • Vue.js SDK reference
        • JavaScript SDK reference
        • Angular SDK reference
        • PHP SDK reference
        • Go SDK reference
        • Dart SDK reference
        • Flutter SDK reference
      • Postman collections
      • Upload Widget API
      • Product Gallery API
      • Media Editor API
      • Video Player API
    • SDKs
      • Backend SDKs
        • Node.js SDK
          • Node.js introduction
          • Node.js quick start
          • Node.js image and video upload
          • Node.js image transformations
          • Node.js video transformations
          • Node.js asset administration
        • Python SDK
          • Python introduction
          • Python quick start
          • Python image and video upload
          • Python image transformations
          • Python video transformations
          • Python asset administration
        • PHP SDK
          • PHP introduction
          • PHP quick start
          • PHP image and video upload
          • PHP image transformations
          • PHP video transformations
          • PHP asset administration
          • PHP Management reference
          • PHP Transformation reference
        • Java SDK
          • Java introduction
          • Java quick start
          • Java image and video upload
          • Java image transformations
          • Java video transformations
          • Java asset administration
        • Ruby/Rails SDK
          • Ruby/Rails introduction
          • Ruby/Rails quick start
          • Ruby/Rails image and video upload
          • Ruby/Rails image transformations
          • Ruby/Rails video transformations
          • Ruby/Rails asset administration
          • CarrierWave integration
          • Attachinary integration
          • Active Storage integration
        • .NET SDK
          • .NET introduction
          • .NET quick start
          • .NET image and video upload
          • .NET image transformations
          • .NET video transformations
          • .NET asset administration
        • Go SDK
          • Go introduction
          • Go quick start
          • Go image and video upload
          • Go media transformations
          • Go asset administration
          • Go SDK reference
        • Dart SDK
          • Dart introduction
          • Dart quick start
          • Dart image and video upload
          • Dart media transformations
          • Dart SDK reference
        • PHP SDK (Legacy)
          • PHP introduction
          • PHP image and video upload
          • PHP image transformations
          • PHP video transformations
          • PHP asset administration
          • PHP migration guide
      • Frontend SDKs
        • React SDK
          • React introduction
          • React quick start
          • React image and video upload
          • React image transformations
          • React video transformations
          • React SDK reference
          • Transformation Builder reference
        • Vue.js SDK
          • Vue.js introduction
          • Vue.js quick start
          • Vue.js image and video upload
          • Vue.js image transformations
          • Vue.js video transformations
          • Vue.js SDK reference
          • Transformation Builder reference
        • Angular SDK
          • Angular introduction
          • Angular quick start
          • Angular image and video upload
          • Angular image transformations
          • Angular video transformations
          • Angular SDK reference
          • Transformation Builder reference
        • JavaScript SDK
          • JavaScript introduction
          • JavaScript quick start
          • JavaScript image and video upload
          • JavaScript image transformations
          • JavaScript video transformations
          • JavaScript SDK reference
          • Transformation Builder reference
        • jQuery SDK
          • jQuery introduction
          • jQuery image and video upload
          • jQuery image transformations
          • jQuery video transformations
        • React SDK (Legacy)
          • React introduction
          • React image and video upload
          • React image transformations
          • React video transformations
          • React migration guide
        • Vue.js SDK (Legacy)
          • Vue.js introduction
          • Vue.js image and video upload
          • Vue.js image transformations
          • Vue.js video transformations
          • Vue.js migration guide
        • Angular SDK (Legacy)
          • Angular introduction
          • Angular image and video upload
          • Angular image transformations
          • Angular video transformations
          • Angular migration guide
        • JavaScript SDK (Legacy)
          • JavaScript introduction
          • JavaScript image and video upload
          • JavaScript image transformations
          • JavaScript video transformations
          • JavaScript migration guide
      • Mobile SDKs
        • iOS SDK
          • iOS introduction
          • iOS image and video upload
          • iOS image transformations
          • iOS video transformations
        • Android SDK
          • Android introduction
          • Android image and video upload
          • Android image transformations
          • Android video transformations
        • Kotlin SDK
          • Kotlin media transformations
        • Flutter SDK
          • Flutter introduction
          • Flutter quick start
          • Flutter image and video upload
          • Flutter media transformations
          • Dart-based cloudinary_url_gen package reference
          • Flutter SDK reference
        • React Native SDK
          • React Native introduction
          • React Native image and video upload
          • React Native image transformations
      • Community-developed libraries
        • Gatsby
        • Gridsome
        • Laravel
        • Netlify
        • Next.js
        • NuxtJS
        • Svelte
    • Release Notes
      • Latest: November 13, 2023
      • October 26, 2023
      • September 21, 2023
      • Previous releases
        • August 15, 2023
        • July 13, 2023
        • June 19, 2023
        • May 16, 2023
        • Apr 04, 2023
        • Feb 21, 2023
        • Dec 27, 2022
    Programmable Media
    • Get Started
    • Guides
    • References
    • SDKs
    • Release Notes
    • Home
    Digital Asset Management
    • Get Started
    • User Guides
    • Admin Guides
    • Release Notes
  • More Products
      More Products
      Integrations
      Add Cloudinary capabilities to your tech stack apps and platforms
      MediaFlows
      Low-code workflow automation for images and videos
      Media Optimizer
      Low-code media optimization for targeted Enterprise organizations
      FinalTouch (Early Access)
      AI-powered virtual photoshoot and image creation for eCommerce
      Dimensions
      Create and deliver engaging 3D immersive experiences
      Cloudinary Labs
      Leading-edge tools and apps in active development
  • Resources
      Resources
      Blog
      Training
      Support
      Community
      Podcasts
      Demos
      Roadmap
      Cookbook
      Additional Resources
  • Pricing
    sign up for free
    Programmable Media
    Menu
    • Get Started
      • Programmable Media overview
      • Developer onboarding guide
        • 5-step walkthrough
        • Service introduction
        • Onboarding FAQ
          • Enterprise onboarding FAQ
          • Migration guide
          • How are transformations counted?
          • Glossary
        • SDK quick starts
        • Try it!
          • Code explorers and feature demos
          • Using Cloudinary Postman collections
        • Video tutorial library
          • Programmatic asset management
            • Programmatic upload
              • Upload programmatically
              • Create upload presets
              • Auto upload
              • Auto-tag assets
              • Upload images in Flutter
              • Upload images in Node.js
              • Upload videos in Node.js
              • Upload assets in a React app
              • Upload assets in a SvelteKit app
              • Upload assets in a Remix app
            • Programmatic delivery
              • Deliver images with the Next.js Image component
              • Deliver images with the Nuxt Image component
              • Diagnosing error codes
            • Interaction with Cloudinary APIs
              • Generate upload signature
              • Postman collections introduction
            • Cloudinary SDKs
              • Find your credentials
              • Configure the JavaScript SDK
              • Configure the Flutter SDK
              • Configure the Javascript SDK in Svelte
              • Configure the Node.js SDK
              • Configure the Vue.js SDK
              • Delete assets with Node.js
            • Cloudinary CLI
              • Get started with the CLI
              • Scripting with the CLI
              • Get creative with the CLI
              • Upload with the CLI
            • Widgets
              • Upload Widget
              • Product Gallery
              • Product Gallery in React
              • Product Gallery accessibility
            • Video Player
              • Video Player in React
              • Video Player in Next.js
              • Video Player in HTML
          • Transformations and optimizations
            • Get started with transformations
              • Transformation basics
              • Transformation Builder
              • Optimization tips
              • Gravity-based crops for images
              • Transformations overlays
              • Content-aware video cropping
              • Convert videos to animated images
            • Advanced transformation features
              • Text overlay transformations
              • Complex transformations
              • Named transformations
              • Named transformations using TX Builder
              • Advanced image components
              • Trim videos in Node.js
              • Splice videos in Node.js
              • Zoompan effect
              • Video transformations
              • Optimize images in Flutter
              • Optimize Images with Nuxt Cloudinary
              • Optimize Images in SolidJS with Cloudinary
              • Crop and resize images in React
              • Crop and resize videos in React
              • Optimize videos in React
              • Optimize videos in Next.js
              • Transform and optimize images in Svelte
              • Remove backgrounds and add drop shadows
            • Transformations for social media
              • Social media image cards in Next.js
          • Administration
            • Enable automatic backups
            • Restore asset versions
            • Restore deleted assets
      • Guides
        • Upload
          • Uploading assets
          • Transformations on upload
          • Analysis on upload
          • Upload presets
          • Upload API reference
        • Image transformations
          • Image transformations overview
          • Resizing and cropping
          • Placing layers on images
          • Effects and enhancements
          • Face-detection based transformations
          • Animated images
          • Transformations on 3D models
          • Conditional transformations
          • User-defined variables and arithmetic transformations
          • Custom functions
        • Video transformations
          • Video transformations overview
          • Resizing and cropping
          • Trimming and concatenating
          • Placing layers on videos
          • Effects and enhancements
          • Audio transformations
          • Advanced video transformations
            • Converting videos to animated images
            • Conditional transformations
            • User-defined variables and arithmetic transformations
        • Optimization
          • Overview
          • Image optimization
          • Responsive images
            • Using HTML and dynamic image transformations
            • Using JavaScript frontend frameworks
            • Using the cloudinary-core JS library
            • Using client hints
          • Video optimization
          • Adaptive bitrate streaming
          • Audio optimization
        • Delivery
          • Deliver remote media files
          • Social media profile pictures
          • Paged and layered media
          • Media access methods
          • Advanced URL delivery options
        • Management
          • Basic management
            • Media Explorer
            • Update assets
            • Delete assets
            • Rename assets
            • Relate assets
            • Invalidate cached media assets on the CDN
          • Search for assets
            • Search API method
            • Cacheable search URLs
            • Visual Search
            • Media Explorer search
            • Search expressions
          • Custom metadata
            • Tags
            • Contextual metadata
            • Structured metadata
              • Conditional metadata rules
          • Create assets
            • Animated images
            • Videos
            • Archives
            • Sprites
            • Image collages
            • PDF files from images
            • Images from text
          • Backups and version management
          • Account usage data
          • Webhook notifications
          • Signatures
        • Video at scale
          • Video best practices
          • Video Analytics
          • Video Player
            • Video Player features
            • Installation and setup
            • How to embed the Video Player
            • Video Player customization
            • Playlists and recommendations
            • HLS and MPEG-DASH
            • Video Player advanced features
              • Events and analytics
              • Video ads and monetization
              • Shoppable Video
              • Interactive Video (Beta)
            • Video Player API reference
          • Live streaming
            • Simulated live streaming
        • AI in action
        • Native mobile best practices
        • Widgets
          • Upload Widget
          • Product Gallery
          • Media Editor
        • Add-ons
          • Advanced Facial Attributes Detection
          • Amazon Rekognition AI Moderation
          • Amazon Rekognition Video Moderation
          • Amazon Rekognition Auto Tagging
          • Amazon Rekognition Celebrity Detection
          • Aspose Document Conversion
          • Cloudinary AI Background Removal
          • Cloudinary AI Content Analysis
          • Cloudinary Duplicate Image Detection
          • Google AI Video Moderation
          • Google AI Video Transcription
          • Google Auto Tagging
          • Google Automatic Video Tagging
          • Google Translation
          • Imagga Auto Tagging
          • Imagga Crop and Scale
          • Perception Point Malware Detection
          • Microsoft Azure Video Indexer
          • Neural Artwork Style Transfer
          • OCR Text Detection and Extraction
          • Pixelz - Remove the Background
          • URL2PNG Website Screenshots
          • VIESUS™ Automatic Image Enhancement
          • WebPurify Image Moderation
      • References
        • Transformation URL API
        • Upload API
        • Admin API
        • Provisioning API
        • Cloudinary CLI
        • SDK references
          • Transformation Builder reference
          • React SDK reference
          • Vue.js SDK reference
          • JavaScript SDK reference
          • Angular SDK reference
          • PHP SDK reference
          • Go SDK reference
          • Dart SDK reference
          • Flutter SDK reference
        • Postman collections
        • Upload Widget API
        • Product Gallery API
        • Media Editor API
        • Video Player API
      • SDKs
        • Backend SDKs
          • Node.js SDK
            • Node.js introduction
            • Node.js quick start
            • Node.js image and video upload
            • Node.js image transformations
            • Node.js video transformations
            • Node.js asset administration
          • Python SDK
            • Python introduction
            • Python quick start
            • Python image and video upload
            • Python image transformations
            • Python video transformations
            • Python asset administration
          • PHP SDK
            • PHP introduction
            • PHP quick start
            • PHP image and video upload
            • PHP image transformations
            • PHP video transformations
            • PHP asset administration
            • PHP Management reference
            • PHP Transformation reference
          • Java SDK
            • Java introduction
            • Java quick start
            • Java image and video upload
            • Java image transformations
            • Java video transformations
            • Java asset administration
          • Ruby/Rails SDK
            • Ruby/Rails introduction
            • Ruby/Rails quick start
            • Ruby/Rails image and video upload
            • Ruby/Rails image transformations
            • Ruby/Rails video transformations
            • Ruby/Rails asset administration
            • CarrierWave integration
            • Attachinary integration
            • Active Storage integration
          • .NET SDK
            • .NET introduction
            • .NET quick start
            • .NET image and video upload
            • .NET image transformations
            • .NET video transformations
            • .NET asset administration
          • Go SDK
            • Go introduction
            • Go quick start
            • Go image and video upload
            • Go media transformations
            • Go asset administration
            • Go SDK reference
          • Dart SDK
            • Dart introduction
            • Dart quick start
            • Dart image and video upload
            • Dart media transformations
            • Dart SDK reference
          • PHP SDK (Legacy)
            • PHP introduction
            • PHP image and video upload
            • PHP image transformations
            • PHP video transformations
            • PHP asset administration
            • PHP migration guide
        • Frontend SDKs
          • React SDK
            • React introduction
            • React quick start
            • React image and video upload
            • React image transformations
            • React video transformations
            • React SDK reference
            • Transformation Builder reference
          • Vue.js SDK
            • Vue.js introduction
            • Vue.js quick start
            • Vue.js image and video upload
            • Vue.js image transformations
            • Vue.js video transformations
            • Vue.js SDK reference
            • Transformation Builder reference
          • Angular SDK
            • Angular introduction
            • Angular quick start
            • Angular image and video upload
            • Angular image transformations
            • Angular video transformations
            • Angular SDK reference
            • Transformation Builder reference
          • JavaScript SDK
            • JavaScript introduction
            • JavaScript quick start
            • JavaScript image and video upload
            • JavaScript image transformations
            • JavaScript video transformations
            • JavaScript SDK reference
            • Transformation Builder reference
          • jQuery SDK
            • jQuery introduction
            • jQuery image and video upload
            • jQuery image transformations
            • jQuery video transformations
          • React SDK (Legacy)
            • React introduction
            • React image and video upload
            • React image transformations
            • React video transformations
            • React migration guide
          • Vue.js SDK (Legacy)
            • Vue.js introduction
            • Vue.js image and video upload
            • Vue.js image transformations
            • Vue.js video transformations
            • Vue.js migration guide
          • Angular SDK (Legacy)
            • Angular introduction
            • Angular image and video upload
            • Angular image transformations
            • Angular video transformations
            • Angular migration guide
          • JavaScript SDK (Legacy)
            • JavaScript introduction
            • JavaScript image and video upload
            • JavaScript image transformations
            • JavaScript video transformations
            • JavaScript migration guide
        • Mobile SDKs
          • iOS SDK
            • iOS introduction
            • iOS image and video upload
            • iOS image transformations
            • iOS video transformations
          • Android SDK
            • Android introduction
            • Android image and video upload
            • Android image transformations
            • Android video transformations
          • Kotlin SDK
            • Kotlin media transformations
          • Flutter SDK
            • Flutter introduction
            • Flutter quick start
            • Flutter image and video upload
            • Flutter media transformations
            • Dart-based cloudinary_url_gen package reference
            • Flutter SDK reference
          • React Native SDK
            • React Native introduction
            • React Native image and video upload
            • React Native image transformations
        • Community-developed libraries
          • Gatsby
          • Gridsome
          • Laravel
          • Netlify
          • Next.js
          • NuxtJS
          • Svelte
      • Release Notes
        • Latest: November 13, 2023
        • October 26, 2023
        • September 21, 2023
        • Previous releases
          • August 15, 2023
          • July 13, 2023
          • June 19, 2023
          • May 16, 2023
          • Apr 04, 2023
          • Feb 21, 2023
          • Dec 27, 2022
      • Programmable Media
      • Get Started
      • Video tutorial library
      • Programmatic asset management
      • Widgets
      • Product Gallery accessibility

      Product Gallery accessibility features (video tutorial)

      Last updated: Oct-31-2023

      On this page:

      • Overview
      • Video tutorial
      • Tutorial contents
      • Keep learning

      Overview

      Thanks to accessibility features in Cloudinary's Product Gallery, including keyboard accessibility, alt-text for screen readers and multiple levels of zoom, all of your site's visitors can have an amazing experience.

      Video tutorial


      This video is brought to you by Cloudinary's video player - embed your own!

      Tutorial contents

      This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

      Why accessibility matters

      Jump to this spot in the video  0:00 The people using your websites may have physical disabilities and be unable to use a mouse. Instead, they rely exclusively on their keyboard to navigate and learn about your products. Moreover, those with vision impairments turn to assistive technology in order to access content on the web.

      Review product images and videos via keyboard

      Jump to this spot in the video  0:51 Keyboard-only users can navigate to the Product Gallery on a page by using the Tab button, then review product images and videos by pressing Tab and Shift+ Tab to navigate forward and back.

      View a specific asset and its details

      Jump to this spot in the video  1:07 Hit Enter to view an asset or zoom into the detail, then use the Escape key to exit the product-focused view.

      Start and stop product videos with the spacebar

      Jump to this spot in the video  1:17 The Spacebar is used to play or pause any product video content. For this functionality, you can add a videoProps object to provide these controls.

      Example code:

      Understand the benefits of alt text

      Jump to this spot in the video  1:29 Visitors' screen readers can provide important product details to those who are visually impaired. Descriptions of an item's colors, materials, textures and styles can help the customer make the right choice.
      Jump to this spot in the video  1:47 Additionally, adding alt-text can even benefit your search engine optimization efforts for your site, helping crawlers at Google and other services to better understand the content.

      Add alt-text for your gallery's products

      To add alt-text descriptions, open your Cloudinary Console.

      Jump to this spot in the video  1:58 Step 1: Visit the Media Library and double-click the asset you want to manage.
      Jump to this spot in the video  2:09 Step 2: Move to the Metadata tab and add a description in the contextual metadata section.
      Jump to this spot in the video  2:22 Step 3: Add your accessibilityProps to the Product Gallery, specifying the name of the metadata key and indicating the values are associated with the contextual metadata on the assets.

      Example code:

      Modify the gallery's zoom controls for keyboard-only use

      Jump to this spot in the video  3:02 Add zoomProps to your Product Gallery to modify its default properties, allowing for a popup to appear with plus and minus icons.

      Example code:


      Keep learning

      Related topics
      • Use the tutorial's associated sandbox to test all of the shown features.
      • Review all of the functionality available in the Product Gallery.
      • Check out our Product Gallery demonstration page with many more aspects, including event and analytics tracking.

      If you like this, you might also like...

      Product Gallery
      Embed a Product Gallery in your Web or WordPress site
      Upload Programmatically
      Use a Cloudinary SDK to upload media assets
      Get Started with the CLI
      Set up the CLI and get familiar with some basic commands

       

      Cloudinary Academy

       

      Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

       

      ✔️ Feedback sent!

      ✖️  
      How helpful was this doc page?

      Thanks for submitting your rating. We got it!
      We'd love to hear more. Tell us what you liked and how we can make this page even better:

      *


      Cloudinary is committed to protecting your information security. For details, see our privacy policy.

      For additional assistance, open a support request.

      Error

      Unfortunately there's been an error sending your feedback.

      Rate this page:

      • Product Gallery in React (video tutorial)
      • Video Player tutorials
      Cloudinary Logo - White
      Products
      • Programmable Media
      • DAM
      • Demos
      • Pricing
      • Roadmap
      • FAQ
      Solutions
        • Why Cloudinary
        • Video API
        • E-commerce
        • Retail
        • Media & Entertainment
        • Travel & Hospitality
        • Non-Profits
        • Our Customers
        • Resource Library
        Developers
        • Getting Started
        • Documentation
        • Community
        • SDKs
        • Add-ons
        • Podcasts
        • Cookbook
        Company
        • About Us
        • Customers
        • Partners
        • Events
        • Careers
        • Newsroom
        • Blog
        • Brand Assets
        • Trust
        Contact Us
        • Technical Support
        • Contact Sales
        • Education & Training
        • Institute of Quality & Control
        • GDPR
        • SOC
        • Forbes Best Startup Employers 2020
        • MarTech Breakthrough Awards
        • Best Places to Work SVBJ 2018
        • 2020 The World's Best Cloud Companies
        • Terms of Use
        • Privacy Policy
        • DMCA Notice

        © 2023 Cloudinary. All rights reserved.