adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-04 01:22:21 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Enhancement: Add setting for enforcing relative image paths #223

New Issue
Closed
opened 2026-10-05 02:34:27 +02:00 by adam · 9 comments
adam commented 2026-10-05 02:34:27 +02:00
Owner
Copy link
Copy source

Is your feature request related to a problem? Please describe.
I am using Front Matter with the Gatsby framework and MDX files. My folder structure looks basically identical to the "Page and leaf bundles" example (except I use MDX files). When I add an image located in the same folder as the the index.mdx file, Front Matter always adds the absolute path to the image (/content/posts/leaf-bundle/image1.jpg) instead of the much shorter relative path (./image1.jpg). However, Gatsby MDX does not seem to support absolute image paths out of the box, so it fails creating the post when it encounters the image url.

Describe the solution you'd like
I would love a setting that forces relative paths when adding images through Front Matter. In the example above, the path would then be only the image's file name and not the full absolute path. It should also apply to sibling leaf-nodes (../leaf-bundle-2/image2.jpg). This would make resolving (image) files in the same directory much easier in Gatsby, but I am sure this also applies to other frameworks as well.

Describe alternatives you've considered
The alternative would be to find a Gatsby workaround for this, which I could not find yet unfortunately.

**Is your feature request related to a problem? Please describe.** I am using Front Matter with the Gatsby framework and MDX files. My folder structure looks basically identical to the ["Page and leaf bundles" example](https://frontmatter.codes/docs/content-types#page-and-leaf-bundles) (except I use MDX files). When I add an image located in the same folder as the the index.mdx file, Front Matter always adds the absolute path to the image (/content/posts/leaf-bundle/image1.jpg) instead of the much shorter relative path (./image1.jpg). However, Gatsby MDX does not seem to support absolute image paths out of the box, so it fails creating the post when it encounters the image url. **Describe the solution you'd like** I would love a setting that forces relative paths when adding images through Front Matter. In the example above, the path would then be only the image's file name and not the full absolute path. It should also apply to sibling leaf-nodes (../leaf-bundle-2/image2.jpg). This would make resolving (image) files in the same directory much easier in Gatsby, but I am sure this also applies to other frameworks as well. **Describe alternatives you've considered** The alternative would be to find a Gatsby workaround for this, which I could not find yet unfortunately. <!-- github-sync-id:1161672861 -->
adam closed this issue 2026-10-05 02:34:27 +02:00
adam commented 2026-10-05 02:34:28 +02:00
Author
Owner
Copy link
Copy source

Thank you for suggesting this enhancement @rolule. To what I said in #270, the media retrieval should be based on the content types that have the pageBundle property enabled.

Thank you for suggesting this enhancement @rolule. To what I said in #270, the media retrieval should be based on the content types that have the `pageBundle` property enabled. <!-- github-comment-id:1060955812 -->
adam commented 2026-10-05 02:34:28 +02:00
Author
Owner
Copy link
Copy source

As I was trying to reproduce it, I noticed the logic of creating relative paths was already in place when inserting images into the article's content. Just to understand it a bit better:

  • Which OS are you using?
  • Are you referring to adding the image into the content or the front matter of the article?
As I was trying to reproduce it, I noticed the logic of creating relative paths was already in place when inserting images into the article's content. Just to understand it a bit better: - Which OS are you using? - Are you referring to adding the image into the content or the front matter of the article? <!-- github-comment-id:1060968569 -->
adam commented 2026-10-05 02:34:29 +02:00
Author
Owner
Copy link
Copy source

Logic has changed a bit to make sure that sub-folders are also supported in the scenario. Feel free to test out the latest beta version.

Logic has changed a bit to make sure that sub-folders are also supported in the scenario. Feel free to test out the latest beta version. <!-- github-comment-id:1061073413 -->
adam commented 2026-10-05 02:34:30 +02:00
Author
Owner
Copy link
Copy source

Hello @estruyf, thank you for the fast reply. I am using MacOS 12.2 (21D49). I was referring to adding the image into the front matter of the article. Adding the images to the content by clicking the WYSIWYG editor does not work in MDX files for me (might create a separate issue for this).

I tried the latest beta, but I did not notice any changes.

Hello @estruyf, thank you for the fast reply. I am using MacOS 12.2 (21D49). I was referring to adding the image into the front matter of the article. Adding the images to the content by clicking the WYSIWYG editor does not work in MDX files for me (might create a separate issue for this). I tried the latest beta, but I did not notice any changes. <!-- github-comment-id:1061506040 -->
adam commented 2026-10-05 02:34:30 +02:00
Author
Owner
Copy link
Copy source

Changes that were added, were to the relative paths in the content, not yet in the front matter.

Changes that were added, were to the relative paths in the content, not yet in the front matter. <!-- github-comment-id:1061514417 -->
adam commented 2026-10-05 02:34:31 +02:00
Author
Owner
Copy link
Copy source

I checked out the new Beta and it worked, thank you ! The path in the front matter is now ./image1.jpg. Maybe we can even leave out the./? Also, relatively resolving the sibling leaf-nodes did not work for me yet (e.g: ../leaf-bundle-2/image2.jpg)

I checked out the new Beta and it worked, thank you ! The path in the front matter is now `./image1.jpg`. Maybe we can even leave out the`./`? Also, relatively resolving the sibling leaf-nodes did not work for me yet (e.g: ../leaf-bundle-2/image2.jpg) <!-- github-comment-id:1061732062 -->
adam commented 2026-10-05 02:34:32 +02:00
Author
Owner
Copy link
Copy source

Wasn't completed yet, but thanks for verifying 🙏

Wasn't completed yet, but thanks for verifying 🙏 <!-- github-comment-id:1061739834 -->
adam commented 2026-10-05 02:34:32 +02:00
Author
Owner
Copy link
Copy source

With this change, the relative paths work for the current bundle and sub-leafs.

With this change, the relative paths work for the current bundle and sub-leafs. <!-- github-comment-id:1061747208 -->
adam commented 2026-10-05 02:34:33 +02:00
Author
Owner
Copy link
Copy source

Awesome ! Works like a charm. Thank you :)

Awesome ! Works like a charm. Thank you :) <!-- github-comment-id:1061760931 -->
Sign in to join this conversation.
No Branch/Tag Specified
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#223