Visual Experience Platform
Help CenterRelease NotesBlogWebsite
  • VXP - Visual Experience Platform
    • The VXP
      • Token
    • Settings
      • My Account
        • Profile
        • Support
      • Organisation
        • General Organisation Settings
        • Billing
          • Payment
          • Invoices
          • Plan
        • Users
          • Users
          • Roles
        • Teams
      • Project
        • Branding
        • Subscription
        • Analytics
          • Standard Dashboards
            • Multi tenants
            • User Dashboard
            • DAM Storage
            • Workflows Monitoring
            • Traffic Origin
            • Caching (Volumetry)
            • CDN performance
          • Custom Dashboard
        • Access
          • API keys
          • Security templates
          • OAuth2
  • Digital Asset Management (DAM)
    • Library
      • Assets
        • Asset Details window
          • Asset actions
            • Regional settings
            • Context menu ("..." button)
            • Add to My favorites (heart icon)
            • Edit media (image, video, etc)
              • Edit image
              • Edit video
              • Edit design template (coming soon)
            • Share
          • Asset information tabs
            • General
            • Metadata
            • Variations
            • Comments
            • Approvals
            • History
      • Folders
      • Collections
      • Labels
      • Products
      • My favorites
      • Help
      • Sharebox
      • Airbox
      • Search and Filters
        • Faceted Search
    • Plugins & Connectors
      • Plugins
        • Adobe Creative Cloud
        • Adobe Commerce (Magento)
        • Canva
        • Contentful
        • Contentstack
        • Directus
        • Drupal
        • Opencart
          • Opencart (v4)
        • Prestashop
        • Shopware
        • Storyblok
        • Strapi (v4)
        • Sylius
        • Uniform CMS
        • WordPress - VXP [Beta]
        • Wordpress
      • Connectors
        • Akeneo PIM
          • Akeneo Community PIM Connector
          • Akeneo Enterprise PIM App
        • Canva App
        • CI-Hub
        • Commercetools FaaS App
        • Hygraph app
        • Kontent.ai
        • OneTeg
        • Pabbly Connect
        • Prismic
        • Shopify / Shopify plus app
        • Zapier automation
    • Settings
      • Library
        • Components
        • Appearance
      • Metadata
        • Metadata Configuration
        • Assets
      • Tags
        • Configuration
        • Dictionary
      • Notifications
      • Automations
        • Post processing
        • Webhooks
        • Workflows
      • Storage
        • Providers
        • Upload
        • Video
        • Listing
        • Retrieval
        • Custom routing
  • Visual AI
    • Welcome
    • Visual AI
      • Images
        • Classification models
          • Auto-tagging
          • Brand detect
          • Dominant color extraction
          • Faces
            • Face analysis
            • Face clustering
          • Image quality
          • OCR
          • Number Plate recognition
          • Product type
          • Property classification
          • Scene Classification
          • Sport Classification
        • Generative AI models
          • Image-to-text
          • Plate blurring
          • Quality improvement (remove artifacts)
          • Remove background
          • Text-to-Image
        • Moderation models
          • Face count
          • NSFW - Not Safe For Work
          • Real estate authenticity
          • Watermark detection
      • Videos
        • Face detection
      • Search & find assets
        • Text Search
        • Similar Assets
  • Portals
    • Welcome
    • Creating a Portal
    • Editing a Portal
      • Pages
      • Sections
      • Design
      • Fonts
    • Managing a Portal
      • Settings
      • Access
      • Users
      • Labeling, Cloning, Archiving
    • Publishing a Portal
  • Dynamic Media Optimization (DMO)
    • Welcome
      • Responsive libraries
      • Native plugins
      • 360° view builder
      • Service status
    • Insights
      • Delivery
      • Optimization
      • Alerts
      • Logs
    • Transformations
      • Image optimization
        • Operations
          • Width and height
          • Prevent enlargement
          • Crop
            • Automatic Gravity Crop
            • Positionable Crop
            • Focal point Crop
            • Face Crop
            • Face hide
            • Aspect ratio crop
          • Fit
          • Cropfit
          • Bound
          • Boundmin
          • Cover
          • Device pixel ratio
          • Flip
          • Rotate
          • Trim
          • Rounded corners
        • Filters
          • Adjustment
            • Brightness
            • Contrast
            • Saturate
          • Color manipulation
            • Color overlay
            • Grayscale
            • Duotone
            • Sepia
            • Invert
          • Blur
          • Pixelate
          • Sharpen
        • Watermarking
          • Static watermark
          • Dynamic watermark
          • Text watermark
        • Image compression
          • Image formats
          • Optipress
      • Video optimization
        • Video API
          • Editing
            • Chapters
            • Combine
            • Trim
          • Optimizing
            • Convert
            • Compress
            • Transcode
        • On-the-fly-video optimization
      • Static content optimization
        • PDF to image
        • JS/CSS optimization
    • Invalidation
    • Settings
      • Asset Origin
        • AWS S3 or any other S3-compatible storage provider
        • Google Cloud storage (GCP)
        • Azure Blob storage
        • Own HTTP-based Storage
      • Images
        • Compression
        • Options
        • Watermark
      • Static content
      • Delivery
        • CNAME
        • URL format
        • Rules
        • Security
        • Caching
        • Default behaviors
  • Developers / Headless
    • Headless DAM
      • DAM APIs
        • API Authentication
        • API Reference
      • Command Line Interface (CLI)
      • Media Asset Widget(MAW)
        • Overview
        • Developer reference
        • V2 End-of-life
Powered by GitBook
LogoLogo

Quick links

  • Go to website
  • Legal Center

©2024 Scaleflex SAS

On this page
  • Installation
  • Prerequisites
  • Step 1: Install the extension via Marketplace or via NPM
  • Step 2: Active the Scaleflex DAM extension
  • Step 3: Show the extension on the left menu
  • Step 4: Fill in your configuration
  • How to use Scaleflex DAM field?
  • 1. Field Interface
  • Advanced Configuration Display
  • Using TinyMCE Editor with Scaleflex DAM
Export as PDF
  1. Digital Asset Management (DAM)
  2. Plugins & Connectors
  3. Plugins

Directus

Scaleflex DAM x Directus extension

PreviousContentstackNextDrupal

Last updated 4 months ago

Installation

Prerequisites

  • 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.

Advanced Configuration

  • 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.

How to use Scaleflex DAM field?

1. Field Interface

When create new field with DAM Assets please choose Scaleflex DAM

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.

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.

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
Register for a demo