Cloudinary Logo Docs Documentation
  • Get Started
    • Programmable Media
      • Developer get started guide
      • Service overview
      • Try it! Explorers and demos
      • How are transformations counted?
      • Glossary
    • Media Optimizer
    • Digital Asset Management
    • Video tutorial library
      • Digital Asset Management (DAM)
      • Programmatic asset management
      • Transformations and optimizations
      • Administration
      • Platform integrations
  • Guides
    • Media upload
      • Overview
      • 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
      • Adaptive bitrate streaming
      • Converting videos to animated images
      • Audio transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Live streaming
      • Video slideshow generation (Beta)
    • Media delivery
      • Media optimization
      • Responsive images
      • Deliver remote media files
      • Social media profile pictures
      • Paged and layered media
      • Media access control
      • Sprite generation
      • Advanced URL delivery options
    • Asset administration
      • Overview
      • Managing assets
      • Backups and version management
      • Notifications
      • Signatures
    • Widgets and players
      • Upload Widget
      • Media Library Widget
      • Media Editor
      • Product Gallery
      • Video Player
    • 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
      • JPEGmini Image Optimization
      • MetaDefender Anti-Malware Protection
      • 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
    • Media Optimizer
      • Quick starts
      • Overview
      • Configuration
      • Dashboard
      • Reports
      • Transformations
    • Digital Asset Management
      • Overview
      • Uploading and storing assets
      • Folders and collections
      • Advanced search
      • Managing individual media assets
      • Media Library administration
    • Platform integrations
      • Adobe Creative Cloud Connector
      • Akeneo PIM Integration
      • Chrome Media Library Extension
      • Magento Extension
      • Salesforce Commerce Cloud Cartridges
      • Salesforce Marketing Cloud App
      • SAP Commerce Extension
      • Shopify App
      • WordPress Plugin
      • Zapier Integration
      • Partner-built integrations
      • How to build your own integration
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Structured Metadata
      • Metadata API
      • Conditional metadata rules API
    • Provisioning API
    • Cloudinary CLI
    • Upload Widget API
    • Video Player API
    • Product Gallery API
    • Media Editor API
    • Media Optimizer
      • Media Optimizer API
      • Transformation reference
  • SDKs
    • Backend SDKs
      • Ruby On Rails SDK
      • PHP SDK
      • Python SDK
      • Node.js SDK
      • Java SDK
      • .NET SDK
      • Go SDK
      • PHP SDK (Legacy)
    • Frontend SDKs
      • JavaScript SDK
      • Angular SDK
      • React SDK
      • Vue.js SDK
      • jQuery SDK
      • JavaScript SDK (Legacy)
      • Angular SDK (Legacy)
      • React SDK (Legacy)
    • Mobile SDKs
      • iOS SDK
      • Android SDK
      • Kotlin SDK
    • Community-developed libraries
      • Gatsby
      • Gridsome
      • Laravel
      • Netlify
      • NuxtJS
      • Storefront UI
TrainingBlogPodcastsMediaJams.devDemosSupportRoadmapCookbookFacebook CommunityAdditional Resources
  • Training
  • Blog
  • Podcasts
  • MediaJams.dev
  • Demos
  • Support
  • Roadmap
  • Cookbook
  • Facebook Community
  • Additional Resources
Login
sign up for free
  • Get Started
    • Programmable Media
      • Developer get started guide
      • Service overview
      • Try it! Explorers and demos
      • How are transformations counted?
      • Glossary
    • Media Optimizer
    • Digital Asset Management
    • Video tutorial library
      • Digital Asset Management (DAM)
        • Dashboard intro
        • Folder sharing
        • Collection management
        • Collection sharing
        • Transformation presets
        • Media Library intro
        • Media Library upload
        • Video management intro
        • Advanced search
      • Programmatic asset management
        • Upload programmatically
        • Create upload presets
        • Generate upload signature
        • Get started with the CLI
        • Scripting with the CLI
        • Get creative with the CLI
        • Upload with the CLI
        • Product Gallery
        • Product Gallery accessibility
      • Transformations and optimizations
        • Transformation basics
        • Optimization tips
        • Gravity-based crops for images
        • Text overlay transformations
        • Complex transformations
        • Named transformations
        • Advanced image components
        • Media Optimizer overview
      • Administration
        • Enable automatic backups
        • Restore asset versions
        • Restore deleted assets
      • Platform integrations
        • Adobe CC Connector overview
        • SAP Commerce Extension overview
        • SFCC site cartridge intro
        • SFCC site cartridge installation
        • SFCC site cartridge modes
        • SFCC site cartridge videos
        • SFCC Page Designer cartridge
        • SFMC app - image block
        • SFMC app - video to GIF block
        • Cloudinary-Shopify Zap overview
  • Guides
    • Media upload
      • Overview
      • 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
      • Adaptive bitrate streaming
      • Converting videos to animated images
      • Audio transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Live streaming
        • Live streaming WebRTC (Beta)
        • Live streaming RTMP
        • Simulated live streaming
      • Video slideshow generation (Beta)
    • Media delivery
      • Media optimization
        • Image optimization
        • Video optimization
      • Responsive images
      • Deliver remote media files
      • Social media profile pictures
      • Paged and layered media
      • Media access control
      • Sprite generation
      • Advanced URL delivery options
    • Asset administration
      • Overview
      • Managing assets
      • Backups and version management
      • Notifications
      • Signatures
    • Widgets and players
      • Upload Widget
      • Media Library Widget
      • Media Editor
      • Product Gallery
      • Video Player
        • Video player features
        • Installation and setup
        • How to embed the video player
        • Video player customization
        • Playlists and recommendations
        • HLS and MPEG-DASH
        • Events and analytics
        • Video ads and monetization
        • Shoppable Video
        • Interactive Video (Beta)
        • Video Player API reference
    • 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
      • JPEGmini Image Optimization
      • MetaDefender Anti-Malware Protection
      • 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
    • Media Optimizer
      • Quick starts
        • Walkthrough
        • Deliver from a web address
        • Deliver from an AWS S3 bucket
        • Deliver from a Google Storage bucket
        • Deliver using an HTTP proxy
      • Overview
      • Configuration
      • Dashboard
      • Reports
      • Transformations
    • Digital Asset Management
      • Overview
      • Uploading and storing assets
      • Folders and collections
      • Advanced search
      • Managing individual media assets
      • Media Library administration
        • SAML provisioning
    • Platform integrations
      • Adobe Creative Cloud Connector
      • Akeneo PIM Integration
      • Chrome Media Library Extension
      • Magento Extension
        • Magento product catalog API
      • Salesforce Commerce Cloud Cartridges
        • Page Designer Cartridge
          • Custom integration
        • Site Cartridge
          • Operational overview
          • Site Cartridge for SiteGenesis
          • Site Cartridge for SFRA
          • Site Cartridge FAQ
      • Salesforce Marketing Cloud App
      • SAP Commerce Extension
      • Shopify App
      • WordPress Plugin
        • Developer guide
        • Verified Platform: Strattic
      • Zapier Integration
        • Example: Cloudinary-Shopify Zap
      • Partner-built integrations
        • Agility Custom Field
        • Builder.io App Extension
        • Chioro Operation
        • Comestri Channel
        • Contentful App
        • Contentstack Custom Field Extension
        • GraphCMS UI Extension
        • Magnolia DAM Connector
        • OpenText TeamSite Connector
        • Sanity Plugin
        • Vue Storefront Component
      • How to build your own integration
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Structured Metadata
      • Metadata API
      • Conditional metadata rules API
    • Provisioning API
    • Cloudinary CLI
    • Upload Widget API
    • Video Player API
    • Product Gallery API
    • Media Editor API
    • Media Optimizer
      • Media Optimizer API
      • Transformation reference
  • SDKs
    • Backend SDKs
      • Ruby On Rails SDK
        • Rails integration overview
        • Rails image and video upload
        • Rails image transformations
        • Rails video transformations
        • Rails asset administration
        • CarrierWave integration
        • Attachinary integration
        • Active Storage integration
      • PHP SDK
        • PHP integration overview
        • PHP image and video upload
        • PHP image transformations
        • PHP video transformations
        • PHP asset administration
        • PHP SDK reference
      • Python SDK
        • Python SDK integration overview
        • Python image and video upload
        • Python image transformations
        • Python video transformations
        • Python asset administration
      • Node.js SDK
        • Node.js integration overview
        • Node.js image and video upload
        • Node.js image transformations
        • Node.js video transformations
        • Node.js asset administration
      • Java SDK
        • Java integration overview
        • Java image and video upload
        • Java image transformations
        • Java video transformations
        • Java asset administration
      • .NET SDK
        • .NET integration overview
        • .NET image and video upload
        • .NET image transformations
        • .NET video transformations
        • .NET asset administration
      • Go SDK
        • Go SDK quick start guide
        • Go SDK introduction
        • Go image and video upload
        • Go media transformations
        • Go asset administration
        • Go SDK Reference
      • PHP SDK (Legacy)
        • PHP integration overview
        • PHP image and video upload
        • PHP image transformations
        • PHP video transformations
        • PHP asset administration
        • PHP migration guide
    • Frontend SDKs
      • JavaScript SDK
        • JavaScript SDK quick start guide
        • JavaScript SDK introduction
        • JavaScript image and video upload
        • JavaScript image transformations
        • JavaScript video transformations
        • JavaScript SDK reference
      • Angular SDK
        • Angular SDK quick start guide
        • Angular SDK introduction
        • Angular image and video upload
        • Angular image transformations
        • Angular video transformations
        • Angular SDK reference
      • React SDK
        • React SDK quick start guide
        • React SDK introduction
        • React image and video upload
        • React image transformations
        • React video transformations
        • React SDK reference
      • Vue.js SDK
        • Vue.js integration overview
        • Vue.js image and video upload
        • Vue.js image transformations
        • Vue.js video transformations
      • jQuery SDK
        • jQuery integration overview
        • jQuery image and video upload
        • jQuery image transformations
        • jQuery video transformations
      • JavaScript SDK (Legacy)
        • JavaScript integration overview
        • JavaScript image and video upload
        • JavaScript image transformations
        • JavaScript video transformations
        • JavaScript migration guide
      • Angular SDK (Legacy)
        • Angular integration overview
        • Angular image and video upload
        • Angular image transformations
        • Angular video transformations
        • Angular migration guide
      • React SDK (Legacy)
        • React integration overview
        • React image and video upload
        • React image transformations
        • React video transformations
        • React migration guide
    • Mobile SDKs
      • iOS SDK
        • iOS integration overview
        • iOS image and video upload
        • iOS image transformations
        • iOS video transformations
      • Android SDK
        • Android integration overview
        • Android image and video upload
        • Android image transformations
        • Android video transformations
      • Kotlin SDK
        • Kotlin media transformations
    • Community-developed libraries
      • Gatsby
      • Gridsome
      • Laravel
      • Netlify
      • NuxtJS
      • Storefront UI
Login
sign up for free
  • Documentation
  • Get Started
  • Programmatic asset management
  • Product Gallery

Product Gallery (video tutorial)

On this page:

  • Overview
  • Video tutorial
  • Tutorial contents
  • Keep learning

Overview

With the Product Gallery, Cloudinary has created an easy way to dynamically display your account’s images, videos, 3D models and 360 animations/spin sets on your website!

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.

Provide access to client-side resource lists

Jump to this spot in the video  0:51 To ensure you can display your assets on the Product Gallery, you should provide access to client-side resource lists. By default, this delivery type is restricted in your Cloudinary account.

Tag your assets

Jump to this spot in the video  1:32 Tagging your assets will make it easy to declare the files in your JavaScript, as well as help if you ever need to quickly add assets to the Gallery at a later date.

Build your Product Gallery

Jump to this spot in the video  2:28 At the top of your HTML, you need to include Cloudinary’s JavaScript file for the Product Gallery. Doing so will provide all of the Gallery’s functionality.

Add a containing element to your page

Jump to this spot in the video  2:38 Directly after the Cloudinary JavaScript file, you need to add a containing element for the Gallery. This indicates where you want the Gallery to be rendered on your page or post.

Initialize the Product Gallery

Jump to this spot in the video  3:00 After the div tags, we can initialize our Product Gallery. This can be as simple as declaring your account names and the tagged assets, or as complex as adding custom options for each aspect. Try it yourself...

Add transformations to assets

Jump to this spot in the video  5:05 One of the main reasons people use Cloudinary is because of our amazing asset transformations, and you can apply those on the fly into your Product Gallery. All you have to do is declare the transformations in the mediaAssets parameter. Try it yourself...

View default transformations

Jump to this spot in the video  5:26 We do automatically apply some of our most generally useful transformations to the assets. So, don’t worry about manually declaring any of the defaults.

Change the carousel styles

Jump to this spot in the video  5:50 At default, we provide a carousel of all the assets as thumbnails. This allows your visitors to see a preview of each item in the Gallery, as well as a way to scroll or jump to a specific asset. However, you may want to change the thumbnails to be indicator shapes or remove the carousel altogether. Try it yourself...

Adjust carousel properties

Jump to this spot in the video  6:20 If you decide to further adjust how the carousel looks, you can do this by overriding the properties for each style. Try it yourself...

Customize your video functionality

Jump to this spot in the video  6:39 Customization is definitely possible with the videoProps parameter, such as allowing you to set whether videos play on load or if the visitor can manually pause and play the content. Try it yourself...

Place the Product Gallery on your site's pages and posts

Jump to this spot in the video  7:00 At this point, you’ve likely got your Gallery code where you want it to be. So, all you have to do is embed it on your site.

Allow JavaScript in WordPress

Jump to this spot in the video  7:12 Some content management systems like WordPress block JavaScript in pages and posts at default. If this happens to you, you may need to install and activate certain plugins, such as Code Embed.

Keep learning

Related topics

  • Dive into the Product Gallery demonstration page for more examples, such as events and analytics tracking.
  • Read our Product Gallery guide and reference, covering every available parameter option.

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

Product Gallery Accessibility
Provide keyboard controls, alt-text for screen readers, and more
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 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:

  • Upload with the CLI (video tutorial)
  • Product Gallery accessibility features (video tutorial)
Cloudinary Logo - White
Products
  • Programmable Media
  • Media Optimizer
  • 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
    • SDK
    • 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

    © 2022 Cloudinary. All rights reserved.