Netlify CMS not showing JSON file

Netlify CMS
1

Currently trying to get a JSON file with data to display in the Netlify CMS window. I am able to log in to the cms, but I can’t view all of the media that I have in the JSON file.
here is my config.yml:

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

local_backend: true

publish_mode: editorial_workflow

media_folder: "public/images/"
public_folder: "/images"


collections:
  - label: "Project"
    name: "images"
    format: "json"
    extension: "json"
    files:
      - label: "Images"
        name: "images"
        file: "/public/projects/images.json"
        fields: # The fields for each document, usually in front matter
          - {label: "type", name: "type", widget: "string"}
          - {label: "id", name: "id", widget: "number"}
          - {label: "title", name: "title", widget: "string"}
          - {label: "year", name: "year", widget: "string"}
          - {label: "description", name: "description", widget: "string"}
          - {label: "materials", name: "materials", widget: "string"}

Here is my file structure:
Screen Shot 2021-11-08 at 3.36.17 PM
Here is a snippet of my JSON:

{
            "type": "sculpture",
            "id": 74,
            "path": "../src/assets/sculpture/mathJoke1.JPG",
            "title": "The Engineer, the Physicist, and the Mathematician (1)",
            "year": "2014",
            "description": "'I declare this to be the outside.'",
            "materials": "Metal, paper"
        },
        {
            "type": "sculpture",
            "id": 75,
            "path": "../src/assets/sculpture/mathJoke2.JPG",
            "title": "The Engineer, the Physicist, and the Mathematician (2)",
            "year": "2014",
            "description": "'I declare this to be the outside.'",
            "materials": "Metal, paper"
        },
2

You cannot edit an unnamed list in Netlify CMS.

Change your json to the following format:

{
  "listName": [
    {
      "type": "sculpture",
      "id": 74,
      "path": "../src/assets/sculpture/mathJoke1.JPG",
      "title": "The Engineer, the Physicist, and the Mathematician (1)",
      "year": "2014",
      "description": "'I declare this to be the outside.'",
      "materials": "Metal, paper"
    }, {
      "type": "sculpture",
      "id": 75,
      "path": "../src/assets/sculpture/mathJoke2.JPG",
      "title": "The Engineer, the Physicist, and the Mathematician (2)",
      "year": "2014",
      "description": "'I declare this to be the outside.'",
      "materials": "Metal, paper"
    }
  ]
}

And update your collection accordingly:

collections:
  - label: "Project"
    name: "images"
    format: "json"
    extension: "json"
    files:
      - label: "Images"
        name: "images"
        file: "/public/projects/images.json"
        fields:
          - name: listName
            label: The Name of the List
            widget: list
            fields: 
              - {label: "type", name: "type", widget: "string"}
              - {label: "id", name: "id", widget: "number"}
              - {label: "title", name: "title", widget: "string"}
              - {label: "year", name: "year", widget: "string"}
              - {label: "description", name: "description", widget: "string"}
              - {label: "materials", name: "materials", widget: "string"}
3

This works for a list, but what if each list entry has an image with it? Do I have to use the image widget for that?

4

I’m getting
TypeError: e.replace is not a function
in my Details section of the CMS when I try to include a fields - {label: “path”, name: “path”, widget: “image”}

5

My guess is you have custom previews in place that cause this error. Try disabling them and nest the image widget under the list widgets’ fields

6

How do I disable custom previews? I’m not aware of setting any of them up. I’ll attach my current yml here, could you point me in the right direction?

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

local_backend: true

publish_mode: editorial_workflow

media_folder: "public/images/"
public_folder: "/images"


collections:
  - label: "Project"
    name: "images"
    format: "json"
    extension: "json"
    files:
      - label: "Images"
        name: "images"
        file: "/public/projects/images.json"
        fields:
          - name: images
            label: The Name of the List
            widget: list
            fields: 
              - {label: "type", name: "type", widget: "string"}
              - {label: "path", name: "path", widget: "image"}
              - {label: "id", name: "id", widget: "number"}
              - {label: "title", name: "title", widget: "string"}
              - {label: "year", name: "year", widget: "string"}
              - {label: "description", name: "description", widget: "string"}
              - {label: "materials", name: "materials", widget: "string"}
7

Can you share your repository?

8
9

Ah you used the images name twice, I think you have to use unique names.

10

The images name appears under the collections, the files, and the fields, which ones need to be changed?

11

I think it’s working now, thank you!

2 Likes