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.
This doc does not cover the Image Editor. To learn more about our Image Editor, please go to our Image Editor documentation.
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.
)
Please be aware of any asset type upload restrictions that may apply to you.
A {1} full-page modal will appear with {2} details options on the right-hand side.
)
| Feature | Description |
|---|---|
| Alt text | Alternative text; a description for screen readers or for when the asset doesn’t load |
| Title/Caption | Add text to the bottom line of wherever the asset is displayed |
| Tags | Choose a tag from the established keywords under your Tags category |
| Private Asset | Toggle this on or off to make your asset accessible via an access token |
| Copyright | Add copyright information (company, year, etc.) to the asset |
| Expiration date | Set a date for the asset to be deleted |
| Source | If the asset is externally sourced, you can add a link to the original URL |
)
)
On the right-hand side, under {1} Private asset, click {2} the toggle.
This makes your asset only accessible via a token and unavailable to the public.
You can follow this tutorial on how to implement private assets!
)
Here is the generated Asset token {1}:
)
A {1} dropdown menu will appear. Select the {2} Plus (+) icon.
)
{1} Type in a name for the folder, then to save it, select the {2} Checkmark icon
)
Here is the newly created folder {1} as it lives in the All Folders list:
)
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 configuration screen
From the configuration screen, you can select Required {1} and Translatable {2} checkboxes.
)
Custom metadata field configuration screen
Upload assets in the Assets {1} > Upload files {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 the Assets
Toggle the translatable checkbox {1} and fill out the localized values for the metadata {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 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 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.
"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
"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