How to source images from a YAML array in Gatsby.js

Question

I'm developing a blog with Gatsby.js

Each post is a YAML file in which there is an array for the gallery like this:

gallery:
-'/uploads/image1.jpg'
-'/uploads/image2.jpg'
-'/uploads/image3.jpg'
-'/uploads/image4.jpg'
-'/uploads/image5.jpg'

in the post i have something like this:

const images = data.postData.frontmatter.gallery;

return (

{images.map((image, index) => {
            return (
  <img src={image}/>
)
}
)};

export const query = graphql`
query PostData($slug: String!) {
  postData: markdownRemark(fields: {slug: {eq: $slug}}) {
        frontmatter {
          gallery

        }
    }
}
`;

But the images don't show up as they are not processed and put in the static folder at build time.

As I understand it, the plugin 'gatsby-plugin-sharp' is not transforming the images that are found in the array in the YAML file, but it does when it's just one image...

(in some of the post there is a field like this

main-image: 'path/to/the/image'

which then I can source with graphql like this:

     main-image {
       fluid {
         src
       }
     }
   }

and instead for the 'gallery' array the 'fluid' node doesn't get created.)

I hope this makes some sense, I realise I'm a bit confused about how some things, I hope you can help me understand some stuff.

Thanks,

M

EDIT

I went a bit forwards thanks to @Z. Zlatev.

I insert this in gatsby-node.js:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MarkdownRemark
    implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      gallery: [File]
    }
  `;
  createTypes(typeDefs);
};

and now nodes are created for each image in the gallery array.

However, querying the images I get null...

Here some details:

The YAML File:

---
date: 2019-11-06T13:47:07.000+00:00
title: Cool Project
main_picture: "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
gallery:
 - "/uploads/PROEGELHOEF.jpg"
 - "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash-1.jpg"
 - "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash.jpg"
 - "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
---

Here the GraphQl query:

query MyQuery {
  allMarkdownRemark(filter: {id: {eq: "af697225-a842-545a-b5e1-4a4bcb0baf87"}}) {
    edges {
      node {
        frontmatter {
          title
          gallery {
            childImageSharp {
              fluid {
                src
              }
            }
          }
        }
      }
    }
  }
}

Here the data response:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "Cool Project",
              "gallery": [
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                }
              ]
            }
          }
        }
      ]
    }
  }
}

I guess I'm still missing something...

Answer 1

I will try to explain how this works in Gatsby. First of all, it's the gatsby-transformer-sharp plugin that's transforming your File nodes to ImageSharp nodes. gatsby-plugin-sharp is of course involved too as a low-level API.

The main issue you have is that Gatsby can't recognize(infer) your data as reference to files. Once it does a chain of transformation will automatically kick in. Gatsby actually tries to figure out if string is a file path but those paths must be relative to the file they are found in.

Consider the following example:

gatsby-project
├── content
│   ├── images
│   │   └── home.png
│   └── pages
│       └── home.yml
└── src

content/pages/home.yml

title: Homepage
url: /
image: ../images/home.png

The easiest solution would be to provide a correct relative paths in your yaml files. Sadly we know that's not always possible. An example of that are files created by NetlifyCMS. If this is your case too try some of the existing solutions like: https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms-paths/

Since Gatsby 2.2.0 the createSchemaCustomization API exists that allows us to handle such scenarios more gracefully by defining custom resolvers and field extensions but it may be daunting for people who are not familiar with GraphQL. Read more about it here .

Answer 2

I solved by installing this: https://www.npmjs.com/package/@forestryio/gatsby-remark-normalize-paths

Thanks for putting me in the right direction.

M