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 (coming soon)
              • 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
      • Connectors
        • Akeneo 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
        • Featured components
        • Interface customization
      • Metadata
        • Metadata Configuration
        • Assets
      • Tags
        • Configuration
        • Dictionary
      • Notifications
      • Automations
        • Post processing
        • Webhooks
        • Workflows
      • Storage
        • Providers
        • Upload
        • Video
        • Listing
        • Download
        • 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
          • 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
        • Optimization
        • 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
  • User guide
  • API Response Structure
  • API Response Structure Have Add Attributes Option
Export as PDF
  1. Digital Asset Management (DAM)
  2. Plugins & Connectors
  3. Plugins

Storyblok

DAM Storyblok App

PreviousShopwareNextStrapi (v4)

Last updated 2 months ago

Installation

Prerequisites

  1. if you don't already have a DAM account.

  2. Sign up to Storyblok.

Step 1. Installation

You can find the Scaleflex DAM in the , clicking the Visit Website button will link to this page containing all instructions.

Note that requesting an installation delegation can be done via our or our support email , and finally using our regular .

Make sure you complete, in any case, each of the following steps fully:

  1. Send us the installation delegation request, including

    • Your Storyblok "Space ID" (find it in the settings, in General / Space)

    • Your preference of installation type ( Field Plugin, or App level -default- )

  2. Add (invite) our Plugins Installation team to your Space

    • Use register@scaleflex.com (you can remove this user once the installation is completed)

    • with "Admin" role (otherwise the installation is not possible)

Our support team will contact you back to confirm the installation date and make sure you have everything configured properly to start using the Scaleflex DAM plugin.

Once this is done, you will be able to find the new block in your "Block Library" under the name "DAM" and be ready to go!

Depending on your level of support and onboarding plan, a CSM can assist you for the next steps: setup and configuration.

Step 2. Setup & configuration

You have 3 required configuration items to take from the Asset hub: Token (the unique project or library identifier), Security Template (this will be used as the secret for authentication), Directory (where you want Storyblok's assets to be stored and retrieved from, usually a dedicated sub-directory; note that this field must be comprised under the directory limit of the Security Template you have selected) And there are optional fields: limit, attributes

You can add as many blocks containing the DAM field type as needed. There is no limit on the number of blocks you can include.

  1. Go to Block Library -> New Block

  2. Enter any Technical Name you want, Select Nestable Block -> click "Add Block"

  3. In the side modal "Edit [Technical Name]" that appeared, enter any name as Field (eg. DAM_Asset), then select the type of field as plugin -> click "Add"

  4. Click on the field just added (in the "General" section below), then scroll down to the Plugin Options, then choose "filerobot-storyblok" in the Custom Type drop-down. Add the 3 configuration keys you gathered from the DAM and set up like below:

    • token = Token from DAM (aka project identification code),

    • secTemplate = Security template from DAM,

    • rootDir = Base directory (also in the security template configuration).

    • limit (optional) = number of files you can show when choose on DAM Asset

    • attributes (optional) = add more data on API Response Structure (ex: meta, tags, owner),

    • limitType (optional) = File Type Filtering ( ex: image, video, audio, application, application/zip, application/x-zip-compressed, application/vnd.rar, application/x-rar-compressed )

    • forceFilters (optional) = The advanced search metadata filters ( Please contact us to show your use case so we can provide the correct Setting to adapt your requirement ) Example: You want to show only assets have expired_date metadata field greater or equal today you can use setting bellow: [{"key": "expired_date", "value": ["$CURRENT_DATE..", "EMPTY"]}]

Note: Show complete Metadata work if the token has permission. The list project configuration default shows the title and description.

Below are the 3 configuration steps illustrated:

New BlockNew Field TypeField Required SettingsField Optional Settings

Add New Block

User guide

  1. In any Content, type Edit Page

  2. Click Add Block, Choose the Block contain the DAM Field you want to add to the Page:

It is now possible to interact with your DAM library assets directly from Storyblok:

#
Action
How to

1

Add Assets

2

Reorder

Drag and drop to sort assets

3

Remove Asset

On each added Asset -> Click the Bin icon to remove one Item

4

Remove all Assets

To remove (delete) all Assets, click the red "Remove all assets" in the top right corner.

API Response Structure

[
  {
    "uuid": "2a9de85c-406a-5101-9ab5-7b6259250001",
    "name": "$R202RV2-AiiacoEg.jpg",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/%24R202RV2-AiiacoEg.jpg",
    "extension": "jpg",
    "source": "filerobot",
    "type": "image/jpeg"
  },
  {
    "uuid": "c83ca796-00e5-5c08-b87c-cd6ecee50000",
    "name": "012871.tif",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/012871.tif",
    "extension": "tif",
    "source": "filerobot",
    "type": "image/tiff"
  }
]

API Response Structure Have Add Attributes Option

[
  {
    "uuid": "2a9de85c-406a-5101-9ab5-7b6259250002_0",
    "name": "$R202RV2-AiiacoEg.jpg",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/%24R202RV2-AiiacoEg.jpg",
    "extension": "jpg",
    "source": "filerobot",
    "type": "image/jpeg",
    "attributes": {
      "meta": {
        "boolean": null,
        "date": "",
        "description": {
          "en": "neweded"
        },
        "malt_id": "",
        "multi_select": null,
        "number": "",
        "price": {
          "default": "12"
        },
        "product_id": {},
        "sales_tags": {},
        "select_one": null,
        "shouldbedeleted": "",
        "sku": "",
        "sport": "",
        "test": "",
        "test-multi-select": null,
        "test-price": {},
        "title": {
          "en": "testssssss"
        }
      },
      "tags": {}
    }
  },
  {
    "uuid": "c83ca796-00e5-5c08-b87c-cd6ecee50000_1",
    "name": "012871.tif",
    "cdn": "https://try.filerobot.com/Widget_demo_folder/012871.tif",
    "extension": "tif",
    "source": "filerobot",
    "type": "image/tiff",
    "attributes": {
      "meta": {
        "boolean": null,
        "date": null,
        "description": {
          "en": "s"
        },
        "malt_id": null,
        "multi_select": null,
        "number": null,
        "price": {
          "default": "2000"
        },
        "product_id": {
          "default": "HJUUIISS"
        },
        "sales_tags": {
          "default": [
            "best",
            "hot"
          ]
        },
        "select_one": null,
        "shouldbedeleted": null,
        "sku": "ddss-2",
        "sport": null,
        "test": null,
        "test-multi-select": null,
        "test-price": {},
        "title": {
          "en": "Ä‘"
        }
      },
      "tags": {
        "en": [
          {
            "label": "test",
            "sid": "#tgb84ea"
          },
          {
            "label": "tags",
            "sid": "#tgc4915"
          }
        ],
        "fr": [
          {
            "label": "~ test",
            "sid": "#tgb84ea"
          },
          {
            "label": "~ tags",
            "sid": "#tgc4915"
          }
        ],
        "ru": [
          {
            "label": "~ test",
            "sid": "#tgb84ea"
          },
          {
            "label": "~ tags",
            "sid": "#tgc4915"
          }
        ]
      }
    }
  }
]

1/ Click Add Assets 2/ Asset picker modal: Choose any asset(s) you want to insert 3/ On top of the modal: Click Insert 4/ Result

Register for a demo
Storyblok Marketplace
contact form
hello@scaleflex.com
support page
Example Config