{"id":28255,"date":"2022-07-20T08:43:03","date_gmt":"2022-07-20T08:43:03","guid":{"rendered":"http:\/\/interactive-product-gallery-with-cloudinary"},"modified":"2022-07-20T08:43:03","modified_gmt":"2022-07-20T08:43:03","slug":"interactive-product-gallery-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/interactive-product-gallery-with-cloudinary\/","title":{"rendered":"Interactive Product Gallery with Cloudinary"},"content":{"rendered":"

They say a picture speaks a thousand words. What if you needed the picture to speak more words than that? More words are certainly required to convince consumers to part with their hard-earned money, right? Adding interactivity to the images provides a more profound experience for the customer, making the product image almost tangible. In this tutorial, I will show you how to implement an in-house interactive media gallery with minimal fuss using Cloudinary<\/a>.<\/p>\n

In this tutorial, we will build the gallery management feature for an e-commerce web application. Using the application, you can upload images and videos of a product. Upon successful upload, you can view the items rendered using the Cloudinary product gallery widget<\/a>.<\/p>\n

Here is a link<\/a> to the demo CodeSandbox.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Project Setup<\/h2>\n

Create a new React<\/a> app using the following command:<\/p>\n

npx create-react-app cloudinary_product_gallery\n<\/code><\/span><\/pre>\n
Next, add the project dependencies using the following command:<\/p>\n
npm<\/span> install<\/span> antd<\/span> @ant-design<\/span>\/icons axios react-router-dom\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, we need to import the antd CSS. To do this, open the src\/App.css<\/code> file and edit its content to match the following:<\/p>\n
@import<\/span> \"~antd\/dist\/antd.css\"<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Set up Cloudinary<\/h2>\n
To use Cloudinary\u2019s provisioned services, you need to first sign up for a free Cloudinary account<\/a> if you don\u2019t have one already. Important details are displayed on your account\u2019s Management Console (aka Dashboard): your cloud name, API key, etc.<\/p>\n
For this tutorial, we will be sending images to Cloudinary via unsigned POST requests. To do this, we need our account cloud name and an unsigned upload preset<\/a>. To create one, select Settings<\/strong> > Upload<\/strong> in the Management Console and then scroll to the Upload presets<\/strong> section. Create a new upload preset by clicking Add upload preset<\/strong> at the bottom of the upload preset list. In the displayed form, ensure the Signing Mode<\/strong> is set to Unsigned<\/strong>, as shown below.<\/p>\n
\"\"<\/p>\n
Click Save<\/strong> to complete the upload preset definition, then copy the preset name displayed on the Upload Settings page.<\/p>\n
Next, let\u2019s create environment variables to hold the details of our Cloudinary account. Create a new file called .env at the root of your project and add the following to it:<\/p>\n
REACT_APP_CLOUD_NAME = \"INSERT YOUR CLOUD NAME HERE\"<\/span>;\nREACT_APP_UPLOAD_PRESET = \"INSERT YOUR UNSIGNED UPLOAD PRESET KEY HERE\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env<\/code> file using the following command:<\/p>\n
cp<\/span> .env<\/span> .env<\/span>.local<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
By default, this local file resides in the .gitignore<\/code> folder, mitigating the security risk of inadvertently exposing secret credentials to the public. You can update the .env.local<\/code> file with your Cloudinary credentials.<\/p>\n
In the src<\/code> directory of the project, create a new folder named cloudinary<\/code>. This folder will hold the Cloudinary-related helper classes we will need in our components. In the cloudinary<\/code> folder, create a new file called cloudinaryConfig.js<\/code>. This file will give access to the environment variables and prevent repeated process.env.<\/code> calls throughout the project. Add the following to the cloudinaryConfig.js<\/code> file:<\/p>\n
export<\/span> const<\/span> cloudName = process.env.REACT_APP_CLOUD_NAME;\nexport<\/span> const<\/span> uploadPreset = process.env.REACT_APP_UPLOAD_PRESET;\nexport<\/span> const<\/span> defaultUploadTag = \"cloudinary_interactive_gallery\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
\"\"<\/p>\n
With these in place, we can write the helper function to upload media files to Cloudinary. In the cloudinary folder, create a new file named cloudinaryHelper.js<\/code> and add the following to it:<\/p>\n
import<\/span> axios from<\/span> \"axios\"<\/span>;\nimport<\/span> { cloudName, defaultUploadTag, uploadPreset } from<\/span> \".\/cloudinaryConfig\"<\/span>;\n\nexport<\/span> const<\/span> upload = ({ file, fileType, successCallback }<\/span>) =><\/span> {\n  const<\/span> url = `https:\/\/api.cloudinary.com\/v1_1\/${cloudName}<\/span>\/${fileType}<\/span>\/upload`<\/span>;\n  const<\/span> data = new<\/span> FormData();\n  data.append(\"file\"<\/span>, file);\n  data.append(\"upload_preset\"<\/span>, uploadPreset);\n  data.append(\"tags\"<\/span>, defaultUploadTag);\n  axios\n    .post(url, data, {\n      headers<\/span>: {\n        \"Content-Type\"<\/span>: \"multipart\/form-data\"<\/span>,\n      },\n    })\n    .then((response<\/span>) =><\/span> successCallback(response.data));\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The upload<\/code> function is used to upload files to Cloudinary using the previously defined upload preset and upload tag. The function has one argument, which is an object containing the file to be uploaded, the file type (for this tutorial, it could be either image or video), and a function to be called upon receipt of a successful response from the Cloudinary API.<\/p>\n
Add Gallery Context<\/h2>\n
The functionality for the gallery widget is delivered via CDN and instantiated in the index.js<\/code> file. However, we need access to the instantiated object elsewhere in our application to update the widget on successful upload. To avoid prop drilling, we\u2019ll use React Context<\/a> to pass this object to any component where it may be required. In the src<\/code> folder, create a new folder named context<\/code>. In the src\/context<\/code> folder, create a new file named GalleryContext.js<\/code> and add the following to it:<\/p>\n
import<\/span> { createContext } from<\/span> \"react\"<\/span>;\n\nconst<\/span> GalleryContext = createContext(null<\/span>);\nexport<\/span> default<\/span> GalleryContext;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With our context in place, we can instantiate the widget and update the context value.<\/p>\n
Instantiate Gallery Widget<\/h2>\n
Open the public\/index.html<\/code> file and add the following <script><\/code> tag in the head of the HTML file:<\/p>\n
<script<\/span>\n  src<\/span>=\"https:\/\/product-gallery.cloudinary.com\/all.js\"<\/span>\n  type<\/span>=\"text\/javascript\"<\/span>\n><\/span>\n  {\" \"<\/span>}\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Next, update the src\/index.js<\/code> file to match the following:<\/p>\n
import<\/span> React from<\/span> \"react\"<\/span>;\nimport<\/span> ReactDOM from<\/span> \"react-dom\/client\"<\/span>;\nimport<\/span> \".\/index.css\"<\/span>;\nimport<\/span> App from<\/span> \".\/App\"<\/span>;\nimport<\/span> { defaultUploadTag, cloudName } from<\/span> \".\/cloudinary\/cloudinaryConfig\"<\/span>;\nimport<\/span> GalleryContext from<\/span> \".\/context\/GalleryContext\"<\/span>;\nimport<\/span> { BrowserRouter } from<\/span> \"react-router-dom\"<\/span>;\n\n\/* eslint-disable *\/<\/span>\nconst<\/span> myGallery = cloudinary.galleryWidget({\n  container<\/span>: \"#gallery\"<\/span>,\n  cloudName<\/span>: cloudName,\n  mediaAssets<\/span>: [\n    { tag<\/span>: defaultUploadTag }, \/\/ by default mediaType: \"image\"<\/span>\n    { tag<\/span>: defaultUploadTag, mediaType<\/span>: \"video\"<\/span> },\n  ],\n});\n\nconst<\/span> root = ReactDOM.createRoot(document<\/span>.getElementById(\"root\"<\/span>));\nroot.render(\n  <React.StrictMode<\/span>><\/span>\n    <BrowserRouter<\/span>><\/span>\n      <GalleryContext.Provider<\/span> value<\/span>={myGallery}<\/span>><\/span>\n        <App<\/span> \/><\/span>\n      <\/GalleryContext.Provider<\/span>><\/span>\n    <\/BrowserRouter<\/span>><\/span>\n  <\/React.StrictMode<\/span>><\/span><\/span>\n);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here we initialize the product gallery widget with the cloudinary.galleryWidget<\/code> method call. We pass the initialization options, including the cloud name and the tags of the media assets we wish to retrieve. We also specify a key named container<\/code>. This is the id of the div<\/code> element in which the galley will be rendered. The instantiated object is then passed to the GalleryContext<\/code> provider via the value<\/code> prop.<\/p>\n
\n
We used the eslint-disable annotation to avoid eslint throwing an undefined variable exception.<\/p>\n<\/blockquote>\n
Add Components<\/h2>\n
With the gallery widget instantiated and the object made available via Context, let\u2019s create two components – one for uploading files and the other for rendering the gallery.<\/p>\n
In the src<\/code> folder, create a new folder named components<\/code>. Next, in the src\/components<\/code> folder, create a new file called MediaUpload.js<\/code> and add the following to it:<\/p>\n
import<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { Button, Card, message, Upload } from<\/span> \"antd\"<\/span>;\nimport<\/span> { UploadOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\nimport<\/span> { useNavigate } from<\/span> \"react-router-dom\"<\/span>;\nimport<\/span> { upload } from<\/span> \"..\/cloudinary\/cloudinaryHelper\"<\/span>;\nimport<\/span> { defaultUploadTag } from<\/span> \"..\/cloudinary\/cloudinaryConfig\"<\/span>;\nimport<\/span> { useContext } from<\/span> \"react\"<\/span>;\nimport<\/span> GalleryContext from<\/span> \"..\/context\/GalleryContext\"<\/span>;\n\nconst<\/span> MediaUpload = ()<\/span> =><\/span> {\n  const<\/span> [isUploading, setIsUploading] = useState(false<\/span>);\n  const<\/span> [selectedFiles, setSelectedFiles] = useState([]);\n  const<\/span> navigate = useNavigate();\n  const<\/span> myGallery = useContext(GalleryContext);\n\n  const<\/span> uploadSelection = ()<\/span> =><\/span> {\n    if<\/span> (selectedFiles.length === 0<\/span>) {\n      message.error(\"You need to upload a media file first\"<\/span>);\n    } else<\/span> {\n      setIsUploading(true<\/span>);\n      selectedFiles.forEach((file, index<\/span>) =><\/span> {\n        const<\/span> fileType = file[\"type\"<\/span>].split(\"\/\"<\/span>)[0<\/span>];\n        upload({\n          file,\n          fileType,\n          successCallback<\/span>: ()<\/span> =><\/span> {\n            if<\/span> (index === selectedFiles.length - 1<\/span>) {\n              message.success(\"Images uploaded successfully\"<\/span>);\n              myGallery.update({\n                mediaAssets<\/span>: [\n                  { tag<\/span>: defaultUploadTag },\n                  { tag<\/span>: defaultUploadTag, mediaType<\/span>: \"video\"<\/span> },\n                ],\n              });\n              setIsUploading(false<\/span>);\n              navigate(\"\/gallery\"<\/span>);\n            }\n          },\n        });\n      });\n    }\n  };\n\n  const<\/span> props = {\n    multiple<\/span>: true<\/span>,\n    onRemove<\/span>: (file<\/span>) =><\/span> {\n      setSelectedFiles((currentSelection<\/span>) =><\/span> {\n        const<\/span> newSelection = currentSelection.slice();\n        const<\/span> fileIndex = currentSelection.indexOf(file);\n        newSelection.splice(fileIndex, 1<\/span>);\n        return<\/span> newSelection;\n      });\n    },\n    beforeUpload<\/span>: (file<\/span>) =><\/span> {\n      setSelectedFiles((currentSelection<\/span>) =><\/span> [...currentSelection, file]);\n      return<\/span> false<\/span>;\n    },\n    showUploadList<\/span>: true<\/span>,\n  };\n\n  return<\/span> (\n    <Card<\/span>\n      style<\/span>={{<\/span> margin:<\/span> \"auto<\/span>\", width:<\/span> \"50<\/span>%\" }}\n      actions<\/span>={[<\/span>\n        <Button<\/span> type<\/span>=\"primary\"<\/span> loading<\/span>={isUploading}<\/span> onClick<\/span>={uploadSelection}<\/span>><\/span>\n          Submit\n        <\/Button<\/span>><\/span>,\n      ]}\n    >\n      <Upload.Dragger<\/span> {...props<\/span>}><\/span>\n        <p<\/span> className<\/span>=\"ant-upload-drag-icon\"<\/span>><\/span>\n          <UploadOutlined<\/span> \/><\/span>\n        <\/p<\/span>><\/span>\n        <p<\/span> className<\/span>=\"ant-upload-text\"<\/span>><\/span>Click to Upload Files<\/p<\/span>><\/span>\n      <\/Upload.Dragger<\/span>><\/span>\n    <\/Card<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> MediaUpload;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component renders a simple drag and drop form using the antd Upload<\/code> component. A submit button is also rendered, which calls the uploadSelection<\/code> function when clicked.<\/p>\n
If at least one file is selected, the function iterates through the selectedFiles<\/code> state variable (updated when files are selected or removed via the Upload<\/code> component). For each file, it calls the upload<\/code> function we declared earlier.<\/p>\n
Once the files have been uploaded, a success message is displayed, and the gallery widget (retrieved via the useContext<\/code> call) is used to update the widget. Finally, the application redirects to the Gallery<\/code> component, which we will build next.<\/p>\n
In the src\/components<\/code> folder, create a new file named Gallery.js<\/code> and add the following to it:<\/p>\n
import<\/span> { useEffect, useContext } from<\/span> \"react\"<\/span>;\nimport<\/span> GalleryContext from<\/span> \"..\/context\/GalleryContext\"<\/span>;\n\nconst<\/span> Gallery = ()<\/span> =><\/span> {\n  const<\/span> gallery = useContext(GalleryContext);\n  useEffect(()<\/span> =><\/span> {\n    gallery.render();\n  }, []);\n  return<\/span> (\n    <><\/span>\n      <h1<\/span>><\/span>Gallery<\/h1<\/span>><\/span>\n      <div<\/span> id<\/span>=\"gallery\"<\/span>><\/span><\/div<\/span>><\/span>\n    <\/><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Gallery;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component retrieves the gallery widget from GalleryContext<\/code> and declares the target container – an empty div<\/code> with id gallery. An useEffect<\/code> call is used to render the gallery on page load.<\/p>\n
Add Navigation<\/h2>\n
We have our components, but we need to implement the routing between them. We also need a component to help the user trigger the navigation process where necessary.<\/p>\n
We\u2019ll start by adding a menu. In the src\/components<\/code> folder, create a new file named Menu.js<\/code> and add the following to it:<\/p>\n
import<\/span> { Menu as<\/span> AntDMenu } from<\/span> \"antd\"<\/span>;\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { Link } from<\/span> \"react-router-dom\"<\/span>;\nimport<\/span> { PictureOutlined, UploadOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\n\nconst<\/span> Menu = ()<\/span> =><\/span> {\n  const<\/span> [currentlySelected, setCurrentlySelected] = useState(\"upload\"<\/span>);\n\n  const<\/span> handleMenuSelection = (e<\/span>) =><\/span> {\n    setCurrentlySelected(e.key);\n  };\n\n  const<\/span> items = [\n    {\n      label<\/span>: <Link<\/span> to<\/span>=\"\/gallery\"<\/span>><\/span>Gallery<\/Link<\/span>><\/span><\/span>,\n      key<\/span>: \"gallery\"<\/span>,\n      icon<\/span>: <PictureOutlined<\/span> \/><\/span><\/span>,\n    },\n    {\n      label<\/span>: <Link<\/span> to<\/span>=\"\/\"<\/span>><\/span>Upload Media<\/Link<\/span>><\/span><\/span>,\n      key<\/span>: \"upload\"<\/span>,\n      icon<\/span>: <UploadOutlined<\/span> \/><\/span><\/span>,\n    },\n  ];\n\n  return<\/span> (\n    <AntDMenu<\/span>\n      mode<\/span>=\"horizontal\"<\/span>\n      onClick<\/span>={handleMenuSelection}<\/span>\n      selectedKeys<\/span>={[currentlySelected]}<\/span>\n      items<\/span>={items}<\/span>\n    \/><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Menu;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This menu provides two items – one for the gallery and the other for the upload form. Using the Link<\/code> component provided by react-router-dom, we specify the path to which the application should redirect when an item is clicked.<\/p>\n
Next, in the src<\/code> folder, create a new file named routes.js<\/code> and add the following to it:<\/p>\n
import<\/span> Gallery from<\/span> \".\/components\/Gallery\"<\/span>;\nimport<\/span> MediaUpload from<\/span> \".\/components\/MediaUpload\"<\/span>;\n\nconst<\/span> routes = [\n  {\n    path<\/span>: \"\/\"<\/span>,\n    element<\/span>: <MediaUpload<\/span> \/><\/span><\/span>,\n  },\n  {\n    path<\/span>: \"\/gallery\"<\/span>,\n    element<\/span>: <Gallery<\/span> \/><\/span><\/span>,\n  },\n];\n\nexport<\/span> default<\/span> routes;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here we specify the component to be rendered for a given path.<\/p>\n
Update App.js<\/h2>\n
Finally, update src\/App.js<\/code> to match the following:<\/p>\n
import<\/span> \".\/App.css\"<\/span>;\nimport<\/span> { useRoutes } from<\/span> \"react-router-dom\"<\/span>;\nimport<\/span> routes from<\/span> \".\/routes\"<\/span>;\nimport<\/span> Menu from<\/span> \".\/components\/Menu\"<\/span>;\nimport<\/span> { Col, Row } from<\/span> \"antd\"<\/span>;\n\nconst<\/span> App = ()<\/span> =><\/span> {\n  const<\/span> router = useRoutes(routes);\n  return<\/span> (\n    <div<\/span> style<\/span>={{<\/span> margin:<\/span> \"1<\/span>%\" }}><\/span>\n      <Menu<\/span> \/><\/span>\n      <div<\/span> style<\/span>={{<\/span> textAlign:<\/span> \"center<\/span>\" }}><\/span>\n        <Row<\/span> justify<\/span>=\"center\"<\/span> align<\/span>=\"middle\"<\/span> style<\/span>={{<\/span> textAlign:<\/span> \"center<\/span>\" }}><\/span>\n          <Col<\/span> style<\/span>={{<\/span> width:<\/span> \"100<\/span>%\", margin:<\/span> \"2<\/span>%\" }}><\/span>{router}<\/Col<\/span>><\/span>\n        <\/Row<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here we render the menu along with the content rendered by the router (as determined by the current path).<\/p>\n
With everything in place, run your application using the following command:<\/p>\n
npm start\n<\/code><\/span><\/pre>\n
By default, the application will be available at http:\/\/localhost:3000\/<\/a>. The final result will look like the GIF shown below.<\/p>\n
\"\"<\/p>\n
Find the complete project here<\/a> on GitHub.<\/p>\n
Conclusion<\/h2>\n
In this article, we looked at how to build an interactive product gallery using Cloudinary. Using Cloudinary, not only can we deliver a seamless storage and retrieval process for images, we are also able to render an interactive, aesthetically pleasing gallery without worrying about styling, functionality, and the likes (the Gallery component is less than 30 lines long).<\/p>\n
For this tutorial, we rendered only images and videos. However, the widget can also render 360 spin sets and 3D models, which you can read more about in the Cloudinary guide<\/a>.\nWith all these, your application guarantees a seamless experience that speaks much more than a static image.<\/p>\n
Resources you may find helpful:<\/strong><\/p>\n
The Cloudinary gallery widget relies on the Client-side asset lists<\/a> feature to retrieve the list of images (or videos) with the specified tag. To ensure that this feature is available on your Cloudinary account, you must ensure that the Resource list option is enabled. By default, the list delivery type is restricted. To enable it, open the Security settings<\/strong> in your Management console and clear the Resource lis<\/strong>t item under Restricted media types<\/strong>.<\/p>\n
For UI components in our application, we will use antd<\/a> while Axios<\/a> will be used for uploading media files to our Cloudinary store. React router<\/a> will be used to transition between pages.<\/p>\n