Tutorial: Displaying a Pro Gallery on Your Site Using the Pro Gallery Backend API

The Velo Pro Gallery Backend API allows you to create and manage pro galleries on your site's backend. When you add a pro gallery element to your site, a corresponding pro gallery is automatically created on your site's backend. However, when you use the Pro Gallery backend API to create a pro gallery on your site's backend, you need to do a few steps to display it on your site.

You may want to display a pro gallery from your site's backend on your site, for example, if you have a page with a pro gallery element where you want to display different galleries for each site member who logs in to your site. You can use this API to store the pro galleries in the backend instead of overloading the frontend. Then for each site member who logs in, you can export the relevant gallery from the backend.

This article describes how you can choose an existing pro gallery on your site's backend, connect it to a pro gallery element on your page, and display it on your site.

We start by calling the listGalleries() function to get a list of all the pro galleries on our site's backend. Then we choose the pro gallery we want to display on our live site. To export the gallery we want from our site's backend, we call the getGallery() function with the ID of the pro gallery that we chose. To use the exported backend gallery on our frontend, we need to first write code to convert the backend gallery items to the frontend $w() Gallery items format. This is because currently the backend gallery API and the frontend $w() Gallery API have different formats. Last, we import our converted items to our page code, and set the items to a particular gallery element on our page. This temporarily overrides the frontend gallery element's items with the converted backend gallery items. Once the site is published, the converted pro gallery items are visible on our live site.

Note: This example assumes you used the createGallery() API to create one or more pro galleries in site's your backend.

Was this helpful?