Gatsby image not working with list widgets from Netlify CMS

Question

I am having a weird problem with Gatsby and Netlify CMS website.

I am using gatsby-remark-relative-images to use the images fetched from Netlify CMS with gatsby-image. It works perfectly fine for the image widgets that are directly inside the frontmatter. However, it does not work for the image widget inside the list widget. For the image that is directly inside the frontmatter, I can query with Gatsby's childImageSharp. However, images inside of the list widget just return an array of strings which are the relative paths of the images.

Here are my codes.

config.yml

backend:
  name: github
  repo: my/repo
media_folder: static/assets
public_folder: /assets
publish_mode: editorial_workflow
collections:
  - name: 'projects'
    label: 'Projects'
    folder: 'src/pages/projects'
    create: true
    fields:
      - { name: title, label: Title }
      - { name: priority, label: Priority, widget: number, default: 0, valueType: int }
      - { name: category-type, label: Media Type, widget: select, options: ['Web', 'Mobile'] }
      - { name: thumbnail, label: Thumbnail Image, widget: image }
      - { name: thumbnail-subtitle, label: Thumbnail Subtitle, widget: string }
      - { name: main-images, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }
      -   name: app-links
          label: App or Website Links
          widget: list
          required: false
          fields:
            - name: app-link
              label: App or Website Link
              widget: object
              fields:
                - { name: url, label: URL, wdget: string }
                - { name: link-type, label: Media Type, widget: select, options: ['iOS', 'Android', 'Web'] }
      - { name: github-link, label: Github Link, widget: string, required: false }
      - { name: about, label: About this project, widget: markdown }
      - { name: technologies, label: Technologies, widget: list, field: { name: technology, label: Technology Name, widget: string } }
      - { name: extra-images, label: Extra Images, widget: list, required: false, field: { name: image, label: Image, widget: image } }

  - name: 'blog'
    label: 'Blog'
    folder: 'src/pages/blog'
    create: true
    fields:
      - { name: title, label: Title }
      - { name: priority, label: Priority, widget: number, default: 0, valueType: int }
      - { name: thumbnail, label: Thumbnail Image, widget: image }
      - { name: url, label: URL }
      - { name: date, label: Date, widget: datetime }
      - { name: intro, label: Intro, widget: markdown }

gatsby-config.js

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#F9F9F9`,
        theme_color: `#1F1F1F`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/assets`,
        name: 'media',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `articles`,
        path: `${__dirname}/src/pages/blog`,
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `projects`,
        path: `${__dirname}/src/pages/projects`,
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-relative-images`,
            options: {
              name: `media`,
            }, 
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWith: 960
            }
          }
        ],
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-styled-components`
  ],
}

gatsby-node.js

const { fmImagesToRelative } = require('gatsby-remark-relative-images')
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

I can query name: thumbnail properly with childImageSharp, however, name: main-images and name: extra-images return an array of strings and I cannot query with childImageSharp.

I have been spending quite some time on this issue now. Any help would be highly appreciated.

Kenta. K Kenta. K · Accepted Answer · 2019-12-11T06:24:49

I figured it out by myself. It was caused by the name of the widget. Apparently, it does not go with the hyphens.

When I change the widget to use camel case syntax instead of hyphens, it finally started working.

# Before:
{ name: main-images, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }

# After
{ name: mainImages, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }

Gatsby image not working with list widgets from Netlify CMS

1 Answers