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.
- Watch a Video
- What is Cloudinary’s Product Gallery?
- Setting Up Your Cloudinary Account to Use the Product Gallery
- Building Your Product Gallery
- Adding a Containing Element for the Gallery
- Initializing and Rendering the Product Gallery
- Tweaking the Product Gallery’s Options
- Placing the Product Gallery to Your Site’s Pages and Posts
- Additional Resources
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!
<div class="wrap" id="wrap"></div>
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.
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.
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.
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.
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.
From here, we need to point our Gallery to the containing element with the container parameter.
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.
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.
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.
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.
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.
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).
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.
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’.
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.
As you can see, there is a lot you can do to change the Gallery to what you want it to be!
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).
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.
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!
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