Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

Assets Library

The Asset Library helps keep your images, videos, PDFs, etc. organized in a gallery format. Here, you will be able to provide alt text, a title or caption, tags, copyright date, and a source to the individual image. You can create folders to help organize your images as well.

hint:

This doc does not cover the Image Editor. To learn more about our Image Editor, please go to our Image Editor documentation.

hint:

For detailed information on the number of assets and maximum upload sizes available in Storyblok's different plans, please refer to the Storyblok Pricing page.

Accessing the Asset Library

To access the Asset Library, select the {1} Assets tab on the left-side navigation menu.

1

Uploading an Asset

To upload an asset, click on the {1} Upload Files button on the top-right of the screen. 

1
warn:

Please be aware of any asset type upload restrictions that may apply to you.

Adding Image Details

Select any asset in the library {1}.

1

A {1} full-page modal will appear with {2} details options on the right-hand side. 

1
2

Here, there are some features/details you can add to your asset: alt text, a title/caption, tags, make your asset private, add copyright information, select an expiration date for the asset, and add a source URL.

Features:

FeatureDescription
Alt textAlternative text; a description for screen readers or for when the asset doesn’t load
Title/CaptionAdd text to the bottom line of wherever the asset is displayed
TagsChoose a tag from the established keywords under your Tags category
Private AssetToggle this on or off to make your asset accessible via an access token
CopyrightAdd copyright information (company, year, etc.) to the asset
Expiration dateSet a date for the asset to be deleted
SourceIf the asset is externally sourced, you can add a link to the original URL

References

The {1} References tab displays where the asset is being used in your story {2}.

1
2

Activity

{1} A feature coming soon-- track your asset activity over time.

1

Making an Asset Private

Select any asset in the library {1}.

1

On the right-hand side, under {1} Private asset, click {2} the toggle.

1
2

This makes your asset only accessible via a token and unavailable to the public.

hint:

You can follow this tutorial on how to implement private assets!

Generating an Asset Token

To access your token, go to the  {1} Settings tab, then the {2} Access Tokens tab and choose {3} Asset. Finally, select the {4} Generate button to create a token.

1
2
3
4

Here is the generated Asset token {1}:

1

Creating Folders

Select the {1} All Folders dropdown menu

1

A {1} dropdown menu will appear. Select the {2} Plus (+) icon.

1
2

{1} Type in a name for the folder, then to save it, select the {2} Checkmark icon

1
2

Here is the newly created folder {1} as it lives in the All Folders list:

1

Translatable Assets Metadata

You can define custom metadata fields for your assets and then use the fields to fill in custom metadata. To do this, navigate to Settings {1} > Assets Library {2}. Next, navigate to Custom metadata fields {3}. Here, you can set custom fields for users to fill in when uploading an asset. You can also set any field as Required.

translatable-assets-metadata
1
2
3

Translatable Assets Metadata configuration screen

From the configuration screen, you can select Required {1} and Translatable {2} checkboxes.

configure-custom-metadata-field
1
2

Custom metadata field configuration screen

Upload assets in the Assets {1} > Upload files {2}.

upload-assets
1
2

Upload assets

Select the asset you uploaded, and see the Custom Metadata Field {1} (Description) is added. Along with the Custom Metadata Field, Title/Caption {2}, Alt text {3}, Copyright {4}, and Source metadata fields exist. To translate metadata, click Default {5} to change the language to fill out the localized metadata values.

custom-metadata-field-on-assets
1
2
3
4
5

Custom Metadata Field on the Assets

Toggle the translatable checkbox {1} and fill out the localized values for the metadata {2}.

localized-translatable-assets-metadata
1
2

Localized Translatable Assets Metadata

Go to one of the Stories you created. Add an Asset field to any of the components. Add an asset you previously uploaded and click Edit {1} to configure translatable metadata.

edit-translatable-assets-metadata
1

Edit icon to configure further Translatable Assets Metadata values

Switch the language and toggle translatable checkboxes {1}. You can modify translatable asset metadata on each story level. To sync values from the assets you already filled out, click Add missing custom metadata fields and values icon {2}. After that, localized metadata values are imported from the Assets {3}.

localized-translatable-assets-metadata
1
2
3

Localized Translatable Assets Metadata and how to sync values from the Assets

When you call the Management API to get this Story, you can see localized metadata, and the default metadata are stored in one asset. In comparison to the Field-Level Translation approach, the translatable asset metadata allows you to localize only metadata while keeping one common asset.

Example Management API call to fetch a Story
        
      "translatable_metadata": {
  "id": 12345678,
  "alt": "Default alt",
  "name": "",
  "focus": "",
  "title": "Default title",
  "source": "Default source",
  "filename": "https://a.storyblok.com/f/281180/2808x1872/91777016e6/daniel-storek-jm-qked1gmi-unsplash.jpeg",
  "copyright": "Default copyright",
  "fieldtype": "asset",
  "meta_data": {
    "alt": "Default alt",
    "title": "Default title",
    "source": "Default source",
    "copyright": "Default copyright",
    "Description": "Default description",
    "alt__i18n__ja": "日本語 Alt",
    "title__i18n__ja": "日本語タイトル",
    "source__i18n__ja": "日本語ソース",
    "copyright__i18n__ja": "日本語コピーライト",
    "Description__i18n__ja": "日本語の概要",
  },
  "is_private": false,
  "is_external_url": false
},
    

Translatable Assets Metadata example

Example Management API call to fetch a Story
        
      "field_type_translation": {
  "id": 87654321,
  "alt": "Default alt (field-level translation)",
  "name": "",
  "focus": "",
  "title": "Default title (field-level translation)",
  "source": "Default source (field-level translation)",
  "filename": "https://a.storyblok.com/f/281180/6900x4600/03adf538e0/eberhard-grossgasteiger-pj9-gb8dehe-unsplash.jpg",
  "copyright": "Default copyright (field-level translation)",
  "fieldtype": "asset",
  "meta_data": {
    "alt": "Default alt (field-level translation)",
    "title": "Default title (field-level translation)",
    "source": "Default source (field-level translation)",
    "copyright": "Default copyright (field-level translation)",
    "Description": "Default description (field-level translation)"
  },
  "is_private": false,
  "is_external_url": false
},
"field_type_translation__i18n__ja": {
  "id": 91011121,
  "alt": "日本語 Alt (field-level translation)",
  "name": "",
  "focus": "",
  "title": "日本語タイトル (field-level translation)",
  "source": "日本語ソース (field-level translation)",
  "filename": "https://a.storyblok.com/f/281180/4240x2832/4ca7a2fba9/jezael-melgoza-rjk8zx1_umg-unsplash.jpg",
  "copyright": "日本語コピーライト (field-level translation)",
  "fieldtype": "asset",
  "meta_data": {
    "alt": "日本語 Alt (field-level translation)",
    "title": "日本語タイトル (field-level translation)",
    "source": "日本語ソース (field-level translation)",
    "copyright": "日本語コピーライト (field-level translation)",
    "Description": "日本語の概要 (field-level translation)"
  },
  "is_private": false,
  "is_external_url": false
},
    

Field-Level Translation example