Last updated: Aug-06-2025
OverviewWith 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.
Video tutorialYou can find the code from this tutorial in
GitHub.
Tutorial contentsThis tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Add the Product Gallery script   0:11 To add the Product Gallery to your app, first add the Product Gallery script to theindex.html file. Initialize the Product Gallery within a useEffect   0:26 Initialize the Product Gallery within a useEffect linked to the window, and calling the gallerywidget method. Set the Product Gallery options   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. Add a tag to multiple assets   1:17 You can select multiple assets in the Media Library and add a tag to them all. Enable resource lists   1:26 Make sure that resource listing is enabled in your Restricted media types settings. Use the render method to display the Product Gallery   1:34 Use the render method to display the Product Gallery. Customize the Product Gallery   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. Keep learning 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.
Â
âï¸ Feedback sent!
âï¸Â  ErrorUnfortunately there's been an error sending your feedback.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4