Showing images specified via relative URLs in CMS Editor

dstaley · October 5, 2020, 8:42pm

I’m trying to integrate CMS with our blog content, which specifies images via URLs that are relative to the markdown file.

To demonstrate this, I’ve forked the Netlify+Gatsby starter here. You can see the modified blog post here. The image loads appropriately on the blog when viewed, but shows as an invalid image in the CMS editor.

The Editor is apparently looking for the image at the following URL:

https://serene-wright-0bf539.netlify.app/img/flavor_wheel.jpg

However, the image is fingerprinted and stored at this URL:

https://serene-wright-0bf539.netlify.app/static/19a6d5ab24bbc3b3531f11ecab349683/72e01/flavor_wheel.jpg

Is there some configuration setting I can change that will result in the image appearing correctly within the editor without giving up the nice fingerprinting/optimization that gatsby-remark-images provides?

erez · October 4, 2020, 6:29pm

Hi @dstaley and welcome to the community!

The CMS uses the media_folder configuration to locate media files in the repo:

github.com

dstaley/netlify-cms-relative-image/blob/ac278d1d8df31a1d373f52ffc4fe63d7640de407/static/admin/config.yml#L11


backend:
  name: git-gateway
  branch: master
  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}

and uses public_folder when outputting media files paths in the markdown:

github.com

dstaley/netlify-cms-relative-image/blob/ac278d1d8df31a1d373f52ffc4fe63d7640de407/static/admin/config.yml#L12


  name: git-gateway
  branch: master
  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}

Since the image in that post is not under static/img, but under src/pages/blog it will up as broken in the CMS.

See more here https://github.com/netlify/netlify-cms/issues/3671

I recommend using the configuration here:

to store media files relative to their content since that works best for Gatsby.