Is it possible to use an image filename as the slug in NetlifyCMS?

I am creating a new collection in NetlifyCMS called media and would like to know if it is possible to use the image filename as the identifier_field and slug.

So if I had an image titled ocean.png, adding a new entry in the media collection would result in content/media/ocean.md

At the moment, when I use identifier_field: media, the filename for the markdown file comes out as content/media/media-ocean-jpg.md. This is not bad, but ideally would like to get it down to just the filename.

Example

  # MEDIA =======================
  - name: "media" # Used in routes, e.g., /admin/collections/blog
    label: "Media" # Used in the UI
    label_singular: 'Media'
    description: "TKTK"
    folder: "content/media" # path to the folder where files are stored
    create: true # Allow users to create new documents in this collection
    identifier_field: media # sets the field that is used to create the slug
    slug: "{{slug}}"

    fields: # The fields for each document, usually in frontmatter

      - label: "Media"
        name: "media"
        widget: "image"
        hint: "TKTK"
        prompt: true
        media_library:
          config:
            multiple: true

      - label: "Name"
        name: "name"
        widget: "string"
        hint: "TKTK"
        required: false

      - label: "Image Alt"
        name: "alt"
        widget: "string"
        hint: "TKTK"

      - label: "Image Caption"
        name: "caption"
        widget: "string"
        hint: "TKTK"
        required: false

      - label: "Image Credit"
        name: "credit"
        widget: "string"
        hint: "TKTK"
        required: false

      - label: "Date"
        name: "date"
        widget: "datetime"
        dateFormat: "YYYY-MM-DD" # e.g. 24.12.2021
        timeFormat: "HH:mm" # e.g. 21:07
        format: "YYYY-MM-DD HH:mm:00 -0500"

What I have tried thus far

Or maybe as another way to solve this, I could make a hidden name field that gets populated by the image filename. Exploring to see what is possible, via this thread on dependent fields. dependent fields in collection · Issue #565 · netlify/netlify-cms · GitHub

Hi @jeremyzilar, this is not available yet, but I think you could create a custom widget that does that.
We recently merged feat: add entry, collection and config prop to control widget by hanneskuettner · Pull Request #3672 · netlify/netlify-cms · GitHub so a custom widget will get the entire entry data so you could extract the media field value in a hidden custom widget, then use that field to name the entry.

1 Like

Many thanks @erez. I will give that a :eyes: