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!
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.
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.
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.
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.
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...
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...
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.
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...
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...
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.
Set up the CLI and get familiar with some basic commands
Upload with the CLI
Apply background removal to images on upload
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!
✖️
Error
Unfortunately there's been an error sending your feedback.
0:51
