{"id":28086,"date":"2021-04-14T17:20:28","date_gmt":"2021-04-14T17:20:28","guid":{"rendered":"http:\/\/Using-Remote-Image-specified-in-a-Blog-Post's-Markdown-Frontmatter-w-Gatsby-Image"},"modified":"2021-04-14T17:20:28","modified_gmt":"2021-04-14T17:20:28","slug":"using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/","title":{"rendered":"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Markdown is widely preferred as a means to create content. It provides a flexible system to make rich content while maintaining the simplicity of entering plain text.<\/p>\n<p>An additional benefit of writing in Markdown is the ability to specify Markdown document properties, and data, in the Markdown frontmatter.<\/p>\n<blockquote>\n<p>Frontmatter is a set of key-value pairs in a block, stated at the top of a Markdown document to contain the document\u2019s metadata.<\/p>\n<\/blockquote>\n<p>Blog posts often contain a banner or cover image, specified in some way in the blog content. In Gatsby.js powered blogs, this image can be queried with Graphql from any image source.<\/p>\n<p>Having this image specified in the Markdown frontmatter would provide a better experience. A better solution, however, is to have this image optimized and transformed to a gatsby-image compatible image object with fluid and fixed types.<\/p>\n<p>In this article, we will discuss how to utilize the gatsby-transformer-cloudinary plugin to source images on Cloudinary with an ID specified in the Markdown frontmatter of a Gatsby.js blog post. This image will be transformed into a gatsby-image compatible image object with fluid and fixed properties, right in the Markdown frontmatter.<\/p>\n<h2>Sandbox<\/h2>\n<p>We completed this project <a href=\"https:\/\/codesandbox.io\/s\/remote-fluid-images-in-markdown-frontmatter-of-gatsbyjs-blog-wnsxu?file=\/src\/templates\/blog-template.js\">in a Codesandbox<\/a>. You can fork it to see the project live. Once you fork it, you are required to specify your Cloudinary account credentials. These include your Cloud name, API key, and API secret as environment variables in a .env file (which you\u2019ll create) in the root directory of the project.\nSee <em>.env.example<\/em> in the root directory of the project for the required environment variables.<\/p>\n<p>You can create an account on Cloudinary to obtain the credentials.<\/p>\n<blockquote>\n<p>Cloudinary account information is required to upload local images on Cloudinary. But, if you don\u2019t need to upload images to Cloudinary, you don\u2019t need to specify the Cloudinary credentials nor specify an upload folder in the plugin configuration.<\/p>\n<\/blockquote>\n<p><a href=\"https:\/\/codesandbox.io\/s\/remote-fluid-images-in-markdown-frontmatter-of-gatsbyjs-blog-wnsxu?file=\/src\/templates\/blog-template.js\">https:\/\/codesandbox.io\/s\/remote-fluid-images-in-markdown-frontmatter-of-gatsbyjs-blog-wnsxu?file=\/src\/templates\/blog-template.js<\/a><\/p>\n<h2>Prerequisites and Setup<\/h2>\n<p>For this jam, we are implementing a feature in an existing Gatsby.js blog. You can use your blog or create a new blog using <a href=\"https:\/\/github.com\/gatsbyjs\/gatsby-starter-blog\">the Gatsby blog starter<\/a>. We created a bare-bones Gatsby.js blog in a <a href=\"https:\/\/codesandbox.io\/s\/remote-fluid-images-in-markdown-frontmatter-of-gatsbyjs-blog-bare-blog-starter-r1trk?file=\/package.json\">Codesandbox<\/a>. You can fork it to get started. The starter contains:<\/p>\n<ul>\n<li>Installed dependencies which include Chakra-ui for styling, and gatsby-transformer-remark to create file nodes for Markdown files.<\/li>\n<li>Gatsby.js plugins configuration in <em>gatsby-config.js<\/em> .<\/li>\n<li>Gatsby-node code to automatically generate pages for Markdown files.<\/li>\n<li>Minimalistic layout setup in <em>src\/components\/layout.js<\/em>.<\/li>\n<li>Templates for blog post pages in <em>src\/templates\/blog-template.js<\/em>.<\/li>\n<li>Example blog posts in Markdown located in <em>src\/blog-posts<\/em>.<\/li>\n<\/ul>\n<p>Here\u2019s the starter Codesandbox below<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/s\/remote-fluid-images-in-markdown-frontmatter-of-gatsbyjs-blog-bare-blog-starter-r1trk?file=\/package.json\">https:\/\/codesandbox.io\/s\/remote-fluid-images-in-markdown-frontmatter-of-gatsbyjs-blog-bare-blog-starter-r1trk?file=\/package.json<\/a><\/p>\n<blockquote>\n<p>You need to specify your Cloudinary account information as environment variables in a .env file to use this blog starter. See .env.example for a sample setup.<\/p>\n<\/blockquote>\n<p>The current bare blog starter looks like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C765D226A9918B77678A1F6AA8268A944676011FB61B21D6109AA13D3EF3DA25_1614437167656_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"854\" height=\"610\"\/><\/p>\n<h2>Installing Gatsby-transformer-cloudinary<\/h2>\n<p>Gatsby-transformer cloudinary is a transformer plugin for Gatsby.js that creates Cloudinary asset nodes for images in a Gatsby project. Local image files are uploaded to Cloudinary, and an optimized image data, and an image object fragment compatible with gatsby-image, is created by the plugin, using the returned image URLs. This way, remote images delivered via a content delivery network are used in the Gatsby.js website. Cloudinary transformations can also be applied directly in the GraphQL query for the image data.<\/p>\n<p>Another feature of the plugin is to create asset nodes for images already on Cloudinary. The plugin converts an object or data node with a key of <code>CloudinaryAssetData<\/code> set to <em>true, (and other required keys),<\/em> into a CloudinaryAsset node in GraphQL. This is true for both JSON data structures, and frontmatter in Markdown.<\/p>\n<p>We\u2019ll use remote images on Cloudinary, specified in each blog post\u2019s frontmatter. The frontmatter data must contain:<\/p>\n<ul>\n<li>cloudinaryAssetData: We set to <em>true<\/em>.<\/li>\n<li>originalWidth: This is the original width of the remote image.<\/li>\n<li>originalHeight: This is the original height of the remote image.<\/li>\n<li>publicId: This is the public ID of the image on Cloudinary.<\/li>\n<li>cloudName: This is the cloud name of the Cloudinary account the image resides.<\/li>\n<\/ul>\n<blockquote>\n<p>The originalWidth and originalHeight values are required to compute the aspect ratio of the image. This is necessary to display the image in the right dimensions.<\/p>\n<\/blockquote>\n<p>We\u2019ll install the plugin using yarn with<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">    yarn add gatsby-transformer-cloudinary\n<\/code><\/span><\/pre>\n<p>Once its installation is complete, we add the plugin configuration to <em>gatsby-config.js<\/em>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">\"dotenv\"<\/span>).config()\n    \n    <span class=\"hljs-built_in\">module<\/span>.exports = {\n      <span class=\"hljs-attr\">siteMetadata<\/span>: {},\n      <span class=\"hljs-attr\">plugins<\/span>: &#91;\n        {<span class=\"hljs-string\">\"other plugins go in here\"<\/span>},\n        {\n          <span class=\"hljs-attr\">resolve<\/span>: <span class=\"hljs-string\">`gatsby-transformer-cloudinary`<\/span>,\n          <span class=\"hljs-attr\">options<\/span>: {\n            <span class=\"hljs-attr\">cloudName<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n            <span class=\"hljs-attr\">apiKey<\/span>: process.env.CLOUDINARY_API_KEY,\n            <span class=\"hljs-attr\">apiSecret<\/span>: process.env.CLOUDINARY_API_SECRET,\n            <span class=\"hljs-attr\">useCloudinaryBreakpoints<\/span>: <span class=\"hljs-literal\">false<\/span>\n          }\n        }\n      ]\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019ll restart the development server to load the plugins, source, and transform file nodes.<\/p>\n<h2>Updating the frontmatter of blog posts<\/h2>\n<p>Our goal is to specify a blog cover image in the frontmatter of a blog post, and we query an image object fragment which we, in turn, use in gatsby-image.<\/p>\n<p>We update each blog post\u2019s frontmatter to include a <em>coverImage<\/em> object key with key-value pairs, describing the required image. The frontmatter of a blog post looks like this.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    <span class=\"hljs-comment\">\/\/ first.md<\/span>\n    ---\n    title: <span class=\"hljs-string\">\"First blog post using Gatsby x Cloudinary\"<\/span>\n    path: <span class=\"hljs-string\">\"\/first-post-2302202\"<\/span>\n    publishBy: <span class=\"hljs-string\">\"2021-02-21\"<\/span> \n    coverImage: \n        cloudinaryAssetData: <span class=\"hljs-keyword\">true<\/span>\n        originalWidth: <span class=\"hljs-number\">1000<\/span>\n        originalHeight: <span class=\"hljs-number\">800<\/span>\n        publicId: <span class=\"hljs-string\">\"remote-images\/7\"<\/span>\n        cloudName: <span class=\"hljs-string\">\"chuloo\"<\/span>\n    ---\n    <span class=\"hljs-comment\"># Introduction<\/span>\n    Lorem ipsum dolor sit amet, epicuri \\&#91;sensibus\\](https:<span class=\"hljs-comment\">\/\/google.com) oportere est ut. No ubique oporteat est, laudem quaerendum quo ut. Feugiat adversarium est ne, ei pri illud definitiones. Mea ea apeirian sensibus signiferumque? Mei an graeci civibus, usu ad eirmod labitur.<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We specified an image on Cloudinary with a publicID of <code>remote-images\/7<\/code>. We replicate the same update for every blog post, each with its image.<\/p>\n<p>We restart the development server to rebuild the GraphQL data nodes. Looking in the <a href=\"http:\/\/localhost:8001\/___graphql\">Graphiql interface<\/a>, we can see that the frontmatter data for <em>allMarkdownRemark<\/em> node in the explorer is updated. The data initially in <em>coverImage<\/em> is **replaced **with a <em>cloudinaryAsset<\/em> node having fluid and fixed properties.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C765D226A9918B77678A1F6AA8268A944676011FB61B21D6109AA13D3EF3DA25_1614439669364_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"305\" height=\"751\"\/><\/p>\n<p>With this setup, we can query data in coverImage along with data for the blog post content in each blog post.<\/p>\n<h2>Update pages<\/h2>\n<p><strong>Home page<\/strong>\nWe proceed to update the home page\u2019s query and UI in <em>src\/pages\/index.js<\/em>  to include the blog image.<\/p>\n<p>We update the GraphQL query to<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { graphql, Link } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> Layout <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/layout\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> SEO <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/seo\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby-image\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { Box, Text, SimpleGrid, HStack } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@chakra-ui\/react\"<\/span>\n    \n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> query = graphql<span class=\"hljs-string\">`\n      query {\n        allMarkdownRemark(sort: { order: DESC, fields: frontmatter___publishBy }) {\n          edges {\n            node {\n              fields {\n                slug\n              }\n              frontmatter {\n                title\n                publishBy\n                coverImage {\n                  fluid(transformations: \"f_auto,q_auto\") {\n                    ...CloudinaryAssetFluid\n                  }\n                }\n              }\n              timeToRead\n            }\n          }\n        }\n      }\n    `<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>This query includes transformations for quality and format optimizations, and you can find <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformation_reference\">other transformations on Cloudinary.<\/a> The <em>\u2026CloudinaryAssetFluid<\/em> fragment returns the fluid image required by gatsby-image.<\/p>\n<p>Next, we update the page component to<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> IndexPage = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ data }<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> blogPosts = data.allMarkdownRemark.edges\n      <span class=\"hljs-keyword\">const<\/span> imageWithIndex = <span class=\"hljs-function\"><span class=\"hljs-params\">index<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">return<\/span> blogPosts&#91;index].node.frontmatter.coverImage.fluid\n      }\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Layout<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SEO<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Home\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">my<\/span>=<span class=\"hljs-string\">{5}<\/span> <span class=\"hljs-attr\">fontSize<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">3xl<\/span>\"} <span class=\"hljs-attr\">fontWeight<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">bold<\/span>\"}&gt;<\/span>\n            Blog Posts\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SimpleGrid<\/span> <span class=\"hljs-attr\">columns<\/span>=<span class=\"hljs-string\">{3}<\/span> <span class=\"hljs-attr\">spacing<\/span>=<span class=\"hljs-string\">{8}<\/span>&gt;<\/span>\n            {blogPosts &amp;&amp;\n              blogPosts.map(({ node }, index) =&gt; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Box<\/span>\n                  <span class=\"hljs-attr\">as<\/span>=<span class=\"hljs-string\">{Link}<\/span>\n                  <span class=\"hljs-attr\">shadow<\/span>=<span class=\"hljs-string\">\"md\"<\/span>\n                  <span class=\"hljs-attr\">borderWidth<\/span>=<span class=\"hljs-string\">\"1px\"<\/span>\n                  <span class=\"hljs-attr\">rounded<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">lg<\/span>\"}\n                  <span class=\"hljs-attr\">p<\/span>=<span class=\"hljs-string\">{2}<\/span>\n                  <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{index}<\/span>\n                  <span class=\"hljs-attr\">to<\/span>=<span class=\"hljs-string\">{node.fields.slug}<\/span>\n                &gt;<\/span>\n                  {imageWithIndex(index) ? (\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">fluid<\/span>=<span class=\"hljs-string\">{imageWithIndex(index)}<\/span> \/&gt;<\/span>\n                  ) : (\n                    \"loading...\"\n                  )}\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">fontSize<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">sm<\/span>\"} <span class=\"hljs-attr\">mt<\/span>=<span class=\"hljs-string\">{3}<\/span> <span class=\"hljs-attr\">fontWeight<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">500<\/span>\"}&gt;<\/span>\n                    {node.frontmatter.title}\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">HStack<\/span> <span class=\"hljs-attr\">spcacing<\/span>=<span class=\"hljs-string\">{5}<\/span> <span class=\"hljs-attr\">mt<\/span>=<span class=\"hljs-string\">{1}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">gray.400<\/span>\"} <span class=\"hljs-attr\">fontSize<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">xs<\/span>\"}&gt;<\/span>\n                      {node.timeToRead} {node.timeToRead &gt; 1 ? \"mins\" : \"min\"}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">gray.400<\/span>\"} <span class=\"hljs-attr\">fontSize<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">xs<\/span>\"}&gt;<\/span>\n                      {node.frontmatter.publishBy}\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">HStack<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Box<\/span>&gt;<\/span>\n              ))}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">SimpleGrid<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Layout<\/span>&gt;<\/span><\/span>\n      )\n    }\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> IndexPage \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The updated page looks like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C765D226A9918B77678A1F6AA8268A944676011FB61B21D6109AA13D3EF3DA25_1614441499770_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"598\" height=\"715\"\/><\/p>\n<p>Blog post page\nWe\u2019ll update the blog post template in <code>src\/templates\/blog-template.js<\/code><strong>.<\/strong> First, we update the GraphQL query to include the query for the cover image.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { graphql } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> Image <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"gatsby-image\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> Layout <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/layout\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> SEO <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/components\/seo\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { Box, Center, HStack, Text } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@chakra-ui\/react\"<\/span>\n    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/blog-template.css\"<\/span>\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> query = graphql<span class=\"hljs-string\">`\n      query($slug: String!) {\n        markdownRemark(fields: { slug: { eq: $slug } }) {\n          html\n          frontmatter {\n            publishBy\n            title\n            coverImage {\n              fluid(transformations: \"f_auto,q_auto\") {\n                ...CloudinaryAssetFluid\n              }\n            }\n          }\n          timeToRead\n          wordCount {\n            words\n          }\n        }\n      }\n    `<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The query is similar to that made on the home page. Next, we update the blog post component with<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">const<\/span> BlogPost = <span class=\"hljs-function\">(<span class=\"hljs-params\">{ data }<\/span>) =&gt;<\/span> {\n      <span class=\"hljs-keyword\">const<\/span> post = data.markdownRemark\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Layout<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SEO<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">\"Home\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">my<\/span>=<span class=\"hljs-string\">{5}<\/span> <span class=\"hljs-attr\">fontSize<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">3xl<\/span>\"} <span class=\"hljs-attr\">fontWeight<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">bold<\/span>\"}&gt;<\/span>\n            {post.frontmatter.title}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Box<\/span> <span class=\"hljs-attr\">mb<\/span>=<span class=\"hljs-string\">{10}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Box<\/span> <span class=\"hljs-attr\">mx<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">auto<\/span>\"} <span class=\"hljs-attr\">shadow<\/span>=<span class=\"hljs-string\">\"md\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">fluid<\/span>=<span class=\"hljs-string\">{post.frontmatter.coverImage.fluid}<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Box<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Center<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">HStack<\/span> <span class=\"hljs-attr\">spacing<\/span>=<span class=\"hljs-string\">{5}<\/span> <span class=\"hljs-attr\">mt<\/span>=<span class=\"hljs-string\">{3}<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">gray.400<\/span>\"} <span class=\"hljs-attr\">fontSize<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">xs<\/span>\"}&gt;<\/span>\n                  {post.timeToRead} {post.timeToRead &gt; 1 ? \"mins read\" : \"min read\"}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Text<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">gray.400<\/span>\"} <span class=\"hljs-attr\">fontSize<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">xs<\/span>\"}&gt;<\/span>\n                  {post.frontmatter.publishBy}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Text<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">HStack<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Center<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Box<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Box<\/span>\n            <span class=\"hljs-attr\">dangerouslySetInnerHTML<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">__html:<\/span> <span class=\"hljs-attr\">post.html<\/span> }}\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>\"<span class=\"hljs-attr\">blog-content<\/span>\"}\n          \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Layout<\/span>&gt;<\/span><\/span>\n      )\n    }\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> BlogPost\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The component renders a fluid image with Chakra-ui components. The fluid image takes the <em>Box<\/em> component\u2019s full width (a Chakra-ui extension of the HTML div).<\/p>\n<p>The HTML content is also rendered using the <code>dangerouslySetInnerHTML<\/code> prop.<\/p>\n<h2>Summary<\/h2>\n<p>In this jam, we discussed using the gatsby-transformer-cloudinary plugin to create image nodes specified in a blog post frontmatter from existing images on Cloudinary. This image node, queried using GraphQL, is then utilized in a blog post page. Take this for a spin, add multiple transformations to the image, and try the <em>fixed<\/em> image property of gatsby-image.<\/p>\n<p>You may find the links below useful.<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/gatsby-transformer-cloudinary\">Gatsby-transformer-cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/gatsby-transformer-remark\">Gatsby-transformer-remark<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28087,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[378,134,370,175,371],"class_list":["post-28086","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-gatsbyjs","tag-guest-post","tag-image","tag-jamstack","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter<\/title>\n<meta name=\"description\" content=\"In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.\" \/>\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\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter\" \/>\n<meta property=\"og:description\" content=\"In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-14T17:20:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter\",\"datePublished\":\"2021-04-14T17:20:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA\",\"keywords\":[\"GatsbyJS\",\"Guest Post\",\"Image\",\"JAMStack\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/\",\"name\":\"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA\",\"datePublished\":\"2021-04-14T17:20:28+00:00\",\"description\":\"In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA\",\"width\":5472,\"height\":3648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter\"}]},{\"@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":"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter","description":"In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.","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\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/","og_locale":"en_US","og_type":"article","og_title":"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter","og_description":"In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/","og_site_name":"Cloudinary Blog","article_published_time":"2021-04-14T17:20:28+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/"},"author":{"name":"","@id":""},"headline":"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter","datePublished":"2021-04-14T17:20:28+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA","keywords":["GatsbyJS","Guest Post","Image","JAMStack","Under Review"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/","name":"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA","datePublished":"2021-04-14T17:20:28+00:00","description":"In this post, we explore how to transform image IDs in a blog post frontmatter into gatsby-image compatible fluid or fixed image objects.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA","width":5472,"height":3648},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/using-remote-image-specified-in-a-blog-posts-markdown-frontmatter-w-gatsby-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using Remote Image specified in a Blog Post\u2019s Markdown Frontmatter"}]},{"@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\/v1681925435\/Web_Assets\/blog\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc\/cd9379ceef3368b00bbe0665d2fb0c8fdd12cccf-5472x3648-1_2808738dfc.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28086","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=28086"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28087"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}