feat: field based media/public folders #3208

erezrokah · 2020-02-06T16:26:54Z

Still requires some manual & automated tests, but will let you have a config like this:

publish_mode: editorial_workflow
media_folder: static/media
public_folder: /media
collections:
  - name: posts
    label: Posts
    label_singular: 'Post'
    folder: content/posts
    create: true
    media_folder: ''
    public_folder: ''
    fields:
      - label: Template
        name: template
        widget: hidden
        default: post
      - label: Title
        name: title
        widget: string
      - label: 'Cover Image'
        name: 'image'
        widget: 'image'
        required: false
        media_library:
          config:
            media_folder: '/{{media_folder}}/posts/images/widget/image'
            public_folder: '{{public_folder}}/posts/images/widget/image'
      - label: Publish Date
        name: date
        widget: datetime
      - label: Entry Image
        name: 'entryimage'
        widget: 'image'
        required: false
      - label: Body
        name: body
        widget: markdown
        media_library:
          config:
            media_folder: '/{{media_folder}}/posts/images/widget/body'
            public_folder: '{{public_folder}}/posts/images/widget/body'

Example PR: https://github.com/erezrokah/netlify-cms-reproductions/pull/74/files

Update

Fixes Remove double slashes from media_folder/public_folder #3204
Moved media folders to the same level as other fields configurations, e.g.

fields:
  - label: Template
    name: template
    widget: hidden
    default: post
  - label: Title
    name: title
    widget: string
  - label: Cover Image
    name: image
    widget: image
    required: false
    media_folder: '/{{media_folder}}/posts/images/widget/image'
    public_folder: '{{public_folder}}/posts/images/widget/image'

Another Update

Fixes #3199

erquhart · 2020-02-07T00:38:33Z

The approach in the OP looks right on. Two questions:

Sort of off topic, but are the blank string media_folder/public_folder on the collection necessary?
Can we place these directly on the field? I only ask because the field level media_library config model is to override the top level property of the same name, so these properties are expected to operate at that same level.

_{Sent with GitHawk}

barthc · 2020-02-08T20:17:35Z

packages/netlify-cms-core/src/backend.ts

@@ -90,6 +93,19 @@ const sortByScore = (a: fuzzy.FilterResult<EntryValue>, b: fuzzy.FilterResult<En
  return 0;
 };

+export const getFieldsNames = (fields: EntryField[], prefix = '') => {


I didn't see this function used anywhere.

You're right I need to remove it

barthc · 2020-02-08T20:19:09Z

packages/netlify-cms-core/src/reducers/collections.ts

@@ -106,6 +106,41 @@ const selectors = {
  },
 };

+const getFieldsMediaLibraryConfigs = (fields: EntryField[]) => {


using reduce would be cleaner here.

erezrokah · 2020-02-09T06:23:33Z

The approach in the OP looks right on. Two questions:

Sort of off topic, but are the blank string media_folder/public_folder on the collection necessary?

Can we place these directly on the field? I only ask because the field level media_library config model is to override the top level property of the same name, so these properties are expected to operate at that same level.

Sent with GitHawk

They are not necessary at the collection level, just wanted to show how a field without folder settings (entryimage in this case) inherits them.
We can, just will make the code a bit more convoluted in places like this one https://github.com/netlify/netlify-cms/blob/4aba6baf9a65f16bb56ad936414fdf66c980c78f/packages/netlify-cms-widget-file/src/withFileControl.js#L171 where we would need to pass in more parameters on the object.
Another thing we can do is have them at the field level and transform the config on load

jeremiahfallin · 2020-03-25T22:03:16Z

When I use a file widget with separate media folder, the correct directory pops up when i'm choosing the file, but after i choose the selected file the directory is not added to the path in the md file. Just the file name. I think I might be doing something wrong, but I'm not sure.

I have tried adding it like this:

      - file: "src/pages/board/index.md"
        label: "Board Page"
        name: "board"
        media_folder: '/static/board'

and also to the widget itself:

{ label: File, name: file, media_folder: '/static/board', widget: file },

and neither of those seems to work.

erezrokah · 2020-03-26T07:36:32Z

Thanks for reporting @jeremiahfallin, that looks like a bug with setting the default public_folder on fields and files.
Do you mind opening a new issue for that?
I think setting public_folder: '/static/board' explicitly will serve as a workaround.

jeremiahfallin · 2020-03-26T19:17:24Z

That worked for me. I opened issue #3483 and included the workaround. Thanks!

Gashanas · 2020-10-22T16:59:15Z

Hey guys, I am not sure if this is the right place to leave a comment, but I have noticed an issue regarding these changes.

It seems that getAsset() function not working properly with media_folder and public_folder added. When I am trying to display images in preview cms getAsset does not return the correct file path.

e.g. path of the image image="/assets/features/group-25-2x-min.jpg" after proccessing it through getAsset(image) it returns

{
field: undefined
fileObj: undefined
path: "static/assets/group-25-2x-min.jpg"
url: "/assets/features/group-25-2x-min.jpg"
}

When I am using image widget without media_folder and public_folder getAsset() returns something like this:

{
field: Pe {size: 3, _root: De, __ownerID: undefined, __hash: undefined, __altered: false}
fileObj: File {…}
path: "static/assets/group-25-2x-min.jpg"
url: "blob:http://localhost:8000/c1c8b6c8-0987-4879-a94b-d0649791b575"
}

Everything is working fine with published content, but during the creation I am not able to get correct path to display added image in preview because returned path /assets/features/group-25-2x-min.jpg does not exists it should be converted to blob.

erezrokah · 2020-10-22T17:05:37Z

Can you try calling getAsset with the field as the second argument?
See https://github.com/netlify/netlify-cms/blob/a690e467fa332cca47961f8e671abd53698dfadb/packages/netlify-cms-widget-image/src/ImagePreview.js#L14

If that doesn't work please open a new issue. Field based media/public folders are quite new and not documented properly yet

gtitov · 2020-11-01T19:48:15Z

Maybe I'm doing something wrong but I have a real struggle with this one.

I want my post to have one cover that is stored in assets so Hugo is able to resize it. Also my post have multiple images inside text (markdown widget) that I want to be stored in static so I can add these with the UI. Hope it's clear: cover in assets to resize, images inside text in static to add them without any code.

I came up with this config.yml:

backend:
  name: git-gateway
  branch: master
media_folder: 'static/img/blog'
public_folder: '/img/blog'
collections:
  - name: 'blog'
    label: 'Posts'
    folder: 'content/blog'
    create: true
    slug: '{{year}}{{month}}{{day}}{{hour}}{{minute}}{{second}}'
    editor:
      preview: true
    fields:
      - label: 'Title'
        name: 'title'
        widget: 'string'
      - label: 'Cover'
        name: 'image'
        widget: 'image'
        media_folder: '/assets/covers'
        public_folder: '/covers'
        allow_multiple: false
      - label: 'Post'
        name: 'body'
        widget: 'markdown'

Paths to files appears as I expect them to, like that:

---
title: Test
date: 2020-11-01T19:40:17.107Z
author: gman
image: /covers/lighthouse.jpg
---
Post body
![Sample](/img/blog/desert.jpg)

But the cover is stored in static/img/blog/lighthouse.jpg not in assets/covers/lighthouse.jpg.

So it looks like I can't set field based media folder... Is it even possible to do it as I described? Or I didn't understand docs right? Or I did something wrong?

Here is the repo if needed

erezrokah · 2020-11-02T07:51:33Z

Hi @gtitov can you please open a new issue with the information you shared here?

gtitov · 2020-11-02T11:09:19Z

Done!
#4529

barthc reviewed Feb 8, 2020

View reviewed changes

erezrokah force-pushed the feat/field_level_media_folder branch from f79d416 to 517cb06 Compare February 9, 2020 13:14

erezrokah changed the title ~~[WIP] feat: field based media/public folders~~ feat: field based media/public folders Feb 9, 2020

erezrokah added 15 commits February 9, 2020 17:52

feat: field based media/public folders

4641467

test: fix for node 10

b6e1ee2

refactor: code cleanup

fa80824

refactor: code cleanup

c7d7480

fix: bug fixes

4c1565c

fix: bug fixes

198356f

fix: bug fixes

de4165c

feat: move media folders config to field config level

3e51762

refactor: code cleanup

66b86bc

fix: pass media folder props to media library, fix svgs

f761428

test: fix tests

ab74adf

test: add unit tests

b5e045d

test: add more tests

37cdfb8

fix: handle double slashes

9abc522

feat: file collections per file media folders

d51357d

erezrokah force-pushed the feat/field_level_media_folder branch from 2e2644b to d51357d Compare February 9, 2020 17:15

erezrokah mentioned this pull request Feb 10, 2020

Collection level media_folder needs to be entry level for file collections #3199

Closed

erquhart approved these changes Feb 10, 2020

View reviewed changes

erquhart merged commit 97bc0c8 into master Feb 10, 2020

erquhart deleted the feat/field_level_media_folder branch February 10, 2020 16:05

erezrokah mentioned this pull request Feb 10, 2020

Separate Media Folder for File and Images Widget #2794

Closed

gcutrini mentioned this pull request Feb 13, 2020

Field level media_folder 🙈 #3201

Closed

jeremiahfallin mentioned this pull request Mar 26, 2020

Bug with adding custom media_folder. Directory not added to file location. #3483

Closed

gtitov mentioned this pull request Nov 2, 2020

Problem with field-specific media_folder #4529

Closed

vladdu pushed a commit to vladdu/netlify-cms that referenced this pull request Jan 26, 2021

feat: field based media/public folders (decaporg#3208)

eef043d

wittenbrock mentioned this pull request Mar 10, 2021

Using media_folder on an image or file widget does not override the global media_folder #5091

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: field based media/public folders #3208

feat: field based media/public folders #3208

erezrokah commented Feb 6, 2020 •

edited

Loading

erquhart commented Feb 7, 2020

barthc Feb 8, 2020

erezrokah Feb 9, 2020

barthc Feb 8, 2020

erezrokah commented Feb 9, 2020

jeremiahfallin commented Mar 25, 2020 •

edited

Loading

erezrokah commented Mar 26, 2020 •

edited

Loading

jeremiahfallin commented Mar 26, 2020

Gashanas commented Oct 22, 2020

erezrokah commented Oct 22, 2020

gtitov commented Nov 1, 2020

erezrokah commented Nov 2, 2020

gtitov commented Nov 2, 2020

feat: field based media/public folders #3208

feat: field based media/public folders #3208

Conversation

erezrokah commented Feb 6, 2020 • edited Loading

Update

Another Update

erquhart commented Feb 7, 2020

barthc Feb 8, 2020

Choose a reason for hiding this comment

erezrokah Feb 9, 2020

Choose a reason for hiding this comment

barthc Feb 8, 2020

Choose a reason for hiding this comment

erezrokah commented Feb 9, 2020

jeremiahfallin commented Mar 25, 2020 • edited Loading

erezrokah commented Mar 26, 2020 • edited Loading

jeremiahfallin commented Mar 26, 2020

Gashanas commented Oct 22, 2020

erezrokah commented Oct 22, 2020

gtitov commented Nov 1, 2020

erezrokah commented Nov 2, 2020

gtitov commented Nov 2, 2020

erezrokah commented Feb 6, 2020 •

edited

Loading

jeremiahfallin commented Mar 25, 2020 •

edited

Loading

erezrokah commented Mar 26, 2020 •

edited

Loading