Beta Bug: media_folder_relative also setting relative path when uploading images

Describe the bug I’m referring to a Gatsby issue Issue 4753, where you announced relative image paths in the beta. This works great for loading files from the static folder that already exist, but uploading a new file via the admin also saves them as relative paths to the .md file, making it impossible to find it later when loading (basically ignoring the media_folder setting).

To Reproduce

1. Install the Beta “^2.9.8-beta.3”
2. Set the config media_folder_relative: true media_folder: "static/uploads"
3. Upload an image via the netlify admin area
4. Check the .md file image path

Expected behavior Uploads should be saved as image: /uploads/logo.png, but instead they’re saved as …/…/…/uploads/logo (number of directory changes depending on where the page lives).

Applicable Versions:

• Netlify CMS version: “^2.9.8-beta.3”
• Git provider: Gitlab
• OS: MacOs

CMS configuration ` backend: name: gitlab repo: ******** auth_type: implicit # Required for implicit grant app_id: ********* api_root: ******** base_url: ******** auth_endpoint: oauth/authorize media_folder_relative: true media_folder: “static/uploads” public_folder: “/uploads” collections:

• name: navbar label: Navbar folder: src/markdown/widgets/navbar create: true fields:
  • {label: “Template Key”, name: “templateKey”, widget: “hidden”, default: “navbar-widget”}
  • {label: “Title”, name: “title”, widget: “string”, hint: “Please choose a unique name for the Navbar. The grey background will just be visible here, the regular navbar will be transparent”}
  • {label: Logo, name: logo, widget: object, fields: [{label: Image, name: image, widget: image}, {label: “Image Alt”, name: imageAlt, widget: image}, {label: Path, name: path, widget: string}, {label: Alt Text, name: altText, widget: string}]}
  • {label: Tabs, name: tabs, widget: list, fields: [{label: Label, name: label, widget: string}, {label: Path, name: path, widget: string}, {label: Offset, name: offset, widget: string}]}
  • {label: “Call to Action”, name: cta, widget: object, fields: [{label: Text, name: text, widget: string}, {label: Path, name: path, widget: string}]} `

[erezrokah]

Sorry to jump in late into this discussion, but there might be another solution. I’m using this Gatsby plugin to make sure the CMS paths play nice with Gatsby. I can confirm I’m getting optimized Gatsby images just by adding the plugin, which I believe was the point of the original issue in the Gatsby repo.

[s0]

Ah yes, I forgot that previews don’t work for this, and weren’t fixed in my original PR, I mention it at the end of the description here: https://github.com/netlify/netlify-cms/pull/2394.

Rather than calculate the published path for an image, I feel it would make more sense to embed the image directly from the backend (e.g. GitHub) like is done with the gallery picker (IIRC), rather than try and resolve the published location for the image.

This is slightly more robust, and allows for e.g. staging environments (master publishes to staging and is checked there before publishing a blog live), where the image may not yet be publicly accessible even if it’s in git.