Last updated: Aug-27-2023
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! This tutorial teaches you how to embed the gallery in a React app.
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
|0:11||To add the Product Gallery to your app, first add the Product Gallery script to the
|0:26||Initialize the Product Gallery within a
|0:35||Configure the gallery with your cloud name, a container reference, and the assets to display by providing a tag common to them all.|
|1:17||You can select multiple assets in the Media Library and add a tag to them all.|
|1:26||Make sure that resource listing is enabled in your Restricted media types settings.|
|1:46||Customize the Product Gallery by changing the appearance of the widget including changing the aspect ratio, adding video assets, and changing the carousel navigation icons to indicators on the bottom.|
Product GalleryEmbed a Product Gallery in your Web or WordPress site
Product Gallery AccessibilityProvide keyboard controls, alt-text for screen readers, and more
Upload Assets in ReactUpload assets using the Upload widget in a React App
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.