gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update Media “uploadcare” (#3371)

Browse Source
This commit is contained in:
Roman Sedykh 2020-03-04 13:06:38 +07:00 committed by GitHub
parent d777a5cb18
commit 5e6e2ad205
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
website/content/docs/uploadcare.md
View File

@ -3,24 +3,15 @@ title: Uploadcare
group: media group: media
weight: 10 weight: 10
--- ---
Uploadcare is a sleek service that allows you to upload files without worrying about maintaining a growing collection - more of an asset store than a library. Just upload when you need Uploadcare is a sleek service that allows you to upload files without worrying about maintaining a growing collection — more of an asset store than a library. Just upload when you need to, and the files are hosted on their CDN. They provide image processing controls from simple cropping and rotation to filters and face detection, and a lot more. You can check out Uploadcare's full feature set on their [website](https://uploadcare.com/).
to, and the files are hosted on their CDN. They provide image processing controls from simple
cropping and rotation to filters and face detection, and a lot more. You can check out Uploadcare's
full feature set on their [website](https://uploadcare.com/).
The Uploadcare media library integration for Netlify CMS allows you to use Uploadcare as your media handler within the CMS itself. It's available by default The Uploadcare media library integration for Netlify CMS allows you to use Uploadcare as your media handler within the CMS itself. It's available by default as of our 2.1.0 release, and works in tandem with the existing file and image widgets, so using it only requires creating an Uploadcare account and updating your Netlify CMS configuration.
as of our 2.1.0 release, and works in tandem with the existing file and image widgets, so using it
only requires creating an Uploadcare account and updating your Netlify CMS configuration.
**Please make sure that Netlify CMS is updated to 2.1.0 or greater before proceeding.** **Please make sure that Netlify CMS is updated to 2.1.0 or greater before proceeding.**
## Creating an Uploadcare Account ## Creating an Uploadcare Account
You can [sign up](https://uploadcare.com/accounts/signup/) for a free Uploadcare account to get You can [sign up](https://uploadcare.com/accounts/signup/) for a free Uploadcare account to get started. Once you've signed up, go to your dashboard, select a project, and then select "API keys" from the menu on the left. The public key on the API keys page will be needed in your Netlify CMS configuration. For more info on getting your API key, visit their [walkthrough](https://uploadcare.com/docs/keys/).
started. Once you've signed up, go to your dashboard, select a project, and then select "API keys"
from the menu on the left. The public key on the API keys page will be needed in your Netlify CMS
configuration. For more info on getting your API key, visit their
[walkthrough](https://uploadcare.com/docs/keys/).
## Updating Netlify CMS Configuration ## Updating Netlify CMS Configuration
@ -28,8 +19,7 @@ The next and final step is updating your Netlify CMS configuration file:
1. Add a `media_library` property at the same level as `media_folder`, with an object as it's value. 1. Add a `media_library` property at the same level as `media_folder`, with an object as it's value.
2. In the `media_library` object, add the name of the media player under `name`. 2. In the `media_library` object, add the name of the media player under `name`.
3. Add a `config` object under name with a `publicKey` property with your Uploadcare public key as 3. Add a `config` object under name with a `publicKey` property with your Uploadcare public key as it's value.
it's value.
Your `config.yml` should now include something like this (except with a real API key): Your `config.yml` should now include something like this (except with a real API key):
@ -37,37 +27,26 @@ Your `config.yml` should now include something like this (except with a real API
media_library: media_library:
name: uploadcare name: uploadcare
config: config:
publicKey: demopublickey publicKey: YOUR_UPLOADCARE_PUBLIC_KEY
``` ```
Once you've finished updating your Netlify CMS configuration, the Uploadcare widget will appear when Once you've finished updating your Netlify CMS configuration, the Uploadcare widget will appear when using the image or file widgets.
using the image or file widgets.
**Note:** The Netlify CMS media library extensions for Uploadcare are not included in `netlify-cms-app`. If you're using `netlify-cms-app`, you'll need to [register the media libraries yourself](https://www.netlifycms.org/blog/2019/07/netlify-cms-gatsby-plugin-4-0-0#using-media-libraries-with-netlify-cms-app). **Note:** The Netlify CMS media library extensions for Uploadcare are not included in `netlify-cms-app`. If you're using `netlify-cms-app`, you'll need to [register the media libraries yourself](https://www.netlifycms.org/blog/2019/07/netlify-cms-gatsby-plugin-4-0-0#using-media-libraries-with-netlify-cms-app).
## Configuring the Uploadcare Widget ## Configuring the Uploadcare Widget
The Uploadcare widget can be configured with settings that are outlined [in their The Uploadcare widget can be configured with settings that are outlined [in their docs](https://uploadcare.com/docs/file_uploads/widget/options/). The widget itself accepts configuration through global variables and data properties on HTML elements, but with Netlify CMS you can pass configuration options directly through your `config.yml`.
docs](https://uploadcare.com/docs/file_uploads/widget/options/). The widget itself accepts configuration
through global variables and data properties on HTML elements, but with Netlify CMS you can pass
configuration options directly through your `config.yml`.
**Note:** all default values described in Uploadcare's documentation also apply in the Netlify CMS **Note:** all default values described in Uploadcare's documentation also apply in the Netlify CMS integration, except for `previewStep`, which is set to `true`. This was done because the preview step provides helpful information like upload status, and provides access to image editing controls. This option can be disabled through the configuration options below.
integration, except for `previewStep`, which is set to `true`. This was done because the preview
step provides helpful information like upload status, and provides access to image editing controls.
This option can be disabled through the configuration options below.
### Global configuration ### Global configuration
Global configuration, which is meant to affect the Uploadcare widget at all times, can be provided Global configuration, which is meant to affect the Uploadcare widget at all times, can be provided as seen above, under the primary `media_library` property. Settings applied here will affect every instance of the Uploadcare widget.
as seen above, under the primary `media_library` property. Settings applied here will affect every
instance of the Uploadcare widget.
## Field configuration ## Field configuration
Configuration can also be provided for individual fields that use the media library. The structure Configuration can also be provided for individual fields that use the media library. The structure is very similar to the global configuration, except the settings are added to an individual `field`. For example:
is very similar to the global configuration, except the settings are added to an individual `field`.
For example:
```yaml ```yaml
... ...
@ -85,19 +64,14 @@ For example:
There are several settings that control the behavior of integration with the widget. There are several settings that control the behavior of integration with the widget.
* `autoFilename` (`boolean`) - specify whether to add a filename to the end of the url. * `autoFilename` (`boolean`) - specify whether to add a filename to the end of the url. Example: `http://ucarecdn.com/:uuid/filename.png`
Example: `http://ucarecdn.com/:uuid/filename.png` * `defaultOperations` (`string`) - specify a string added at the end of the url. This could be useful to apply a set of CDN operations to each image, for example resizing or compression. All the possible operations are listed [here](https://uploadcare.com/docs/api_reference/cdn/).
* `defaultOperations` (`string`) - specify a string added at the end of the url.
This could be useful to apply a set of CDN operations to each image,
for example resizing or compression. All the possible operations are listed
[here](https://uploadcare.com/docs/api_reference/cdn/).
```yaml ```yaml
media_library: media_library:
name: uploadcare name: uploadcare
config: config:
publicKey: demopublickey publicKey: YOUR_UPLOADCARE_PUBLIC_KEY
settings: settings:
autoFilename: true autoFilename: true
defaultOperations: '/resize/800x600/' defaultOperations: '/resize/800x600/'