Images are uploaded into wrong Media folder

franva · September 4, 2020, 1:47pm

This is my config.yml for Netlify CMS

backend:
  name: git-gateway
  branch: master
  repo: franva/askwinston

  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
publish_mode: editorial_workflow
local_backend: true

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    media_folder: static/img
    public_folder: /img
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text", required: false}
      - {label: "Featured Post", name: "featuredpost", widget: "boolean", required: false}
      - {label: "Featured Image", name: "featuredimage", widget: image, required: false}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    create: true
    files:
      - file: "src/pages/index.md"
        label: "Landing Page"
        name: "index"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "index-page"}
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Subheading, name: subheading, widget: string}
          - {label: Mainpitch, name: mainpitch, widget: object, fields: [{label: Description, name: description, widget: text}]}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}

As you can see that I have set the Media and Public folders to static/img and /img respectively for both root and collections level.

But when I upload a file from the admin blog editor, it still updates images to /root/src/pages/blog/static/img rather than the /root/static/img folder.

Barth · September 4, 2020, 4:21pm

@franva media_folder: /static/img should work.

franva · September 5, 2020, 2:16am

I ended up removing media and public folder configs under collections section and leave them to the root section.
It works, but it uploads all images to root/static/img folder.

Ideally, I’d like them to be uploaded to each individual blog article folder, the upload part works, but when referencing these images from blog/static/img on the Blog Editor, it always has breaking links.

I did try set media and public folders under collections section, you will be able to see the images on Preview panel, but once deployed/publish, the images on that blog article will break and points to a url which does not exist.

Barth · September 5, 2020, 1:20pm

I did try set media and public folders under collections section, you will be able to see the images on Preview panel, but once deployed/publish, the images on that blog article will break and points to a url which does not exist.

I think the issue here is the value of your public_folder. You can try leaving out the public_folder setting value to use the media_folder value.

media_folder: static/img

franva · September 5, 2020, 10:28pm

thanks @Barth
when you say leaving out public_folder, do you mean:

don’t have public_folder under collections

media_folder: static/img
public_folder: /img
collections:
- name: “blog”
  label: “Blog”
  media_folder: img
keep public_folder under root and also have public_folder under collections level, but leave it as a empty string like: ''

media_folder: static/img
public_folder: /img
collections:
- name: “blog”
  label: “Blog”
  media_folder: img
  public_folder: ‘’

Barth · September 5, 2020, 10:36pm

I mean this for the collection:

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    media_folder: static/img
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text", required: false}
      - {label: "Featured Post", name: "featuredpost", widget: "boolean", required: false}
      - {label: "Featured Image", name: "featuredimage", widget: image, required: false}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

the public_folder will be taken from the media_folder

franva · September 5, 2020, 10:46pm

thanks @Barth
and remove the media_folder and public_folder from root level?

Barth · September 5, 2020, 10:55pm

and remove the media_folder and public_folder from root level?

You can keep those as defaults.

franva · September 5, 2020, 11:11pm

Hi @Barth

With the modification, I am able to see the images are now uploaded under
blog/static/img folder

and here is how my config.yml looks:

once published:

you can see that the 2nd image which is the new image added after the modification, is broken and pointing to : static/img/fauna-logo-blue.png

This is still not what I want, because shifting images from root/static/img folder to root/pages/blog/static/img folder has same effect which is piling all images under one folder.

Is it possible to have a folder for each blog, let’s say /blog/test for a blog called test.And under that the test folder, we upload images to test/img?

Barth · September 5, 2020, 11:24pm

Use the path config Beta Features! | Netlify CMS | Open-Source Content Management System. It will allow you to save your files like so for example:

 blog
    test
      index.md
      image.png

franva · September 5, 2020, 11:36pm

thanks @Barth
it looks like the config that I’m looking for
I will give it a try now.

Meanwhile, I have one observation:

When using the global media_folder, we are able to re-use images uploaded for other blogs. But when setting the media_folder on collections level, I am not able to see those previously uploaded images for other blogs any more.

There is not a button for going back to the parent folder either.

Is this the case for now? Is Netlify aware of this issue and has a ticket working on it?

Barth · September 5, 2020, 11:41pm

Is this the case for now? Is Netlify aware of this issue and has a ticket working on it?

I think there is already an issue here Directory navigation in the media library · Issue #3240 · decaporg/decap-cms · GitHub.

franva · September 5, 2020, 11:55pm

hi @Barth

This is my current config.yml

The 3rd image is the newly added after the modification, still broken:

SOJ.png is the new image which is added under blog folder.

I guess the documentation is out of date and not correctly reflexes correct configuration anymore.

Barth · September 6, 2020, 12:20am

I guess the documentation is out of date and not correctly reflexes correct configuration anymore.

Please test the path config changes on new entries, not on existing ones.

franva · September 6, 2020, 12:28am

thanks @Barth

I deleted that test post and create a blog , unfortunately the image is still broken

config.yml remains the same.

Barth · September 6, 2020, 10:42am

I deleted that test post and create a blog , unfortunately the image is still broken

The path config works well from my end. Can you share your repo?

franva · September 7, 2020, 1:10am

thanks @Barth for confirming that.

I have public key and private key in my repo inside static/helpers.js which cannot be replaced by using dotenv. Thus I cannot open my repo.

other than that, I am willing to provide any code which could help to debug the problem.