2

I'm not sure what's wrong with my configuration. I've read all the tutorials regarding how to set this up. However, my images are not being picked up correctly in graphql for some reason.

Here is my config.yml

    backend:
        name: git-gateway
        branch: master
    
    local_backend:
        url: http://localhost:8082/api/v1
        allowed_hosts: ['192.168.0.1']
    
    media_folder: static/img
    public_folder: /img
    
    collections:
        - name: 'music'
          label: 'music'
          folder: 'content/music'
          create: true
          slug: 'index'
          media_folder: '/'
          public_folder: '/'
          editor:
              preview: false
          fields:
              - { label: 'Title', name: 'title', widget: 'string' }
              - { label: 'Release Date', name: 'date', widget: 'datetime' }
              - { label: 'Artwork', name: 'image', widget: 'image' }
              - { label: 'Spotify Url', name: 'spotify', widget: 'string' }

gatsby-config.js

{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `music`,
        path: `${__dirname}/content/music `,
    },
},
`gatsby-plugin-styled-components`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
    resolve: 'gatsby-transformer-remark',
    options: {
        plugins: [
            'gatsby-remark-images',
            {
                resolve: 'gatsby-remark-images',
                options: {
                    maxWidth: 2048,
                },
            },
        ],
    },
},
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-netlify-cms-paths`,

My query:

  {
  music: allFile(filter: {sourceInstanceName: {eq: "music"}}) {
    edges {
      node {
        id
        childImageSharp {gatsbyImageData}
        childMarkdownRemark {
          frontmatter {
            title
          
            image
          }
        }
      }
    }
  }
}

In my content/music/ I only have one folder but it comes back with two ones. I'm expecting the childImageSharp to be in the first node.

Here's the structure: contact/music/hell-made-me-stable/index.md contact/music/hell-made-me-stable/image.jpg

My response:

{
  "data": {
    "music": {
      "edges": [
        {
          "node": {
            "id": "576e6d54-f3aa-5b51-b35c-682fed8a820c",
            "childImageSharp": null,
            "childMarkdownRemark": {
              "frontmatter": {
                "title": "Hell Made Me STable",
                "image": "hell-made-me-stable.jpg"
              }
            }
          }
        },
        {
          "node": {
            "id": "2701fc19-6251-5a4d-8316-d24a590313af",
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#080808",
                "images": {
                  "fallback": {
                    "src": "/static/2a129588a0917df3df5e0d89954a9916/5a7c3/hell-made-me-stable.jpg",
                    "srcSet": "/static/2a129588a0917df3df5e0d89954a9916/f505e/hell-made-me-stable.jpg 250w,\n/static/2a129588a0917df3df5e0d89954a9916/be5ed/hell-made-me-stable.jpg 500w,\n/static/2a129588a0917df3df5e0d89954a9916/5a7c3/hell-made-me-stable.jpg 1000w",
                    "sizes": "(min-width: 1000px) 1000px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/2a129588a0917df3df5e0d89954a9916/e7160/hell-made-me-stable.webp 250w,\n/static/2a129588a0917df3df5e0d89954a9916/5f169/hell-made-me-stable.webp 500w,\n/static/2a129588a0917df3df5e0d89954a9916/3cd29/hell-made-me-stable.webp 1000w",
                      "type": "image/webp",
                      "sizes": "(min-width: 1000px) 1000px, 100vw"
                    }
                  ]
                },
                "width": 1000,
                "height": 1000
              }
            },
            "childMarkdownRemark": null
          }
        }
      ]
    }
  },
  "extensions": {}
}
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
speedydev
  • 33
  • 1
  • 1
  • 6

1 Answers1

1

There are a few configurations odd to me:

media_folder: static/img
public_folder: /img

This looks good, as the images will be transpiled into the public folder, however, the fact that the music collection is creating two files (markdown + image) in the same file is the key of your problem since edges is an array of two positions (with childImageSharp null).

I'd remove the following configuration in the collection:

      media_folder: '/'
      public_folder: '/'

Moreover, to allow Gatsby to parse, transform and sharp your images you need to add the following into your gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `uploads`,
    path: `${__dirname}/static/img`,
  },
},

Since it's the source of your images set in the media_folder.

All of this should create a single markdown file placed at contact/music/hell-made-me-stable/index.md with the image placed in the static folder, allowing you to point that image through the markdown.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • I have updated the configuration as you suggested. However, when I go to public/img or static/img. I do not see the images from my collection after running npm run build. What could be going on? – speedydev Oct 15 '22 at 17:26
  • Also now when I run the query query `MyQuery { allFile(filter: {sourceInstanceName: {eq: "music"}}) { nodes { name childMarkdownRemark { frontmatter { title image } } } } }` I don't see a relative path for my image or see the childSharpImage object as an object for image. I just see the image as 'filename.jpg' – speedydev Oct 15 '22 at 17:28
  • Is the image saved in the static folder? As it's a modified markdown you may need to add it manually. Once it's there, Gatsby should create the resolvers for that image allowing you to query it – Ferran Buireu Oct 15 '22 at 18:04
  • No it’s not saved in the static folder. It’s only inside the markdown folder content/music/folder. Why is that? I was expecting it to copy over from the markdown folder to the static folder. – speedydev Oct 15 '22 at 18:09
  • I guess it's because it's an edited markdown. Try creating a new one – Ferran Buireu Oct 15 '22 at 18:13