Product Gallery in React (video tutorial)

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

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

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.