Adding Cloudinary’s Product Gallery to Your Website

This tutorial walks through a specific use-case of building Cloudinary's Product Gallery and embedding it on a WordPress-managed website page. We recommend reviewing our official documentation, if you want to see all of the Gallery's capabilities.

Tutorial Sections

• Watch a Video
• What is Cloudinary’s Product Gallery?
• Setting Up Your Cloudinary Account to Use the Product Gallery
• Providing Access to Client-Side Resource Lists
• Tagging Your Assets
• Building Your Product Gallery
• Including Cloudinary’s JavaScript File
• Adding a Containing Element for the Gallery
• Initializing and Rendering the Product Gallery
• Tweaking the Product Gallery’s Options
• Adding Transformations to Assets
• Changing the Carousel Styles
• Customizing Your Video Functionality
• Placing the Product Gallery to Your Site’s Pages and Posts
• Additional Resources

Watch a Video

Go back to the top of the tutorial.

What is Cloudinary’s Product Gallery?

With the Product Gallery, Cloudinary has created an easy way to dynamically display your account’s images, videos, 3D models and 360 animations/spin sets on your website!

It is built with a highly configurable JavaScript base, giving your team access to showcase your products with gorgeous transitions and effects, all without requiring custom development work.

<script type="text/javascript" src="https://product-gallery.cloudinary.com/all.js"></script>
<div class="wrap" id="wrap"></div>
<script>
  cloudinary.galleryWidget({
    container: '#wrap',
    cloudName: 'sambrace',
    mediaAssets: [{
      tag: "dress"
    }, {
      tag: "dress",
      mediaType: "video"
    }],
  }).render();
</script>

Visitors and shoppers alike will have an excellent experience when exploring your product offerings through our tool! In a matter of minutes, you can rapidly expand your e-commerce solutions for your website, mobile application or other projects by implementing Cloudinary’s Product Gallery today.

Go back to the top of the tutorial.

Setting Up Your Cloudinary Account to Use the Product Gallery

To ensure you can display your assets on the Product Gallery, there are two best practices Cloudinary recommends taking. The first is providing access to client-side resource lists, and the second is tagging your assets for easy retrieval by the Gallery.

Providing Access to Client-Side Resource Lists

The Product Gallery needs access to client-side resource lists, in order to display your account’s assets. By default, this delivery type is restricted in your Cloudinary account. So, take these steps to enable it:

1. Log into your Cloudinary Management Console.

2. Navigate to the Console’s Settings section.

3. Select the Security tab.

4. Scroll to the Restricted image types portion of the page, then verify that the Resource List checkbox is not selected.

Go back to the top of the tutorial.

Tagging Your Assets

After verifying the Product Gallery can access client-side resource lists, we recommend making sure you have properly tagged your assets. This 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.

There are three ways you can tag your Cloudinary assets:

• When uploading your files through one of our SDKs
• Applying tags after you have uploaded them with our Admin API
• Logging into the Cloudinary Management Console and applying tags, either upon upload or afterward.

You can also declare the files in your JavaScript by their Public ID, if you’d prefer that method over using tags.

Go back to the top of the tutorial.

Building Your Product Gallery

To build your Product Gallery, it is all done with basic HTML and JavaScript. Because of this, we recommend building in your favorite HTML editor. For this demonstration, we are using JSFiddle.

Including Cloudinary’s JavaScript File

At the top of your HTML, you need to include Cloudinary’s JavaScript file for the Project Gallery. Doing so will provide all of the Gallery’s functionality.

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
</script>

Adding a Containing Element for the Gallery

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. The element needs to have a unique ID, which can be whatever you want. In our example, we have chosen “wrap” for our ID name.

<divid="wrap"></div>

Initializing and Rendering the Product Gallery

After the <div> tags, we can initialize our Product Gallery. This can be as simple as declaring your account names and the tagged assets, or as complex as adding custom options for each aspect. Let’s start with a simple example by adding our <script> tag, then declare the Gallery.

<script>
  cloudinary.galleryWidget({

From here, we need to point our Gallery to the containing element with the container parameter.

container:'#wrap',

Directly after this, we need to point our Gallery to our Cloudinary account with the cloudName parameter. In this example, the cloud name is “sambrace”, but you would change it to your cloud name when you implement the Gallery for your projects.

cloudName:'sambrace',

We’re onto our last step before rendering the Gallery! This means we need to declare our media assets. To do so, use the mediaAssets parameter to populate the Gallery with our tagged content. In this example, we will display any images and videos in the account that have the “dress” tag attached to them.

mediaAssets:[{
      tag:"dress"
    },{
      tag:"dress",
      mediaType:"video"
    }],

The default media type is images, so we don’t have declare it here. However, other media you want to bring through should have the mediaType parameter specified, like we have done for video.

If we did have any 360 images, we would declare them here too as mediaType: “spin”. From there, the Gallery would display those with its 360 Spin Set technology.

Also notice that each media type can have its own unique tags. In this example, images and videos for the Gallery will both have the “dress” tag, but you can have declare a different tag with the tag parameter for the images, videos and even 360 content you want to incorporate.

Now, all we have to do is render the Gallery and close the script. We will do this with the render method, then add our closing script tag.

.render();

</script>

If you’ve been following along, you should have a working Product Gallery that is ready for your website or other application! You can see this in our live code sample on JSFiddle. The Gallery truly can be that simple to implement, but it also can be further customized to be extremely unique and personalized for your brand.

Go back to the top of the tutorial.

Tweaking the Product Gallery’s Options

While we have demonstrated earlier how easy it can be to build the Product Gallery, you may want some features that closely follow your brand standards and style guides. And there are literally dozens of options to do that, as you can see in our reference tables and documentation! Here are three Gallery examples of tweaks that we find to be quite beneficial, especially for those in the e-commerce space.

Adding Transformations to Assets

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. In this example, I am going to ask for all the images and videos to use our fill crop style (c_fill), instead of the Gallery’s default crop style (c_pad).

mediaAssets:[{
      tag:"dress",
      transformation:{
        crop:"fill"
      }
    },{
      tag:"dress",
      mediaType:"video",
      transformation:{
          crop:"fill",
        }
    }],

However, we do automatically apply some of our most generally useful transformations, such as f_auto, g_auto and q_auto, to images and 360 images. Similarly, we apply useful transformations for device pixel range optimization and other purposes to videos. So, don’t worry about manually declaring any of the defaults - we handled that for you.

Go back to the top of the tutorial.

Changing the Carousel Styles

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. This is easy to handle by adding the carouselStyle parameter to the Gallery, then setting it to 'thumbnails', ‘indicators’ or ‘none’.

carouselStyle:'thumbnails',

If you decide to further adjust how the carousel looks, you can do this by overriding the properties for each style. As an example, you can change the default thumbnail styles by stating a new thumbnailProps parameter with a new ThumbnailProps object.

thumbnailProps:{
        width:54,
        height:54,
        spacing:10,
        borderWidth:1,
        selectedStyle:'border',
        selectedBorderWidth:2,
        selectedBorderPosition:'bottom',
        mediaSymbolBgShape:'none',
        mediaSymbolIconColor:'#FFF',
        mediaSymbolSize:24,
        navigationShape:'square',
        navigationSize:24,
        navigationFloat:true,
      },

As you can see, there is a lot you can do to change the Gallery to what you want it to be!

Go back to the top of the tutorial.

Customizing Your Video Functionality

Moving onto our third and final tweak, let’s talk about video.

It’s a known fact that this medium is vital for e-commerce, as recent surveys have shown 73% of all U.S. adults are more likely to make a purchase after watching an online video that explains the product or service. So, it’s only natural that you may want to customize how these videos look and act!

Customization is definitely possible with the videoProps parameter. You can see we have videos set to play on load, rather than when the visitor clicks on them (autoplay: true). Additionally, we have provided controls for the visitor to be able to manually pause and play the video (controls: true).

videoProps:{
          controls:true,
          autoplay:true,
      },

Go back to the top of the tutorial.

Placing the Product Gallery to Your Site’s Pages and Posts

At this point, you’ve likely got your Gallery code where you want it to be. It’s ready for the public! So, all you have to do is embed it on your site. This should be as simple as copy and paste for many of you.

However, some content management systems like WordPress block JavaScript in pages and posts at default. So, let’s show you how to handle situations like that.

First, you’ll want to install the Code Embed plugin, which allows you to add code to posts without it being changed by the editor. If you are using a newer version of WordPress that uses the Gutenberg editor, then you’ll also want to install the Custom Fields for Gutenberg plugin.

After installing and activating these two plugins, you should be able to declare the Product Gallery in a custom field, then paste your code into the field. In this example, we labeled the Gallery code as CODEpgw.

Once you save your page or post, the Product Gallery should appear in all of its glory. Congratulations!

Go back to the top of the tutorial.

Additional Resources

Our team has plenty of other resources for you to learn about our Product Gallery. This includes:

• An extensive demonstration page with examples we covered and even some we didn’t, such as events and analytics tracking.
• Complete documentation on the Product Gallery, covering every parameter option and tweak available to you.

Lastly, we want to hear from you! If you use the Product Gallery for your projects, share your examples. We always enjoy seeing what our community develops, and we would love to share your successes too. And of course, we’re here to provide support if you need assistance.

---

Thanks to the following content creators for their contributions to this post:

• Coverr.co for motion backgrounds
• Slynk for background music
• Pexels.com for the image and video file examples
• Dzianis Stselmakh and First Styles for icons

Go back to the top of the tutorial.