Add to Hugo site variables from Netlify CMS

Question

I'm using the Forty Theme for Hugo with Netlify CMS, and the config.toml file has a Tiles section as follows:

# Tiles Section
[params.tiles]
enable = true

  # Display your showcases here.
  [[params.tiles.showcase]]
  title = 
  subtitle = 
  image = 
  url = 

I want to be able to add entries to the tiles section from CMS. How do I add variables to params.tiles.showcase from CMS? Here's a snippet from my config.yml

collections:
  - name: "blog"
    label: "Blog post"
    folder: "post/"
    create: true
    fields:
      - { label: "Title", name: "title" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "markdown", required: false }
      - { label: "Featured Image", name: "image", widget: "image", required: false }
      - { label: "Body", name: "body", widget: "markdown", required: false }

Answer 1

NetlifyCMS configuration allows you to setup a collection type targeting a file specifically. In the setup below, the target file is called test.toml. Of course, you can have it target config.toml but I will explain later in this answer why you may want to separate it to keep it clean in Hugo

Specify a file rather than a folder for your collection item as we did below. Remember the value will be a path starting at your repository/project root. Then we configure the fields using object type fields nesting to create our object paths.

config.yml

collections:
  - name: "blog"
    label: "Blog post"
    folder: "post/"
    create: true
    fields:
      - { label: "Title", name: "title" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "markdown", required: false }
      - { label: "Featured Image", name: "image", widget: "image", required: false }
      - { label: "Body", name: "body", widget: "markdown", required: false }
  - label: "Config"
    name: "configs"
    files:
      - name: "test"
        label: "test.toml"
        file: "test.toml"
        fields:
          - name: "params"
            label: "Params"
            widget: "object"
            fields:
              - name: "tiles"
                label: "Tiles"
                widget: "object"
                fields:
                  - {label: "Enable", name: "enable", widget: "boolean"}
                  - name: "showcase"
                    label: "Showcase Items"
                    widget: "list"
                    create: true # Allow users to create new documents in this collection
                    fields:
                      - { label: "Title", name: "title", widget: "string" }
                      - { label: "Sub Title", name: "subtitle", widget: "string" }
                      - { label: "Image", name: "image", widget: "image", required: false }
                      - { label: "URL", name: "url", widget: "string" }

Output:

test.toml

[params]

[params.tiles]
enable = true

[[params.tiles.showcase]]
image = "/images/some-image.jpg"
subtitle = "SubTitle 1"
title = "Title 1"
url = "/path1/"

[[params.tiles.showcase]]
image = "/images/some-other-image.jpg"
subtitle = "SubTitle 2"
title = "Title 2"
url = "/path2/"

Recommendation (Hugo): Since this configuration is going to target a collection for some showcase page, it may be better to take this into a file location with front matter (tiles/_index.md) or create a data file (data/tiles.json). All fields in the config.toml will need to be configured to be able to write out the collection. You cannot specify just a section of the file to be targeted within the setup of a file in NetlifyCMS at this time.