Question: query childCloudinaryAsset from markdownRemark?

[josu24]

Hello,

So my problem, that I would love to get some help with, is that I want to be able to query an childCloudinaryAsset on frontImageDesktop here to be able to use it with gatsby-image:

    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
          edges {
            node {
              excerpt
              frontmatter {
                date(formatString: "MMMM DD, YYYY")
                title
                bg_color
                text_color
                description1
                description2
                frontImageDesktop
              }
            }
          }
        }

But I cant since my posts looks like this, frontImageDesktop only contains the url :

    ---
    title: Test
    bg_color: white
    text_color: black
    date: 2021-03-27T23:37:27.616Z
    description1: Big desc
    description2: sm
    frontImageDesktop: https://res.cloudinary.com/name/image/upload/v161688xxx/_web.jpg
    ---

The Cloudinary assets are created and it works fine to query an asset like this:

     file(name: { eq: "_web" }) {
          childCloudinaryAsset {
            fixed {
              ...CloudinaryAssetFixed
            }
          }
        } 

What I would like to be able to do is this:

    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
                  edges {
                    node {
                      excerpt
                      frontmatter {
                        date(formatString: "MMMM DD, YYYY")
                        title
                        bg_color
                        text_color
                        description1
                        description2
                        frontImageDesktop {
                          childCloudinaryAsset {
                            fixed {
                              ...CloudinaryAssetFixed
                            }
                          }
                        } 
                      }
                    }
                  }
                }

SETUP:

    //gatsby-config.js
    require("dotenv").config()
    
    module.exports = {
      plugins: [
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            path: `${__dirname}/static/img`,
            name: `images`,
          },
        },
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            path: `${__dirname}/content/blog`,
            name: `blog`,
          },
        },
        {
          resolve: "gatsby-transformer-cloudinary",
          options: {
            cloudName: process.env.CLOUDINARY_CLOUD_NAME,
            apiKey: process.env.CLOUDINARY_API_KEY,
            apiSecret: process.env.CLOUDINARY_API_SECRET,
            uploadFolder: "name",
          },
        },
    
        {
          resolve: `gatsby-transformer-remark`,
          options: {
            plugins: [
              {
                resolve: `gatsby-remark-relative-images`,
              },
              {
                resolve: `gatsby-remark-images`,
                options: {
                  maxWidth: 590,
                },
              },
            ],
          },
        },
        {
          resolve: "gatsby-plugin-netlify-cms",
          options: {
            modulePath: `${__dirname}/cms/cms.js`,
          },
        },
    
        `gatsby-plugin-offline`,
        `gatsby-plugin-react-helmet`,
        `gatsby-plugin-sitemap`,
        {
        },
      ],
    }

    // gatsby-node.js
    import { createRemoteImageNode } from "gatsby-transformer-cloudinary"
    
    const POST_NODE_TYPE = "MarkdownRemark"
    
    export async function onCreateNode({
      node,
      actions: { createNode },
      createNodeId,
      createContentDigest,
      reporter,
    }) {
      // Testing for frontImageDesktop
      if (node.internal.type === POST_NODE_TYPE && node.frontImageDesktop) {
        await createRemoteImageNode({
          url: node.frontImageDesktop,
          parentNode: node,
          relationshipName: "frontImageDesktop",
          createNode,
          createNodeId,
          createContentDigest,
          reporter,
        })
      }
    }


    //config.yml
    
    backend:
      name: git-gateway
      branch: master
    
    media_folder: static/img
    public_folder: /img
    
    media_library:
      name: cloudinary
      config:
        cloud_name: name
        api_key: key
    
    collections:
      - name: "blog"
        label: "Blog"
        folder: "content/blog"
        create: true
        slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
        editor:
          preview: false
        fields:
          - { label: "Title", name: "title", widget: "string", required: true }
          - {
              label: "Background Color",
              name: "bg_color",
              widget: "string",
              required: true,
            }
          - {
              label: "Text Color",
              name: "text_color",
              widget: "string",
              required: true,
            }
          - { label: "Publish Date", name: "date", widget: "datetime" }
          - {
              label: "Big desc",
              name: "description1",
              widget: "text",
              required: true,
            }
          - {
              label: "Small desc",
              name: "description2",
              widget: "text",
              required: false,
            }
          - {
              label: "Front Image Desktop",
              name: "frontImageDesktop",
              widget: "image",
              required: true,
            }

[Chuloo]

Hi @josu24, you need to specify the frontmatter like this

---
title: Test
bg_color: white
text_color: black
date: 2021-03-27T23:37:27.616Z
description1: Big desc
description2: sm
frontImageDesktop: 
    cloudinaryAssetData: true
    originalWidth: 1000
    originalHeight: 800
    publicId: "_web"
    cloudName: "chuloo"
---

# Introduction
Lorem ipsum dolor sit amet,

Ensure you include the cloudinaryAssetData key, as this is what transforms the node to a Cloudinary asset.

[josu24]

@Chuloo
Thank you for your reply,

Could this be done automatically when I create a post or do I need to do this manually on every frontmatter?
because in the netlify cms I just pick an Image from cloudinary...

[Chuloo]

No, it would be done automatically, so long as you have any node object with those fields in frontImageDesktop it would convert them to a childCloudinaryAsset node.

[tonymamo]

I'm trying to do the exact same thing as @josu24 with gatsby-transformer-cloudinary and NetlifyCMS.

When I choose an image with netlify-cms-media-library-cloudinary, it just saves the URL of the image into frontmatter as already mentioned, and doesn't create cloudinaryAssetData, originalWidth, originalHeight, etc.

I've also tried using gatsby-source-cloudinary to upload local files in my project and then turn them into nodes using createRemoteImageNode(), but if I have a ton of different field names and it doesn't like it if multiple files have the same field like node.heroImage. Am I doing something wrong? I can open a new issue if that makes more sense. Thanks!

[Chuloo]

@tonymamo for cloudinaryAssetData node to be created from a data node the below fields are required

cloudinaryAssetData: true
originalWidth: 1000
originalHeight: 800
publicId: "_web"
cloudName: "xxx"

In netlify CMS if you can specify these fields somehow then it would work. I don't get this portion of your statement "but if I have a ton of different field names and it doesn't like it if multiple files have the same field like node.heroImage. "

[tonymamo]

Hi @Chuloo thanks for the response.

I'm looking into ways the the data node fields could be populated with netlify cms now, instead of it just saving off the path of the file. I'll update if I come up with anything. I'm also looking into using getFluidImageObject() using the file path from frontmatter, but still have the same issue of needing to know the height and width somehow.

Regarding the second part, sorry I wasn't clear with what I was saying, it was the end of a long day! I have several files that have a field called "heroImage", and I get an error saying Multiple node fields resolve to the same GraphQL field `MarkdownRemark.frontmatter.heroImage` - [`heroImage___NODE`, `heroImage`]. Gatsby will use `heroImage___NODE`.. I haven't looked into it much yet but I was thinking that maybe each field had to be uniquely named even if from different files? I'm wondering if updating my createSchemaCustomization in gatsby-node might help as well, since sometimes it thinks files are a string, and sometimes an image file 🤷

[josu24]

@tonymamo The solution for me was to create new ImageNodes for the url:s i have in my front matter like this:

    // gatsby-node.js
    import { createRemoteImageNode } from "gatsby-transformer-cloudinary"
    
    const POST_NODE_TYPE = "MarkdownRemark"
    
    export async function onCreateNode({
      node,
      actions: { createNode },
      createNodeId,
      createContentDigest,
      reporter,
    }) {
      //frontImageDesktop
      if (
        node.internal.type === POST_NODE_TYPE &&
        node.frontmatter.frontImageDesktop
      ) {
        await createRemoteImageNode({
          url: node.frontmatter.frontImageDesktop,
          parentNode: node,
          relationshipName: "frontImageDesktop",
          createNode,
          createNodeId,
          createContentDigest,
          reporter,
        })
      }

But I have a problem when I have a list of image-urls in my frontmatter, and would like to create a node (or something else?) that is an array of imageNodes...
This is what I tried to do so far but I cant get the ImageNodes to be in an array that I can loop through. Im not great at gatsby ;)

    //Trying to get nodes from list...
       if (
        node.internal.type === POST_NODE_TYPE &&
        node.frontmatter.imageListMobile
      ) {
        const listNode = {
          name: "imageListMobile",
          id: createNodeId("imageListMobile"),
          children: [],
          parent: node.id,
          internal: {
            contentDigest: createContentDigest(node.frontmatter.imageListMobile),
            type: `imageListMobile`,
          },
        }
    
        await createNode(listNode)
    
        const relationshipKey = `imageListMobile___NODE`
        node[relationshipKey] = listNode.id
    
        await node.frontmatter.imageListMobile.map(image => {
          createRemoteImageNode({
            url: image.image,
            parentNode: listNode,
            relationshipName: image.title,
            createNode,
            createNodeId,
            createContentDigest,
            reporter,
          })
        })

[josu24]

btw, are tracedSVG placeholders not supported? I dont seem to get any value on that field from the createRemoteImageNode function :)

[tonymamo]

Just wanted to give an update, I was able to get my frontmatter images working correctly, even if using the same keys in different files (in my case, a key called heroImage). I noticed that instead of being inside of frontmatter in the graphql query, it was actually a sibling because the parentNode is the node, not node.frontmatter like I expected it since thats the shape in the markdown file.

I too had a use case where I wanted to make an array of image nodes but couldn't figure it out, but luckily those are small images where I am using them so I am not using as a gatsby-image compatible image, and instead just a cloudinary url in a normal element.

I wasn't able to figure out how to add all of the necessary cloudinary asset data to frontmatter, and I am just using a cloudinary url, which before was just a relative URL like /img/file.jpg. I thought I needed gatsby-source-cloudinary for that, but it turns out I didn't, because I don't want to query for the images manually in graphql. Using createRemoteImageNode() did indeed work once I figured out that parent relationship as I mentioned in the first paragraph.

Lastly, for any images in the body of my markdown files, I used gatsby-remark-images-anywhere and the full cloudinary url of the asset and that worked too.

[bytrangle]

Hey @tonymamo Would you mind sharing a demo for using gatsby-source-cloudinary with Netlify CMS?

I just don't know where I'm supposed to put this frontmatter field:

featuredImage:
  cloudinaryAssetData: true
  originalWidth: 1000
  originalHeight: 800
  publicId: "_web"
  cloudName: "xxx"

when the Cloudinary integration with Netlify CMS doesn't seem to allow that.

[tonymamo]

hey @bytrangle,

I also have a field called featuredImage and it just stores the string of the cloudinary url. For example:

---
... // other frontmatter fields
featuredimage: https://res.cloudinary.com/getpackup/image/upload/v1617244550/getpackup/044a9077-2-2.jpg
---

And in my config.yml file for Netlify CMS I define Cloudinary as my media_library as such:

media_library:
  name: cloudinary
  config:
    cloud_name: getpackup 
    api_key: my_api_key

Then, in my schema for a blog post, I have the following:

fields:
      ... other fields
      - { label: 'Featured Image', name: featuredImage, widget: image }

So, whenever Netlify CMS sees the image widget, it renders the Cloudinary Media Library.

I also had to register the media library (CMS.registerMediaLibrary(cloudinary); using the netlify-cms-media-library-cloudinary package in my file that initializes the CMS (in my case, src/cms/cms.ts).

Hope that helps!

[tonymamo]

@bytrangle I just noticed you said gatsby-source-cloudinary, and not gatsby-transformer-cloudinary (this package here), so the above comment might not help at all, my apologies

[bytrangle]

@tonymamo Thank you. I meant gatsby-transformer-cloudinary. I just kept getting confused between the two.

When your images in Markdown files are links to remote resources, that means they won't be processed by gatsby-plugin-images, or gatsby-images, correct?

I guess I can customize the GraphQL schema to add a new field whose value is a html string for an <img> tag with srcset and sizes attributes for delivering responsive images:

markdownRemark {
  frontmatter {
    featuredImage {
    }
    responsiveFeaturedImage {
    }
  }
}

Example of markdownRemark.frontmatter.responsiveFeaturedImage:

<img src="https://res.cloudinary.com/cloud_name/images/upload/q_auto,f_auto,w_600/gatsby.jpg" srcset="https://res.cloudinary.com/cloud_name/images/upload/q_auto,f_auto,w_300/gatsby.jpg 300w, https://res.cloudinary.com/cloud_name/images/upload/q_auto,f_auto,w_600/gatsby.jpg 600w, https://res.cloudinary.com/cloud_name/images/upload/q_auto,f_auto,w_928/gatsby.jpg 928w, https://res.cloudinary.com/cloud_name/images/upload/q_auto,f_auto,w_1856/gatsby.jpg 1856w" sizes="(min-width: 980px) 928px, calc(95.15vw + 15px)" />

What do you do? I wonder if there's already a solution that I'm not aware of.

[tonymamo]

Hi @bytrangle,

For the cloudinary links I save in frontmatter fields, I then need to process them in my gatsby-node file using the createRemoteImageNode exported by this package. In my exports.onCreateNode I do the following:

const POST_NODE_TYPE = 'MarkdownRemark';

if (node.internal.type === POST_NODE_TYPE) {
   ... other things
   ...
    if (node.frontmatter && node.frontmatter.featuredImage) {
      await createRemoteImageNode({
        url: node.frontmatter.featuredimage,
        parentNode: node,
        relationshipName: 'featuredImage', // this is what the name will be in graphql, but not that it is at the same level as the frontmatter node, not _inside_ the frontmatter node anymore
        createNode,  // this is what generates all of the different sizes as if it were processed by gatsby-image or otherwise I think
        createNodeId,
        createContentDigest,
        reporter,
      });
    }
}

[bytrangle]

@tonymamo
Thank you. I appreciate you taking the time to share your approach.
But what if the image is inside the Markdown file? Then I can only think of using Regex to look for <img /> tag in the final HTML and add srcset and sizes.

[tonymamo]

Hey @bytrangle
For images within the body of the markdown (and not in the frontmatter section), I am using gatsby-remark-images-anywhere which does what it sounds like what you are looking for. See #103 for an issue I opened which shows how I'm using it

[bytrangle]

Hey @tonymamo
I appreciate the response. I haven't got time to try out gatsby-remark-images-anywhere but if I understand correctly, it feeds remote images into gatsby-image-sharp, and that is only possible if the image is downloaded to something like a cache folder, is it? Do you think it is serviceable on image-heavy site or that's when one should look for a good CMS?

[tonymamo]

@bytrangle I think it does download items to the .cache folder, so more images would mean a long build time if you clean or remove your cache during a deploy. There are plugins for services like Netlify to retain the cache that could help in that case, but unfortunately my use case is less than 100 images so I haven't bothered to took into it more.