Storyblok

Scaleflex DAM Storyblok App

Installation

Prerequisites

  1. Register for a demo if you don't already have a Filerobot account.

  2. Sign up to Storyblok.

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:

  1. Send us the installation delegation request, including

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

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 "Filerobot" 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 Filerobot 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. Filerobot_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 Filerobot Hub and set up like below:

    * token = Token from Filerobot (aka project identification code),

    * secTemplate = Security template from Filerobot,

    * rootDir = Base directory (also in the security template configuration). * limit (optional) = number of files you can show when choose on Filerobot Asset * attributes (optional) = add more data on API Response Structure (ex: meta, tags)

Below are the 3 configuration steps illustrated:

User guide

  1. In any Content, type Edit Page

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

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

#ActionHow 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"
          }
        ]
      }
    }
  }
]

Last updated