Cloudinary Logo Docs Documentation
  • Get Started
    • Developer solution
      • How to integrate Cloudinary
      • Service overview
    • DAM solution
    • 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
      • Common image transformations
      • Face-detection based transformations
      • Chained and named transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Animated images
      • Transformations on 3D models
      • Custom functions
    • Video transformations
      • Common video transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Converting videos to animated images
      • Audio transformations
      • Live streaming (Beta)
      • 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 (ALPHA)
      • Product Gallery
      • Video Player
    • Digital Asset Management
      • Overview
      • Uploading and storing assets
      • Folders and Collections
      • Advanced search
      • Managing individual media assets
      • Media Library administration
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Metadata API
    • Provisioning API
    • Cloudinary CLI
    • Upload Widget API
    • Video Player API
    • Product Gallery API
  • Integrations
    • SDKs
      • Ruby On Rails SDK
      • PHP SDK v2 (Beta)
      • PHP SDK
      • Django SDK
      • Node.js SDK
      • Java SDK
      • .NET SDK
      • JavaScript SDK
      • jQuery SDK
      • Angular SDK
      • React SDK
      • Vue.js SDK
      • iOS SDK
      • Android SDK
      • Kotlin SDK (Beta)
      • Community-developed libraries
    • Add-ons
      • Adobe Photoshop Lightroom
      • 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 Object-Aware Cropping
      • 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
    • Platforms
      • Adobe Creative Cloud Connector
      • Magento Extension
      • Salesforce Commerce Cloud Cartridges
      • WordPress Plugin
      • Zapier Integration
      • Third-party-developed integrations
TrainingBlogDemosSupportRoadmapCookbookWebinarsFacebook CommunityThe Visual Web
  • Training
  • Blog
  • Demos
  • Support
  • Roadmap
  • Cookbook
  • Webinars
  • Facebook Community
  • The Visual Web
Login
sign up for free
  • Get Started
    • Developer solution
      • How to integrate Cloudinary
      • Service overview
    • DAM solution
    • Video tutorial library
      • Digital Asset Management (DAM)
        • Dashboard intro
        • Sharing folders
        • Media Library intro
        • Media Library upload
        • Video management intro
        • Advanced search
      • Programmatic asset management
        • Upload programmatically
        • Generate upload signature
        • Get started with the CLI
        • Scripting with the CLI
        • Get creative with the CLI
        • Upload with the CLI
        • Product Gallery
      • Transformations and optimizations
        • Transformation basics
        • Optimization tips
        • Complex transformations
        • Named transformations
        • Lightroom edits
        • Advanced image components
      • Administration
        • Enable automatic backups
        • Restore asset versions
        • Restore deleted assets
        • Create an upload preset
      • Platform integrations
        • SFCC site cartridge intro
        • SFCC site cartridge installation
        • SFCC site cartridge modes
        • SFCC site cartridge videos
        • SFCC Page Designer cartridge
        • Cloudinary-Shopify Zap
  • Guides
    • Media upload
      • Overview
      • Uploading assets
      • Transformations on upload
      • Analysis on upload
      • Upload presets
      • Upload API reference
    • Image transformations
      • Common image transformations
      • Face-detection based transformations
      • Chained and named transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Animated images
      • Transformations on 3D models
      • Custom functions
    • Video transformations
      • Common video transformations
      • Conditional transformations
      • User-defined variables and arithmetic transformations
      • Converting videos to animated images
      • Audio transformations
      • Live streaming (Beta)
        • Live streaming WebRTC (Beta)
        • Live streaming RTMP (Beta)
      • 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 (ALPHA)
      • 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 (Alpha)
        • Video Player API reference
    • Digital Asset Management
      • Overview
      • Uploading and storing assets
      • Folders and Collections
      • Advanced search
      • Managing individual media assets
      • Media Library administration
        • SAML provisioning
  • References
    • Transformation URL API
    • Upload API
    • Admin API
    • Search API
    • Metadata API
    • Provisioning API
    • Cloudinary CLI
    • Upload Widget API
    • Video Player API
    • Product Gallery API
  • Integrations
    • 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 v2 (Beta)
        • PHP v2 integration overview
        • PHP v2 image and video upload
        • PHP v2 image transformations
        • PHP v2 video transformations
        • PHP v2 asset administration
        • PHP v2 migration guide
        • PHP SDK reference
      • PHP SDK
        • PHP integration overview
        • PHP image and video upload
        • PHP image transformations
        • PHP video transformations
        • PHP asset administration
      • Django SDK
        • Django integration overview
        • Django image and video upload
        • Django image transformations
        • Django video transformations
        • Django 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
      • JavaScript SDK
        • JavaScript integration overview
        • JavaScript image and video upload
        • JavaScript image transformations
        • JavaScript video transformations
      • jQuery SDK
        • jQuery integration overview
        • jQuery image and video upload
        • jQuery image transformations
        • jQuery video transformations
      • Angular SDK
        • Angular integration overview
        • Angular image and video upload
        • Angular image transformations
        • Angular video transformations
      • React SDK
        • React integration overview
        • React image and video upload
        • React image transformations
        • React video transformations
      • Vue.js SDK
        • Vue.js integration overview
        • Vue.js image and video upload
        • Vue.js image transformations
        • Vue.js video transformations
      • 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 (Beta)
        • Kotlin media transformations (Beta)
      • Community-developed libraries
        • Gatsby
        • Gridsome
        • Laravel
        • NuxtJS
    • Add-ons
      • Adobe Photoshop Lightroom
      • 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 Object-Aware Cropping
      • 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
    • Platforms
      • Adobe Creative Cloud Connector
      • Magento Extension
        • Magento product catalog API
      • Salesforce Commerce Cloud Cartridges
        • Page Designer Cartridge
          • Custom integration
        • Site Cartridge
      • WordPress Plugin
      • Zapier Integration
        • Example: Cloudinary-Shopify Zap
      • Third-party-developed integrations
        • Contentful App
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...

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
Upload with the CLI
Apply background removal to images on upload

 

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)
  • Transformation and optimization tutorials
Cloudinary Logo - White
Products
  • Programmable Media
  • DAM
  • Dynamic Video
  • Demos
  • Pricing
  • Roadmap
  • FAQ
Solutions
  • Why Cloudinary
  • E-commerce and Retail
  • Media and Entertainment
  • Travel and Hospitality
  • Nonprofit
  • Our Customers
  • Resource Library
Developers
  • Getting Started
  • Documentation
  • SDK
  • Add-ons
  • Cookbook
Company
  • About Us
  • Customers
  • Partners
  • Events
  • Careers
  • Newsroom
  • Blog
  • Brand Assets
  • Trust
Contact Us
  • Technical Support
  • Contact Sales
  • Education and 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

© 2021 Cloudinary. All rights reserved.