Enhancement: Ability to extend media file metadata by defining custom fields #527

New Issue

Closed

opened 2026-10-05 02:51:20 +02:00 by adam · 6 comments

adam commented 2026-10-05 02:51:20 +02:00

Owner

Copy link

Copy source

Is your feature request related to a problem? Please describe.

I like to store captions with images and videos. Then, I use media snippets to insert a custom React component and set the caption value accordingly using placeholders.

Videos, however, do not have a caption field.

Here are a couple use cases where custom metadata is desirable:

• I have an image that displays an art piece created by another person. In this image's metadata, I'd like to store the name of this person and a link to their webpage. Then, wherever I reuse this image, I can insert this data into the markup of my custom snippet via placeholders as a form of attribution.
• Store a small generated Base64 encoded image string that can be used to display in-place of an image while it is loading.

Describe the solution you'd like
Ability to define fields on media files so that custom metadata could be attached.

This could be implemented similar to content types. where we could define our own media content types (e.g., image, generalVideo, courseVideo, textFile, etc.) and attach custom metadata to each type.

For the "image's author name and link" metadata example above, this could be a key-value pair field, or a contentRelationship field, where the metadata would be linked to a data file.

Describe alternatives you've considered
I considered storing caption text in the title field of a video but it feels hacky and would not be helpful if additional metadata needed to be attached.

**Is your feature request related to a problem? Please describe.** I like to store captions with images and videos. Then, I use media snippets to insert a custom React component and set the caption value accordingly using placeholders. Videos, however, do not have a caption field.  Here are a couple use cases where custom metadata is desirable: - I have an image that displays an art piece created by another person. In this image's metadata, I'd like to store the name of this person and a link to their webpage. Then, wherever I reuse this image, I can insert this data into the markup of my custom snippet via placeholders as a form of attribution. - Store a small generated Base64 encoded image string that can be used to display in-place of an image while it is loading. **Describe the solution you'd like** Ability to define [fields](https://frontmatter.codes/docs/content-creation/fields) on media files so that custom metadata could be attached. This could be implemented similar to [content types](https://frontmatter.codes/docs/content-creation/content-types). where we could define our own media content types (e.g., image, generalVideo, courseVideo, textFile, etc.) and attach custom metadata to each type. For the "image's author name and link" metadata example above, this could be a key-value pair field, or a contentRelationship field, where the metadata would be linked to a [data file](https://frontmatter.codes/docs/datafiles-view). **Describe alternatives you've considered** I considered storing caption text in the title field of a video but it feels hacky and would not be helpful if additional metadata needed to be attached. <!-- github-sync-id:1899521542 -->

adam closed this issue 2026-10-05 02:51:20 +02:00

adam commented 2026-10-05 02:51:21 +02:00

Author

Owner

Copy link

Copy source

Thanks @polynook; this is a great idea.

How would you like to set the content type for a media file? For instance, you have two images, one of the author, and one just an image for adding to your article. Both of these images are PNGs. How would you see the CMS selecting the right content type, or would it be an option to allow you to pick the content type from a dropdown first?

Thanks @polynook; this is a great idea. How would you like to set the content type for a media file? For instance, you have two images, one of the author, and one just an image for adding to your article. Both of these images are PNGs. How would you see the CMS selecting the right content type, or would it be an option to allow you to pick the content type from a dropdown first? <!-- github-comment-id:1723016476 -->

adam commented 2026-10-05 02:51:22 +02:00

Author

Owner

Copy link

Copy source

As this is a more significant task, I have created another task in which I have handled to show the caption field for video files: https://github.com/estruyf/vscode-front-matter/issues/669

As this is a more significant task, I have created another task in which I have handled to show the caption field for video files: https://github.com/estruyf/vscode-front-matter/issues/669 <!-- github-comment-id:1723045533 -->

adam commented 2026-10-05 02:51:23 +02:00

Author

Owner

Copy link

Copy source

This is how I envision this:

All images, videos (and other media files supported by Front Matter) uploaded to Front Matter would automatically have assigned a default media content type defined internally in Front Matter. Example for image:

{
    "name": "Image",
    "fields": [
        {
            "title": "Title",
            "name": "title",
            "type": "string",
            "required": false
        },
        {
            "title": "Caption",
            "name": "caption",
            "type": "string",
            "required": false
        },
        {
            "title": "Alt text",
            "name": "altText",
            "type": "string",
            "required": false
        },
    ],
    // A regex pattern or some other algorithm for Front Matter to recognize which media fiels are images.
    "fileType": "/(.*\.(?:png|svg|webp|avif))/",
}

Optionally, if a user desires, they could override this content type for any image.

Custom media content type defintion in frontmatter.json:

"frontMatter.taxonomy.mediaContentTypes": [
    {
        "name": "Image",
        "fields": [
            {
                "title": "Title",
                "name": "title",
                "type": "string",
                "required": false
            },
            {
                "title": "Caption",
                "name": "caption",
                "type": "string",
                "required": false
            },
            {
                "title": "Alt text",
                "name": "altText",
                "type": "string",
                "required": true
            },
            {
                "title": "Blurred Placeholder",
                "name": "blurredPlaceholder",
                "type": "string",
                // i.e. the value generated and set by a media script and should not be editable by hand by a user in the UI
                "editableInUI": false
            },
            // A new field that would allow defining key-value pairs
            {
                "title": "Authors",
                "name": "authors",
                "type": "map",
                "key": {
                    "title": "Name",
                    "name": "name",
                    "type": "string",
                    "required": true
                },
                "value": {
                    "title": "URL",
                    "name": "url",
                    "type": "string",
                    "required": true
                },
            },
            {
                "title": "Tags",
                "name": "tags",
                "type": "tags"
            },
        ],
        // Define this media content type only for PNG images. This means that inside Media view, only PNG files would be able to be converted to this media type.
        "fileType": "/(.*\.(?:png))/",
    }
]

Then, in the Media view, we could select one or more images and assign a custom media content type to them. Then, when editing their metadata, we would see our own custom fields there instead of the default ones.

Then, I can use a media snippet to insert an image component into an MDX file:

"frontMatter.content.snippets": {
    "Image": {
      "description": "Custom Image",
      "body": [
        "<Figure>",
        // &mediaUrl would come from internally defined content type and would not be overridable by a custom media content type
        "    <Image src=\"[[&mediaUrl]]\" alt=\"[[altText]]\" placeholder=\"[[placeholder]]\" />",
        "    <Caption>",
        "        [[caption]]",
        // authors.key and authors.value would be values from the selected key-value pair inside the UI when adding media snippet to content.
        "        <Author name=\"[[authors.key]]\" url=\"[[authors.value]]\" />"
        "    </Caption>",
        "</Figure>"
      ],
      "isMediaSnippet": true
    }
}

In this implementation, a user could choose manually which images (or other media files) should belong to a specific media content type.

When inserting this image into content, the user wouldn't be able to choose which media content type they wish to insert, because otherwise, stored metadata associated with the previous media content type would be lost.

The workflow would essentially be this:

1. User needs to attach custom metadata to a media file that they store inside Front Matter public media folder (image, video, text file, .ts script, etc.).
2. User defines custom media type with relevant fields for required metadata.
3. In Media viewer, user selects the files they wish to have this custom metadata. Not every image file may need to have custom metadata, so the user selects only a few images they want to have this custom metadata and assigns them to use their custom defined media content type. Not selected image files are unaffected and still remain using the default media type.
   • (optionally, there could be a setting when defined a custom media content type to automatically assign a media file to a specific media content type on upload if the filename matches a certain regex pattern (e.g., the file is present in a certain folder, has a certain extension, etc.))
4. User clicks on the pencil icon on the selected image to edit its metadata and sees their custom defined fields.

This is how I envision this: All images, videos (and other media files supported by Front Matter) uploaded to Front Matter would automatically have assigned a default `media content type` defined internally in Front Matter. Example for image: ```json { "name": "Image", "fields": [ { "title": "Title", "name": "title", "type": "string", "required": false }, { "title": "Caption", "name": "caption", "type": "string", "required": false }, { "title": "Alt text", "name": "altText", "type": "string", "required": false }, ], // A regex pattern or some other algorithm for Front Matter to recognize which media fiels are images. "fileType": "/(.*\.(?:png|svg|webp|avif))/", } ``` Optionally, if a user desires, they could override this content type for any image. Custom `media content type` defintion in `frontmatter.json`: ```json "frontMatter.taxonomy.mediaContentTypes": [ { "name": "Image", "fields": [ { "title": "Title", "name": "title", "type": "string", "required": false }, { "title": "Caption", "name": "caption", "type": "string", "required": false }, { "title": "Alt text", "name": "altText", "type": "string", "required": true }, { "title": "Blurred Placeholder", "name": "blurredPlaceholder", "type": "string", // i.e. the value generated and set by a media script and should not be editable by hand by a user in the UI "editableInUI": false }, // A new field that would allow defining key-value pairs { "title": "Authors", "name": "authors", "type": "map", "key": { "title": "Name", "name": "name", "type": "string", "required": true }, "value": { "title": "URL", "name": "url", "type": "string", "required": true }, }, { "title": "Tags", "name": "tags", "type": "tags" }, ], // Define this media content type only for PNG images. This means that inside Media view, only PNG files would be able to be converted to this media type. "fileType": "/(.*\.(?:png))/", } ] ``` Then, in the Media view, we could select one or more images and assign a custom `media content type` to them. Then, when editing their metadata, we would see our own custom fields there instead of the default ones. Then, I can use a media snippet to insert an image component into an MDX file: ```json "frontMatter.content.snippets": { "Image": { "description": "Custom Image", "body": [ "<Figure>", // &mediaUrl would come from internally defined content type and would not be overridable by a custom media content type " <Image src=\"[[&mediaUrl]]\" alt=\"[[altText]]\" placeholder=\"[[placeholder]]\" />", " <Caption>", " [[caption]]", // authors.key and authors.value would be values from the selected key-value pair inside the UI when adding media snippet to content. " <Author name=\"[[authors.key]]\" url=\"[[authors.value]]\" />" " </Caption>", "</Figure>" ], "isMediaSnippet": true } } ``` In this implementation, a user could choose manually which images (or other media files) should belong to a specific `media content type`. When inserting this image into content, the user wouldn't be able to choose which `media content type` they wish to insert, because otherwise, stored metadata associated with the previous `media content type` would be lost. The workflow would essentially be this: 1. User needs to attach custom metadata to a media file that they store inside Front Matter public media folder (image, video, text file, `.ts` script, etc.). 2. User defines `custom media type` with relevant fields for required metadata. 3. In Media viewer, user selects the files they wish to have this custom metadata. Not every image file may need to have custom metadata, so the user selects only a few images they want to have this custom metadata and assigns them to use their custom defined `media content type`. Not selected image files are unaffected and still remain using the default media type. - (optionally, there could be a setting when defined a custom `media content type` to automatically assign a media file to a specific `media content type` on upload if the filename matches a certain regex pattern (e.g., the file is present in a certain folder, has a certain extension, etc.)) 5. User clicks on the pencil icon on the selected image to edit its metadata and sees their custom defined fields. <!-- github-comment-id:1723107188 -->

adam commented 2026-10-05 02:51:23 +02:00

Author

Owner

Copy link

Copy source

Thanks @polynook for your insights!

Thanks @polynook for your insights! <!-- github-comment-id:1723418538 -->

adam commented 2026-10-05 02:51:24 +02:00

Author

Owner

Copy link

Copy source

WIP

• Create frontMatter.media.contentTypes setting
• Show the media files according to the content type
• Show the input form for the media metadata based on the content type
• Allow snippets to use the new fields
• Allow to extend the configuration with the new setting
• Allow to spit the configuration (check if correctly merged)
• Update the documentation
• Generate schema on documentation
• Support more field types (start with string)

{
  "frontMatter.media.contentTypes": [
    {
      "name": "default",
      "fileTypes": null,
      "fields": [
        {
          "title": "Title",
          "name": "title",
          "type": "string"
        },
        {
          "title": "Caption",
          "name": "caption",
          "type": "string"
        },
        {
          "title": "Alt text",
          "name": "alt",
          "type": "string"
        }
      ]
    },
    {
      "name": "jpg",
      "fileTypes": [
        "jpg"
      ],
      "fields": [
        {
          "title": "Title",
          "name": "title",
          "type": "string"
        },
        {
          "title": "Caption",
          "name": "caption",
          "type": "string"
        },
        {
          "title": "Author",
          "name": "author",
          "type": "string",
          "single": true
        }
      ]
    }
  ]
}

WIP - [x] Create `frontMatter.media.contentTypes` setting - [x] Show the media files according to the content type - [x] Show the input form for the media metadata based on the content type - [x] Allow snippets to use the new fields - [x] Allow to extend the configuration with the new setting - [x] Allow to spit the configuration (check if correctly merged) - [x] Update the documentation - [x] Generate schema on documentation - [x] Support more field types (start with string) ```json { "frontMatter.media.contentTypes": [ { "name": "default", "fileTypes": null, "fields": [ { "title": "Title", "name": "title", "type": "string" }, { "title": "Caption", "name": "caption", "type": "string" }, { "title": "Alt text", "name": "alt", "type": "string" } ] }, { "name": "jpg", "fileTypes": [ "jpg" ], "fields": [ { "title": "Title", "name": "title", "type": "string" }, { "title": "Caption", "name": "caption", "type": "string" }, { "title": "Author", "name": "author", "type": "string", "single": true } ] } ] } ``` <!-- github-comment-id:1931783458 -->

adam commented 2026-10-05 02:51:25 +02:00

Author

Owner

Copy link

Copy source

Documented: https://beta.frontmatter.codes/docs/media-view#metadata

Documented: https://beta.frontmatter.codes/docs/media-view#metadata <!-- github-comment-id:1959248819 -->

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

main

beta

dependabot/npm_and_yarn/js-yaml-4.3.1

dependabot/npm_and_yarn/multi-7958ac4c45

dependabot/npm_and_yarn/postcss-8.5.25

dependabot/npm_and_yarn/multi-670d462a53

dependabot/npm_and_yarn/http-proxy-middleware-2.0.10

dependabot/npm_and_yarn/shell-quote-1.10.0

dependabot/npm_and_yarn/websocket-driver-0.7.5

dependabot/npm_and_yarn/multi-6aaed2ab8e

copilot/validate-issue-1043

dependabot/npm_and_yarn/multi-84120a5570

dependabot/npm_and_yarn/launch-editor-2.14.1

dependabot/npm_and_yarn/multi-9dd3b9b346

estruyf/smart-file-rename

copilot/fix-unwanted-auto-update-publish-date

copilot/fix-content-view-sorting-issue

copilot/fix-virtual-workspace-folder-selection

copilot/fix-937

copilot/fix-965

copilot/fix-958

copilot/fix-950

copilot/fix-932

copilot-integration

hotfix/10.2.1

issue/816

issue/671

i18n

azure-translator

issue/747

issue/673

poc/content-tagging

combobox

v10.13.0

v10.12.0

v10.11.0

v10.10.1

v10.10.0

v10.9.0

v10.8.0

v10.7.0

v10.6.0

v10.5.1

v10.5.0

v10.4.1

v10.4.0

v10.3.0

v10.2.1

v10.2.0

v10.1.0

v10.0.2

v10.0.1

v10.0.0

v9.4.0

v9.3.1

v9.3.0

v9.2.0

v9.1.0

v9.0.0

v8.4.0

v8.3.0

v8.2.0

v8.1.2

v8.1.1

v8.1.0

v8.0.1

v8.0.0

v7.3.4

v7.3.3

v7.3.2

v7.3.1

v7.3.0

v7.2.0

v7.1.2

v7.1.1

v7.1.0

v7.0.0

v6.1.1

v6.1.0

v6.0.0

v5.10.0

v5.9.0

v5.8.0

v5.7.0

v5.6.0

v5.5.0

v5.4.0

v5.3.1

v5.3.0

v5.2.0

v5.1.1

v5.1.0

v5.0.0

4.0.1

4.0.0

3.1.0

v3.0.2

v3.0.1

v3.0.0

v2.5.1

v2.5.0

v2.4.1

v2.4.0

v2.3.0

v2.2.0

v2.1.0

v2.0.1

v2.0.0

v1.18.0

v1.17.1

v1.17.0

v1.16.1

v1.16.0

v1.15.1

v1.15.0

Labels

No items

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

adam (Adam Wojcieszonek)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#527