Last updated: Sep-12-2024
On 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! This tutorial teaches you how to embed the gallery in a React app.
Video tutorial
View the code
You can find the code from this tutorial in GitHub.Tutorial contents
This 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 the index.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
Related topics
- Learn more about the Product Gallery.
- Take a look at our Transformations guide to learn about transforming images in general.
- Use the Product Gallery reference to find all the options and parameters available for the Product Gallery.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Product Gallery
Embed a Product Gallery in your Web or WordPress siteProduct Gallery Accessibility
Provide keyboard controls, alt-text for screen readers, and moreUpload Assets in React
Upload 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.
✖️