feat: bundle assets with content (#2958)
* fix(media_folder_relative): use collection name in unpublished entry * refactor: pass arguments as object to AssetProxy ctor * feat: support media folders per collection * feat: resolve media files path based on entry path * fix: asset public path resolving * refactor: introduce typescript for AssetProxy * refactor: code cleanup * refactor(asset-proxy): add tests,switch to typescript,extract arguments * refactor: typescript for editorialWorkflow * refactor: add typescript for media library actions * refactor: fix type error on map set * refactor: move locale selector into reducer * refactor: add typescript for entries actions * refactor: remove duplication between asset store and media lib * feat: load assets from backend using API * refactor(github): add typescript, cache media files * fix: don't load media URL if already loaded * feat: add media folder config to collection * fix: load assets from API when not in UI state * feat: load entry media files when opening media library * fix: editorial workflow draft media files bug fixes * test(unit): fix unit tests * fix: editor control losing focus * style: add eslint object-shorthand rule * test(cypress): re-record mock data * fix: fix non github backends, large media * test: uncomment only in tests * fix(backend-test): add missing displayURL property * test(e2e): add media library tests * test(e2e): enable visual testing * test(e2e): add github backend media library tests * test(e2e): add git-gateway large media tests * chore: post rebase fixes * test: fix tests * test: fix tests * test(cypress): fix tests * docs: add media_folder docs * test(e2e): add media library delete test * test(e2e): try and fix image comparison on CI * ci: reduce test machines from 9 to 8 * test: add reducers and selectors unit tests * test(e2e): disable visual regression testing for now * test: add getAsset unit tests * refactor: use Asset class component instead of hooks * build: don't inline source maps * test: add more media path tests
This commit is contained in:
Erez Rokah
committed by
Shawn Erquhart
Shawn Erquhart
parent
7e4d4c1cc4
commit
2b41d8a838
@ -35,14 +35,6 @@ At the same time, any contributors who _do_ have write access to the repository
|
||||
|
||||
More details and setup instructions can be found on [the Open Authoring docs page](/docs/open-authoring).
|
||||
|
||||
## Relative Image Paths
|
||||
|
||||
Image paths have always been absolute from a single media library directory defined in the config. As of Netlify CMS 2.9.8-beta.2, relative paths can be used - this especially useful for SSG's like Gatsby, which generally expect relative paths.
|
||||
|
||||
### Using relative paths
|
||||
|
||||
To use relative image paths, set `media_folder_relative: true` in the root of your CMS config. That's it!
|
||||
|
||||
## Folder Collections Path
|
||||
|
||||
By default the CMS stores folder collection content under the folder specified in the collection setting.
|
||||
@ -53,6 +45,60 @@ You can now specify a `path` template (similar to the `slug` template) to contro
|
||||
|
||||
This allows saving content in subfolders, e.g. configuring `path: '{{year}}/{{slug}}'` will save the content under `2019/post-title.md`.
|
||||
|
||||
## Folder Collections Media Folder
|
||||
|
||||
By default the CMS stores media files for all collections under a global `media_folder` directory as specified in the configuration.
|
||||
|
||||
When using the global `media_folder` directory any entry field that points to a media file will use the absolute path to the published file as designated by the `public_folder` configuration.
|
||||
|
||||
For example configuring:
|
||||
|
||||
```yaml
|
||||
media_folder: static/media
|
||||
public_folder: /media
|
||||
```
|
||||
|
||||
And saving an entry with an image named `image.png` will result in the image being saved under `static/media/image.png` and relevant entry fields populated with the value of `/media/image.png`.
|
||||
|
||||
Some static site generators (e.g. Gatsby) work best when using relative image paths.
|
||||
|
||||
This can now be achieved using a per collection `media_folder` configuration which specifies a relative media folder for the collection.
|
||||
|
||||
For example, the following configuration will result in media files being saved in the same directory as the entry and the image field being populated with the relative path to the image.
|
||||
|
||||
```yaml
|
||||
media_folder: static/media
|
||||
public_folder: /media
|
||||
collections:
|
||||
- name: posts
|
||||
label: Posts
|
||||
label_singular: 'Post'
|
||||
folder: content/posts
|
||||
path: '{{slug}}/index'
|
||||
media_folder: ''
|
||||
fields:
|
||||
- label: Title
|
||||
name: title
|
||||
widget: string
|
||||
- label: 'Cover Image'
|
||||
name: 'image'
|
||||
widget: 'image'
|
||||
```
|
||||
|
||||
More specifically, saving a entry with a title of `example post` with an image named `image.png` will result in a directory structure of:
|
||||
|
||||
```
|
||||
content
|
||||
posts
|
||||
example-post
|
||||
index.md
|
||||
image.png
|
||||
```
|
||||
|
||||
And for the image field being populated with a value of `image.png`.
|
||||
|
||||
**Note: When specifying a `path` on a folder collection `media_folder` defaults to an empty string.**
|
||||
|
||||
## List Widget: Variable Types
|
||||
|
||||
Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Netlify CMS.
|
||||
|
||||
Reference in New Issue
Block a user