> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/digital-asset-management-dam/plugins-and-connectors/plugins/directus.md).
# Directus
Scaleflex DAM x Directus extension
## Installation
### Prerequisites
* [Register for a demo](https://www.scaleflex.com/en/request-a-demo) if you don't already have a Scaleflex DAM account.
* Need to add a config CONTENT SECURITY POLICY to your **.env** file
```
CONTENT_SECURITY_POLICY_USE_DEFAULTS: true
CONTENT_SECURITY_POLICY_DIRECTIVES__SCRIPT_SRC: "'self','unsafe-eval',*.scaleflex.com,cdn.tiny.cloud"
CONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC: "'self',data:,blob:,https://raw.githubusercontent.com,https://avatars.githubusercontent.com,*.filerobot.com,*.tinymce.com"
CONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC: "'self', *.filerobot.com"
```
### Step 1: Install the extension via Marketplace or via NPM
**Marketplace:**
**NPM Install:**
```
npm i @plugins_sfx/directus-extension-scaleflex-dam
```
### Step 2: Active the Scaleflex DAM extension
Click on **"Settings"** on the left menu and after that click **"Extensions"** on the sub-menu.
### Step 3: Show the extension on the left menu
Click **"Settings"** on the left menu and then click **"Settings"** on the sub-menu.
Scroll to block **Modules** and check two items **"Scaleflex DAM Settings"** and **"Scaleflex DAM"**
### Step 4: Fill in your configuration
* **Token:** Enter your Scaleflex DAM token here (eg: abcdefgh).
* **Security Template:** To load the Scaleflex DAM Widget, you must create a Security Template in your Scaleflex DAM Hub.
* **Root directory:** The directory in your Scaleflex DAM account, where the files will be stored.
* **TinyMCE Key:** API key required for TinyMCE when using it with DAM, Here’s a guide on how to get the key: [How to get tinymce cloud up in less than 5 minute](https://www.tiny.cloud/blog/how-to-get-tinymce-cloud-up-in-less-than-5-minutes/)
**Advanced Configuration**
* **CNAME:** Enter the CNAME as configured in your Scaleflex DAM Hub interface, once validated and the SSL certificate accepted. (Or leave blank if none). **Note:** To use the CNAME, you need to add your domain to the environment variable `CONTENT_SECURITY_POLICY_DIRECTIVES__IMG_SRC` and `CONTENT_SECURITY_POLICY_DIRECTIVES__MEDIA_SRC` in your Directus instance.
* **Example value**: assets.yourdomain.com
* **Limit:** The maximum number of files that can be added to a single field, default: 0 (unlimited).
* **Attributes:** Attribute from Scaleflex DAM asset that you want to include in the Client response.
* **Limit Type:** File types are limited when using the Widget.
## How to use the Scaleflex DAM field?
### 1. Field Interface
{% tabs %}
{% tab title="1. Field interface" %}
When create new field with DAM Assets please choose Scaleflex DAM
{% endtab %}
{% tab title="2. Configuration" %}
There are some configurations:
Please aware that these configuration will override default configuration in Setting Page.
| Config | Explain | Example |
| -------------- | ---------------------------------------------------------------------------------------- | ------- |
| **Limit** | The maximum number of files that can be added to a single field, default: 0 (unlimited). | |
| **Attributes** | Attribute from Scaleflex DAM asset that you want to include in Client response. | |
| **Limit Type** | File types are limited when using Widget. | |
| {% endtab %} | | |
{% tab title="3. Display" %}
{% endtab %}
{% endtabs %}
**1/** Create a new field **"Scaleflex DAM"**
**2/** Select your display type
On the list fields, select the new field just created. On the tab **"Display"**, choose **"DAM Assets"**.
**3/** Go to your content Model and you will see the new field just created. Click on **"Browse Assets"** to select the assets in **Scaleflex DAM**
The result displayed after adding the assets
You can modify the image by clicking on **"Show variants"** to resize or crop the image.
In the list of items
## Advanced Configuration Display
You can set the limit asset showing in the list of items.
In the **Field Settings**, click on the tab **"Display"** and choose **DAM Assets**. Input the limit items you want to show in the list.
And the last thing, you can configure your variants asset in the tab **"Interface"**. For example:
```
{
"variants": [
{
"code": "desktop",
"name": "Desktop",
"preset": {
"width": "200",
"height": "400"
}
},
{
"code": "tablet",
"name": "Tablet",
"preset": {
"width": "100",
"height": "200"
}
}
]
}
```
## Using TinyMCE Editor with Scaleflex DAM
**1/** Create a new field **"WYSIWYG with Scaleflex DAM"**
**2/** Using the editor, click on the button "DAM" to add the asset to your content.
Support image, video, and audio.
