Product Gallery (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!

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Provide access to client-side resource lists

0:51	To ensure you can display your assets on the Product Gallery, you should enable access to client-side resource lists in the Security page of your Console Settings. By default, this delivery type is restricted.

Tag your assets

1:32	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.

Build your Product Gallery

2:28	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.

Add a containing element to your page

2:38	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.

Initialize the Product Gallery

3:00	After the div tags, we can initialize our Product Gallery. This can be as simple as declaring your product environment cloud name and the tagged assets, or as complex as adding custom options for each aspect. Try it yourself...

Add transformations to assets

5:05	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...

View default transformations

5:26	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.

Change the carousel styles

5:50	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...

Adjust carousel properties

6:20	If you decide to further adjust how the carousel looks, you can do this by overriding the properties for each style. Try it yourself...

Customize your video functionality

6:39	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...

Place the Product Gallery on your site's pages and posts

7:00	At this point, you've likely got your Gallery code where you want it to be. So, all you have to do is embed it on your site.

Allow JavaScript in WordPress

7:12	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.

---

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.