Product Gallery (video tutorial)
Last updated: May-13-2025
On this page:
- Overview
- Video tutorial
- Tutorial contents
- Provide access to client-side resource lists
- Tag your assets
- Build your Product Gallery
- Add a containing element to your page
- Initialize the Product Gallery
- Add transformations to assets
- View default transformations
- Change the carousel styles
- Adjust carousel properties
- Customize your video functionality
- Place the Product Gallery on your site's pages and posts
- Allow JavaScript in WordPress
- Keep learning
Rate this page:
Overview
With the Product Gallery, Cloudinary has created an easy way to dynamically display your images, videos, 3D models and 360 animations/spin sets on your website!
Video tutorial
Video Player is loading.
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
 0:51 |
To ensure you can display your assets on the Product Gallery, you should enable access to client-side resource lists in the Security page of your Console Settings. By default, this delivery type is restricted. |
Tag your assets
| 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
| 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
| 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
| 3:00 |
After the div tags, we can initialize our Product Gallery. This can be as simple as declaring your product environment cloud name and the tagged assets, or as complex as adding custom options for each aspect. Try it yourself...
|
Add transformations to assets
| 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
| 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
| 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
| 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
| 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
| 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
| 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.
- See how the Product Gallery can improve e-commerce workflows.
If you like this, you might also like...
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.
✖️