dstaley
September 25, 2020, 9:34pm
1
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:28pm
2
Hi @dstaley and welcome to the community!
The CMS uses the media_folder configuration to locate media files in the repo:
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:
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 docs: improve media_folder and public_folder docs · Issue #3671 · netlify/netlify-cms · GitHub
I recommend using the configuration here:
to store media files relative to their content since that works best for Gatsby.