Storyblok

DAM Storyblok App

Installation

Prerequisites

Step 1. Installation

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

Note that requesting an installation delegation can be done via our contact form or our support email hello@scaleflex.com, and finally using our regular support page.

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

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

Go to Block Library -> New Block
Enter any Technical Name you want, Select Nestable Block -> click "Add Block"
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"
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 )
Config Example

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

In any Content, type Edit Page
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

Add Assets

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

Reorder

Drag and drop to sort assets

Remove Asset

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

Remove all Assets

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

API Response Structure

Copy

[
  {
    "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

Copy

[
  {
    "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"
          }
        ]
      }
    }
  }
]

PreviousShopware NextStrapi (v4)

Last updated 2 months ago