{"id":22318,"date":"2021-04-05T17:40:28","date_gmt":"2021-04-05T17:40:28","guid":{"rendered":"http:\/\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content"},"modified":"2024-10-23T16:58:34","modified_gmt":"2024-10-23T23:58:34","slug":"create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content","title":{"rendered":"Create a Great E-Commerce Site on Gatsby Along With User-Generated Content Using Cloudinary"},"content":{"rendered":"

Today\u2019s tremendous growth in e-commerce means that competition among businesses is heating up. One way to gain a competitive edge is to boost your product\u2019s authenticity by incorporating user-generated content<\/a> (UGC) into your product pages.<\/p>\n

This tutorial shows you how to do the following:<\/p>\n

    \n
  1. Build a progressive web app with Gatsby, a React-based web framework for JavaScript. Gatsby.js works seamlessly as a front end for building sites with Shopify, WordPress, and many other content management systems (CMS).<\/li>\n
  2. Manage UGC for the app by integrating it with Cloudinary. Cloudinary is a robust, software-as-a-service (SaaS) platform with a one-stop solution for managing images and videos<\/a> along with add-ons for organizing and transforming media.<\/li>\n<\/ol>\n

    To follow this tutorial, you must have a working knowledge of Git and web development. Experience with Gatsby is helpful; if that\u2019s new to you, this tutorial steers you through what you need to know.<\/p>\n

    Setup of E-Commerce With Gatsby<\/h2>\n

    Since this tutorial\u2019s main goal is to enhance an e-commerce site with UGC through Cloudinary, you need the Jamstack e-commerce template<\/a> as a starter. Do the following:<\/p>\n

      \n
    1. Install Gatsby<\/a> on your computer.<\/li>\n
    2. \nClone the Starter Theme repository<\/a> and open the folder with a code editor.<\/li>\n
    3. Open a terminal at the root directory of the project and run npm install<\/code> to install the required packages.<\/li>\n
    4. Run gatsby develop<\/code> to start a local development server of the project on localhost:8000.<\/li>\n<\/ol>\n

      \"gatsby<\/p>\n

      Integration of Gatsby With Cloudinary<\/h2>\n

      Now integrate Cloudinary with the e-commerce app, enhancing it with UGC. Follow these steps:<\/p>\n

        \n
      1. \n

        Sign up for a Cloudinary account<\/a>, which is completely free for up to 25 credits monthly, enough for plenty of transformations, storage, and bandwidth.\nCloudinary\u2019s intuitive dashboard displays your account details and recent usage data. You can upload media files directly from the dashboard. For the purpose of this tutorial, configure the site so your audience can upload their content with Cloudinary\u2019s upload widget. See the steps below.<\/p>\n<\/li>\n

      2. \n

        Create an upload preset: log in to Cloudinary, click the Profile<\/strong> icon on the upper-right corner, and then click the gear-shaped Settings<\/strong> icon at the top.<\/p>\n<\/li>\n

      3. \n

        Click the Upload<\/strong> tab at the top, scroll down to the Upload presets<\/strong> section, and click Add upload preset<\/strong>. On the screen that is displayed, pull down the menu for Signing Mode<\/strong> and choose Unsigned<\/strong> to enable unsigned uploads. Click Save<\/strong>.<\/p>\n

        \"Preset\"<\/p>\n<\/li>\n

      4. \n

        Click the Security<\/strong> tab at the top and, under Restricted media types<\/strong>, select Resource list<\/strong> so that you can retrieve media files from Cloudinary\u2019s API.<\/p>\n<\/li>\n<\/ol>\n

        \"resource<\/p>\n

        To use Cloudinary\u2019s React SDK with Gatsby, install a dependency and set up the app, as follows:<\/p>\n

          \n
        1. Open the terminal and run the npm install cloudinary-react --save<\/code> command.<\/li>\n
        2. Add the custom script below to the Gatsby-browser.js<\/code> file in the root directory of the project so that you can use Cloudinary\u2019s upload widget:<\/li>\n<\/ol>\n
          const addScript = url => {\n  const script = document.createElement("script")\n  script.src = url;\n  script.async = true;\n  document.body.appendChild(script);\n}\nexport const onClientEntry = () => {\n  window.onload = () => {\n    addScript("https:\/\/widget.cloudinary.com\/v2.0\/global\/all.js")\n  };\n};\n<\/code><\/pre>\n
          Integration of Cloudinary with Gatsby is now complete. You can use all sorts of interesting features with Cloudinary\u2019s React SDK<\/a> inside the app. With Cloudinary, you can also validate, process, and transform user-generated videos<\/a>. Cloudinary add-ons<\/a> accord you control over content with artificial intelligence (AI).<\/p>\n
          The Cloudinary Upload Widget<\/h2>\n
          The Cloudinary upload widget<\/a> is a customizable, interactive, and responsive pop-up tool that uploads content directly to your Cloudinary account. The widget sends a callback function on successful uploads and offers cloud-name and upload-preset options for both signed and unsigned uploads. You only need JavaScript to integrate that widget into your web app.\nTo see what the upload widget can do, define a function in the src\\components\\ProductAttributes\\index.js<\/code> file and execute that function on a click event in your app, like this:<\/p>\n
            const showWidget = () => {\n    const uploadOptions = {\n      tags: ["userVideos"], \n      cloud_name: "your_cloud",\n      upload_preset: "your_preset",\n      resource_type: "video",\n      folder: "videos",\n    };\n    const widget = window.cloudinary.createUploadWidget(\n      uploadOptions,\n      (error, result) => {\n        if (!error && result && result.event === "success") {\n          console.log(result);\n        }\n      }\n    );\n    widget.open();\n  };\n<\/code><\/pre>\n
          uploadOptions<\/code> in the function above specifies that it accepts only resources with type video<\/code>. All uploaded videos are stored in a folder named videos<\/code> with the tag userVideos<\/code>.\nNext, call the showWidget<\/code> function on the click of a button:<\/p>\n
          <div className="text-center mb-4">\n        <button className="btn btn-primary"  onClick={showWidget}>\n          Upload Review Video\n        <\/button>\n<\/div>\n<\/code><\/pre>\n
          Clicking Upload Review Video<\/strong> then triggers this dialog box from the upload widget:<\/p>\n
          \"upload<\/p>\n
          Moderation and Security<\/h2>\n
          The most crucial aspects of managing UGC are moderation and security, which eliminate uploads of irrational, offensive, or harmful content. Implementation is a cumbersome task, but Cloudinary makes it swift with much less effort.<\/p>\n
          Cloudinary offers automatic and manual media moderations. Automated moderation, which approves or rejects the uploaded content, is through add-ons for images<\/a> and videos<\/a>. All you have to do is register for the add-ons, include them in the upload preset, and specify the moderation mode you desire. Follow these steps:<\/p>\n
            \n
          1. Navigate to the section where you created the upload preset and enable unsigned uploads.<\/li>\n
          2. Click the Upload Control<\/strong> tab on the left and select your moderation mode from the pull-down menu under Auto moderation<\/strong>.<\/li>\n<\/ol>\n
            \"upload<\/p>\n
            Security of your assets is equally important. What happens if someone uploads a media file that contains malware? It could inflict a load of harm on your business within seconds. Cloudinary automatically checks for malicious files, ensuring that your assets are secure. To activate that security check, simply apply any form of transformation through Cloudinary, such as cropping or changing your assets\u2019 width or format.<\/p>\n
            Cloudinary can also remove media information that\u2019s not relevant to your business. The Optical Character Recognition (OCR) add-on<\/a>, for example, automatically scans images and removes potentially sensitive information by blurring it.<\/p>\n
            Content-Aware Cropping<\/h2>\n
            Cloudinary\u2019s content-aware cropping feature identifies the most significant part of the media and intelligently crops it. In the Gatsby app, set gravity<\/code> to auto<\/code> and crop<\/code> to fill<\/code> by adding transformations using the Transformation<\/code> component imported  from the cloudinary-react<\/code> package:<\/p>\n
            import { CloudinaryContext, Transformation, Video } from "cloudinary-react";\n \n<Video\n  className=" col-xl-6 col-12 mb-2 shadow"\n  publicId={publicIds[id].public_id}\n  controls={true}\n  >\n  <Transformation\n    width="300"\n    height={window.innerWidth < 600 ? "300" : ""}\n    gravity="auto"\n    crop="fill"\n  \/>\n<\/Video>\n<\/code><\/pre>\n
            The Cloudinary Video Player<\/h2>\n
            Cloudinary\u2019s responsive, JavaScript-based video player<\/a> offers options for integration and customization, including skin themes, fonts, subtitles, transformations, and so forth. However, in the React app you just built, you can also dynamically pass the public ID (publicId<\/code>) as an attribute to create a customized video player with the Video<\/code> component of the Cloudinary-react SDK. If you look in the ProductAttributes<\/code> page of the sample project, you\u2019ll see we\u2019ve imported several Cloudinary React components and added a video player to the page:<\/p>\n
            import { CloudinaryContext, Transformation, Video } from "cloudinary-react";\n...\nconst getNextIndex = () => {\n    return id + 1 < publicIds.length ? id + 1 : 0;\n};\n...\n<CloudinaryContext cloudName="dafco2hao">\n        {publicIds.length > 0 ? (\n          <Header className="text-center" as="h3">\n            Videos with No Transformation\n          <\/Header>\n        ) : null}\n        {videos.map(data => {\n          return (\n            <div className="container " key={data.public_id}>\n              <div className="row py-3">\n                <Video\n                  className="col-xl-6 p-0 col-12 shadow"\n                  publicId={data.public_id}\n                  controls={true}\n                ><\/Video>\n              <\/div>\n            <\/div>\n          );\n        })}\n        {publicIds.length > 0 ? (\n          <>\n            <Header className="text-center mb-4" as="h3">\n              Video Playlist with Content Aware Cropping\n            <\/Header>\n            <Video\n              className=" col-xl-6 col-12 mb-2 shadow"\n              publicId={publicIds[id].public_id}\n              controls={true}\n            >\n              <Transformation\n                width="300"\n                height={window.innerWidth < 600 ? "300" : ""}\n                gravity="auto"\n                crop="fill"\n              \/>\n            <\/Video>\n          <\/>\n        ) : null}\n      <\/CloudinaryContext>\n...\n<div className="text-center mb-4">\n    <Button onClick={() => setId(getNextIndex())} variant="primary">\n            Next Video\n    <\/Button>{" "}\n<\/div>\n<\/code><\/pre>\n
            Conclusion<\/h2>\n
            You\u2019ve now learned how to enhance your website by first integrating Cloudinary with a Gatsby.js app and then leveraging Cloudinary\u2019s many advanced features, such as its upload widget, moderation and security capabilities, content-aware cropping, and video player. The deployed link<\/a> of this sample e-commerce app includes all the functions discussed in this tutorial.<\/p>\n
            Ultimately, by dynamically generating content on your site with Cloudinary, you can promote your product\u2019s authenticity and credibility, which bodes well for sales growth. For more details, see our developer resources<\/a>.<\/p>\n
            About the Author – Dhruv Patel<\/h2>\n
            Dhruv Patel is a full-stack developer and AWS-certified solutions architect. His motto is \u201cDo What You Love\u201d and Tech is surely one of them for him.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22319,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,98,303,305],"class_list":["post-22318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-e-commerce","tag-video","tag-video-api"],"acf":[],"yoast_head":"\nCreate a E-Commerce Site on Gatsby Along With User-Generated Content<\/title>\n<meta name=\"description\" content=\"Incorporate user-generated content into a Gatsby app by integrating it with Cloudinary, complete with moderation, security, and other advanced features.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Great E-Commerce Site on Gatsby Along With User-Generated Content Using Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Incorporate user-generated content into a Gatsby app by integrating it with Cloudinary, complete with moderation, security, and other advanced features.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-05T17:40:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-23T23:58:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a Great E-Commerce Site on Gatsby Along With User-Generated Content Using Cloudinary\",\"datePublished\":\"2021-04-05T17:40:28+00:00\",\"dateModified\":\"2024-10-23T23:58:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content\"},\"wordCount\":13,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA\",\"keywords\":[\"Asset Management\",\"E-commerce\",\"Video\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content\",\"url\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content\",\"name\":\"Create a E-Commerce Site on Gatsby Along With User-Generated Content\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA\",\"datePublished\":\"2021-04-05T17:40:28+00:00\",\"dateModified\":\"2024-10-23T23:58:34+00:00\",\"description\":\"Incorporate user-generated content into a Gatsby app by integrating it with Cloudinary, complete with moderation, security, and other advanced features.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Great E-Commerce Site on Gatsby Along With User-Generated Content Using Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a E-Commerce Site on Gatsby Along With User-Generated Content","description":"Incorporate user-generated content into a Gatsby app by integrating it with Cloudinary, complete with moderation, security, and other advanced features.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content","og_locale":"en_US","og_type":"article","og_title":"Create a Great E-Commerce Site on Gatsby Along With User-Generated Content Using Cloudinary","og_description":"Incorporate user-generated content into a Gatsby app by integrating it with Cloudinary, complete with moderation, security, and other advanced features.","og_url":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content","og_site_name":"Cloudinary Blog","article_published_time":"2021-04-05T17:40:28+00:00","article_modified_time":"2024-10-23T23:58:34+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content"},"author":{"name":"","@id":""},"headline":"Create a Great E-Commerce Site on Gatsby Along With User-Generated Content Using Cloudinary","datePublished":"2021-04-05T17:40:28+00:00","dateModified":"2024-10-23T23:58:34+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content"},"wordCount":13,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA","keywords":["Asset Management","E-commerce","Video","Video API"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content","url":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content","name":"Create a E-Commerce Site on Gatsby Along With User-Generated Content","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA","datePublished":"2021-04-05T17:40:28+00:00","dateModified":"2024-10-23T23:58:34+00:00","description":"Incorporate user-generated content into a Gatsby app by integrating it with Cloudinary, complete with moderation, security, and other advanced features.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/create_a_great_e_commerce_site_on_gatsby_along_with_user_generated_content#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Great E-Commerce Site on Gatsby Along With User-Generated Content Using Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719345\/Web_Assets\/blog\/Gatsby_Video_223199a3d1\/Gatsby_Video_223199a3d1.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22318"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22318\/revisions"}],"predecessor-version":[{"id":36157,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22318\/revisions\/36157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22319"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}