yamljekyllnetlify-cms

Jekyll + NetlifyCMS collection widget


I have a problem with Jekyll + NetlifyCMS. I want to create relation widget. I cannot search my author in relation widget with code below. What am I doing wrong?

#config.yml
collections:
  authors:
    output: true
#_authors/jill.md
---
short_name: jill
name: Jill Smith
position: Chief Editor
---
Lorem ipsum
#admin/config.yml
- name: "pages"
  label: "Pages"
  files:
    - label: 'Homepage'
      name: 'homepage'
      file: 'pages/homepage.md'
      fields:
        - label: "Choose author"
          name: "author"
          widget: "relation"
          collection: "authors"
          value_field: "short_name"
          search_fields: ["name", "short_name"]


Solution

  • I ran into the exact same issue, I'll need to figure more out about how this actually works and how to better reference Jekyll page variables within Netlify CMS, but I got a working solution for my use case that I'll adapt to yours.

    First, add the display_fields object so that the user can see which author they are choosing. This might have been your issue as the docs outline it's a required property. I changed the value field to {{slug}} as we'll see it will be a foolproof method to reference the field later on. Also, I added authors to the CMS config as I had the collection I was referencing in the relation field. I'm not sure it that does the trick as well, but hey it can't hurt:

    #admin/config.yml
    - name: "authors"
      create: true
      folder: "_authors/"
      fields: 
      - label: 'Title'
        name: 'title'
        widget: 'string'
      - label: 'Position'
        name: 'position'
        widget: 'string'
    - name: "pages"
      label: "Pages"
      files:
        - label: 'Homepage'
          name: 'homepage'
          file: 'pages/homepage.md'
          fields:
            - label: "Choose author"
              name: "author"
              widget: "relation"
              collection: "authors"
              value_field: "{{slug}}"
              search_fields: ["name", "short_name"]
              display_fields: ["name"]
    

    You're fine to keep short_name as the value field that will commit to the homepage author property, but I'll show you an easier way for your content editors to add authors and apply them to the pages with the slug property. You can customize the slug or just let Jekyll create it by default. I haven't figured out how to access any of the page variables via Netlify without defining them first in the Netlify CMS, but slug works as the file name of the collection item when it is created and I can reference it natively through the CMS config.

    #layouts/home.html 
    ---
    title: Home
    author: jill
    ---
    <div class="author">
    {%- capture author-id -%}_authors/{{page.author}}.md{%- endcapture -%}
    {% assign author = site.authors | where: 'path', author-id | first %}
    {{ author.name }}
    </div>
    
    

    Note: the wee minus symbols are to strip any whitespace as captures are wan to do if you make them multiline. I just added them for safety. If you want to see how I reference fields from collections within other pages, you can read my guide on it.