The Product Gallery Widget can be easily integrated into your React application.
I've attached a code sample for integrating the widget in React. Please follow these steps before running the code:
1. Set your cloud name inside the App.tsx file (line 8). In this example, I have used `demo` as cloud_name. Please make sure to use your cloud_name.
2. Include an array of assets In the mediaAsset parameter (line 9), by setting tags/public_id.
You can view the options for setting the assets here.
For example (using tags):
export default function App() {
const myGallery = cloudinary.galleryWidget({
container: "#my-gallery",
cloudName: "demo",
mediaAssets: [
{
tag: "electric_car_product_gallery_demo",
transformation: { crop: "fill" }
},
// by default mediaType: "image"
{
tag: "electric_car_product_gallery_demo",
mediaType: "video",
transformation: { crop: "fill" }
},
{ tag: "electric_car_360_product_gallery_demo", mediaType: "spin" }
]
});
After setting these parameters you can run the code:
Comments
1 comment
Is this going to be part of the React Cloudinary SDK at some point? Trying to follow this example with some difficulty. When you declare cloudinary is it drawing the galleryWidget reference from the script you imported inside the public folder?
Please sign in to leave a comment.