Cannot enter text or images in a CMS collection

I have created two collection files for my site content on Netlify CMS. On one of them (“Testimonials”) seems to work fine, in that I can type text into the form fields and they show up in the preview area.

The other (“Service Slides”) does not, i.e. when I click on the form input on the CMS page and try to type, no text shows up in the input field or the preview area. If I click on “Choose an image,” I can select one, but when I click “Choose selected” it just takes me back to the same form screen with no image chosen.

Here is my config file, which might have the problem, but you can also see my file structure in this repo if necessary:

Also, some context in case it’s helpful: my goal is to take the info from these CMS inputs and push them into JSON files in the appropriate _posts folders, essentially adding new objects to the json files with the info from the CMS fields. I will then use ajax requests to load this data onto the correct pages from the json files once the corresponding pages load. I have not yet created the Testimonials json file, but I have created the Service Slide json file, as well as the ajax request that loads the slideshow from this json file. So I’m definitely not 100% sure that my config.yml file is even set up correctly to do this, which could be the problem.

Thanks for any guidance you can give!

Hi @nrenteria303, the CMS doesn’t support JSON arrays at the root level yet, you could try this:

collections:
  - name: "content"
    label: "Site Content"
    files:
      - name: "service-slides"
        label: "Service Slides"
        file: "_posts/service-slides/service-slides.json"
        format: "json"
        description: "The images and captions that go in the slideshow at the top of the Services page"
        create: true
        fields:
          - label: "Slides"
            name: "slides"
            widget: list
            fields:
              - { label: "Title", name: "title", widget: "string" }
              - {
                  label: "Service Slideshow Image",
                  name: "image",
                  widget: "image",
                }
              - { label: "Caption", name: "caption", widget: "string" }
              - { label: "Alt Text", name: "altText", widget: "string" }

Then your JSON file will have this structure:

{
  "slides": [
    {
      "image": "../../../imgs/serv-slide-1.jpg",
      "caption": "Custom paint for every part of your home",
      "altText": "Painted doors inside a home"
    },
    {
      "image": "../../../imgs/serv-slide-2.jpg",
      "caption": "Expert exterior painting",
      "altText": "Exterior of a home painted by Nichols Quality Painting"
    },
    {
      "image": "../../../imgs/serv-slide-3.jpg",
      "caption": "Custom driftwood furniture for commercial...",
      "altText": "Custom driftwood desk inside of local yoga studio"
    },
    {
      "image": "../../../imgs/serv-slide-4.jpg",
      "caption": "...or residential use!",
      "altText": "Several pieces of driftwood furtniture, including a table and planters"
    }
  ]
}
1 Like

@erez That was it! I think it’s starting to make more and more sense. Thanks!

1 Like

Great to hear that @nrenteria303!