{"id":6377,"date":"2020-11-29T18:30:00","date_gmt":"2020-11-29T18:30:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=6377"},"modified":"2021-09-12T15:31:15","modified_gmt":"2021-09-12T15:31:15","slug":"serving-remotely-optimized-images-using-gatsby-image-w-o-graphql","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image-w-o-graphql\/","title":{"rendered":"Serving Remotely Optimized Images using gatsby-image w\/o GraphQL"},"content":{"rendered":"\n<p><a href=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/\">Section 1<\/a> of this article describes how to use Cloudinary remote pictures in GatsbyJS projects using GraphQL queries. In this second section, you&#8217;ll learn how to \u2014<\/p>\n\n\n\n<ul><li>Utilize distant photos saved in Cloudinary and sent via a content delivery network that is optimized (CDN).<\/li><li>With gatsby-image, you can serve fluid or fixed images.<\/li><li>With gatsby-image, render images for responsiveness and optimization.<\/li><li>Cloudinary can help you transform those images.<\/li><\/ul>\n\n\n\n<p>For e.g., we can rapsidly modify the image of this penguin:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6378\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image-w-o-graphql\/attachment\/remote-optimized-images-with-gatsby-image-01\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg\" data-orig-size=\"800,652\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-01\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01-300x245.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg\" loading=\"lazy\" width=\"800\" height=\"652\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg\" alt=\"\" class=\"wp-image-6378\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01-300x245.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01-768x626.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6379\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image-w-o-graphql\/attachment\/remote-optimized-images-with-gatsby-image-02\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg\" data-orig-size=\"800,652\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-02\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02-300x245.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg\" loading=\"lazy\" width=\"800\" height=\"652\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg\" alt=\"\" class=\"wp-image-6379\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02-300x245.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02-768x626.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>This section walks you through two processes in particular:<\/p>\n\n\n\n<p>Using the &#8220;getFluidImageObject&#8221; API of gatsby-transformer-cloudinary, fetch an image from Cloudinary and render it with gatsby-image. Any image in your Cloudinary account can be retrieved. Furthermore, even after applying the Cloudinary changes that you provide, the API can still use gatsby-image to optimize that image during the construction process.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>This image-fetching process requires no GraphQL queries.<\/em><\/p><\/blockquote>\n\n\n\n<p>With <a href=\"https:\/\/chakra-ui.com\/\">Chakra UI<\/a>, you can design a user interface and typography.<\/p>\n\n\n\n<h2>Steps to Get Started<\/h2>\n\n\n\n<p>You must have Gatsby.js installed with npm on your system before you begin. For further information, see <a href=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/\">Section 1&#8217;s<\/a> Installation part.<\/p>\n\n\n\n<p>Also, use the default GatsbyJS starter to build a new GatsbyJS project. Type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gatsby new gtc-demo-2<\/code><\/pre>\n\n\n\n<p>Clone this branch of the project mentioned in <a href=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/\">Section 1<\/a> instead.<\/p>\n\n\n\n<h2>Setup of Project Configurations<\/h2>\n\n\n\n<p>Follow the instructions in the three subsections under Setup of Project Configurations in <a href=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/\">Section 1<\/a> to \u2014 if you haven&#8217;t already.<\/p>\n\n\n\n<ul><li>Sign up for a Cloudinary account.<\/li><li>Create the gatsby-config.js file.<\/li><li>Variables for the environment are added.<\/li><\/ul>\n\n\n\n<h2>Page Layout Design<\/h2>\n\n\n\n<p>You&#8217;re now ready to start building a webpage and its design.<\/p>\n\n\n\n<p>To begin, use the following command to create a development environment:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>gatsby develop<\/code><\/pre>\n\n\n\n<p>After that, copy the files from <a href=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/\">Section 1<\/a> into the project&#8217;s components and pages directories.<\/p>\n\n\n\n<h2>Image Fetching With getFluidImageObject and getFixedImageObject APIs<\/h2>\n\n\n\n<p>Despite the fact that both &#8220;getfluidImageObject&#8221; and &#8220;getFixedImageObject&#8221; retrieve photos from Cloudinary accounts that have multiple or chained modifications, the two APIs differ in the following ways:<\/p>\n\n\n\n<p>&#8220;getFluidImageObject&#8221; delivers fluid images with the breakpoints you specified, or breakpoints with a maximum width of 650 if none were specified.<\/p>\n\n\n\n<p>getFixedImageObject returns fixed-width images, transferring them via asynchronous function calls to the gatsby-image &#8220;&lt;Image\/&gt;&#8221; component&#8217;s &#8220;fluid&#8221; or &#8220;fixed&#8221; property.<\/p>\n\n\n\n<p>There is no requirement for GraphQL queries because both APIs fetch images in a single asynchronous transaction.<\/p>\n\n\n\n<h2>Making a Webpage with a Single Image<\/h2>\n\n\n\n<p>Create a webpage that includes an image that was obtained using &#8220;getFluidImageObject&#8221;. Use the same arrangement as in <a href=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image\/\">Section 1<\/a>.<\/p>\n\n\n\n<p>The gatsby-transformer-cloudinary transformation settings &#8220;f_auto&#8221; and &#8220;q_auto&#8221; optimize the quality and format of images by default.<\/p>\n\n\n\n<p>GatsbyJS generates pages from the src\/pages directory&#8217;s JavaScript (JS) files.<\/p>\n\n\n\n<p>Perform the following actions:<\/p>\n\n\n\n<ul><li>In src\/pages, create a single.js JS file. Single.js is added to the \/single route by GatsbyJS.<\/li><li>Use the following code to import the relevant modules into single.js:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useEffect, useState } from \"react\"\nimport Layout from \"..\/components\/layout\"\nimport SEO from \"..\/components\/seo\"\nimport { getFluidImageObject } from \"gatsby-transformer-cloudinary\"\nimport Image from \"gatsby-image\"\nimport { Box, Heading, Text } from \"@chakra-ui\/core\/dist\";<\/code><\/pre>\n\n\n\n<ul><li>Create and export a SinglePage functional component. Get a single Cloudinary image with a public ID of your choice using the function. Below is the code, in which the public ID is gatsby-source-cloudinary\/penguin:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>const SinglePage = () =&gt; {\n    const &#91;fluid, setFluid] = useState(false);\n\n    useEffect(() =&gt; {\n        async function getData() {\n            const res = await getFluidImageObject({\n                public_id: \"gatsby-source-cloudinary\/penguin\",\n                cloudName: 'chuloo',\n                originalHeight: 400,\n                originalWidth: 500,\n                transformations: &#91;\"e_replace_color:purple\", \"a_hflip\"],\n            });\n            setFluid(res);\n        }\n\n        getData();\n\n\n    }, &#91;]);\n\n    return (\n        &lt;Layout&gt;\n            &lt;SEO title={\"single\"}\/&gt;\n            &lt;Box&gt;\n                &lt;Heading as={'h1'} size={'lg'} m={5} textAlign={'center'}&gt;Single Fluid Image&lt;\/Heading&gt;\n                &lt;Box maxWidth={&#91;350, 400, 500]} mx={\"auto\"} shadow=\"md\" borderWidth=\"1px\" rounded={'lg'} p={3}&gt;\n                    {fluid ? &lt;Image fluid={fluid}\/&gt; : \"loading...\"}\n                &lt;\/Box&gt;\n                &lt;Box my={30}&gt;\n                    &lt;Text&gt;This is a single image sourced directly from Cloudinary. This image can be any image in your\n                        Cloudinary account, the public ID of the image is required to source this images for use in\n                        gatsby-image &lt;\/Text&gt;\n                &lt;\/Box&gt;\n\n            &lt;\/Box&gt;\n        &lt;\/Layout&gt;\n    )\n};\n\nexport default SinglePage<\/code><\/pre>\n\n\n\n<p>&#8220;getFluidImageObject&#8221; is an asynchronous function in the above code that is called by &#8220;useEffect&#8221; on page load. After the method returns the picture, you use useState to save it in the component&#8217;s &#8220;fluid&#8221; state.<\/p>\n\n\n\n<p>Then, in the object argument of getFluidImageObjects, you supply the following keys:<\/p>\n\n\n\n<ul><li><strong>public<\/strong>_<strong>id<\/strong>: The public ID of the Cloudinary image<\/li><li><strong>cloudName<\/strong>: The cloud name of your Cloudinary account<\/li><li><strong>originalHeight<\/strong>: The height of the image to be fetched<\/li><li><strong>originalWidth<\/strong>: The width of the image to be fetched<\/li><li><strong>transformations<\/strong>: The transformations Cloudinary applies to the returned image<\/li><\/ul>\n\n\n\n<p>View <a href=\"https:\/\/www.npmjs.com\/package\/gatsby-transformer-cloudinary#api\">all of the keys<\/a>, as well as their optional and mandatory arguments.<\/p>\n\n\n\n<p>With the &#8220;e_replace_color:purple&#8221; and &#8220;a_hflip&#8221; parameters Cloudinary transformations, &#8220;getFluidImageObject&#8221; passes transformations in the transformation&#8217;s key to add a purple effect and to horizontally flip the image.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>With getFluidImageObjects, you can fetch with gatsby-image any image in your Cloudinary account for display on the page.<\/em><\/p><\/blockquote>\n\n\n\n<p>Before the modification, the image looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6378\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image-w-o-graphql\/attachment\/remote-optimized-images-with-gatsby-image-01\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg\" data-orig-size=\"800,652\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-01\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01-300x245.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg\" loading=\"lazy\" width=\"800\" height=\"652\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg\" alt=\"\" class=\"wp-image-6378\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01.jpg 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01-300x245.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-01-768x626.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>After transformation, it looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"6379\" data-permalink=\"https:\/\/azoora.com\/blog\/information\/serving-remotely-optimized-images-using-gatsby-image-w-o-graphql\/attachment\/remote-optimized-images-with-gatsby-image-02\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg\" data-orig-size=\"800,652\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"remote-optimized-images-with-gatsby-image-02\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02-300x245.jpg\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg\" loading=\"lazy\" width=\"800\" height=\"652\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg\" alt=\"\" class=\"wp-image-6379\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02.jpg 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02-300x245.jpg 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-02-768x626.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>gatsby-image lazy-loads images that are sourced with&nbsp;&#8220;<code>getFluidImageObject<\/code>&#8220;.<\/p>\n\n\n\n<h2>Update of Homepage<\/h2>\n\n\n\n<p>Finally, add a button to the homepage that will take you to the image you just found. To do so, change the &#8220;IndexPage&#8221; component in the &#8220;src\/pages\/index.js&#8221; file to look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\"\nimport { graphql, Link, useStaticQuery } from \"gatsby\";\nimport Layout from \"..\/components\/layout\"\nimport SEO from \"..\/components\/seo\"\nimport Image from \"gatsby-image\"\nimport { Box, Button, Heading, Text } from \"@chakra-ui\/core\/dist\";\n\nconst IndexPage = () =&gt; {\n    \/\/ fetch images\n    const data = useStaticQuery(graphql`query BannerImage {\n      bannerImage: file(name: { eq: \"7\" }) {\n        cloudinary: childCloudinaryAsset {\n          fluid(transformations:&#91;\"e_grayscale\"] maxWidth: 1500) {\n            ...CloudinaryAssetFluid\n          }\n        }\n      }\n    }`);\n\n    const bannerImage = data.bannerImage.cloudinary.fluid;\n\n    return (\n        &lt;Layout&gt;\n            &lt;SEO title=\"Home\"\/&gt;\n            &lt;Box mb={&#91;10, 20, 100]}&gt;\n                &lt;Heading size={'xl'} m={3} textAlign={\"center\"}&gt;Responsive Banner Image&lt;\/Heading&gt;\n                &lt;Box&gt;\n                    &lt;Image fluid={bannerImage}\/&gt;\n                &lt;\/Box&gt;\n            &lt;\/Box&gt;\n            &lt;Text my={5}&gt;Click any of the buttons below to see the gallery or single Image with\n                the &lt;i&gt;getFluidImageObject&lt;\/i&gt; API&lt;\/Text&gt;\n\n            &lt;Box&gt;\n                &lt;Button variantColor={'teal'} mr={10} mb={&#91;2, 0, 0]}&gt;\n                    &lt;Link to=\"\/gallery\"&gt; Gallery Images&lt;\/Link&gt;\n                &lt;\/Button&gt;\n\n                {\/_Button to single page with getFluidImageAPI_\/}\n                &lt;Button variantColor={'green'} mb={&#91;2, 0, 0]}&gt;\n                    &lt;Link to=\"\/single\"&gt;API Image&lt;\/Link&gt;\n                &lt;\/Button&gt;\n            &lt;\/Box&gt;\n        &lt;\/Layout&gt;\n    )\n};\n\nexport default IndexPage<\/code><\/pre>\n\n\n\n<p>Chakra UI styles the components in the above code for a responsive layout and responsive typography, with mobile, tablet, and desktop breakpoints.<\/p>\n\n\n\n<p>To see the new look of the webpage, restart the development server.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-03.mp4\"><\/video><\/figure>\n\n\n\n<p>Have you noticed the image that has been loaded slowly?<\/p>\n\n\n\n<p>Here&#8217;s a screenshot of the <a href=\"https:\/\/gtc-demo.netlify.app\/\">Netlify-deployed program<\/a> for comparison. The whole code is available on <a href=\"https:\/\/github.com\/Chuloo\/gtc-demo\/tree\/part-2\">GitHub<\/a>.<\/p>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>You now know how to get photos from Cloudinary into gatsby-image for GatsbyJS applications using &#8220;getFluidImageObject&#8221;. In a similar way, &#8220;getFixedImageObject&#8221; retrieves fixed pictures for gatsby-image.<\/p>\n\n\n\n<p>Section&nbsp;3 will show you how to add a dark mode to the website as a toggle and convert it to a progressive web app (PWA) with only a few lines of code. It&#8217;s incredible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Section 1 of this article describes how to use Cloudinary remote pictures in GatsbyJS projects using GraphQL queries. In this second section, you&#8217;ll learn how to \u2014 Utilize distant photos saved in Cloudinary and sent via a content delivery network that is optimized (CDN). With gatsby-image, you can serve fluid or fixed images. With gatsby-image, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[145,77],"tags":[146,73],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2021\/08\/remote-optimized-images-with-gatsby-image-part-01.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1ER","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6377"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=6377"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6377\/revisions"}],"predecessor-version":[{"id":6394,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/6377\/revisions\/6394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/6384"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=6377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=6377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=6377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}