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.
Section titled Limits Limits
The table below outlines our Assets limits for our different plans:
| Feature | Community | Entry | Business | Enterprise | Enterprise Plus |
|---|---|---|---|---|---|
| Number of Assets | 2500 | 4000 | 10,000 | Unlimited | Unlimited |
Section titled Accessing the Asset Library Accessing the Asset Library
To access the Asset Library, select the {1} Assets tab on the left-side navigation menu.
)
Section titled Uploading an Asset Uploading an Asset
To upload an asset, click on the {1} Upload Files button on the top-right of the screen.
Please be aware of any asset type upload restrictions that may apply to you.
Section titled Adding Image Details Adding Image Details
Select any asset in the library {1}.
A {1} full-page modal will appear with {2} details options on the right-hand side.
)
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.
Section titled Features: Features:
| 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 |
Section titled References References
The {1} References tab displays where the asset is being used in your story {2}.
)
Section titled Activity Activity
{1} A feature coming soon-- track your asset activity over time.
)
Section titled Making an Asset Private Making an Asset Private
Select any asset in the library {1}.
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!
Section titled Generating an Asset Token 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.
)
Here is the generated Asset token {1}:
)
Section titled Creating Folders Creating Folders
Select the {1} All Folders dropdown menu
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:
)
Section titled Translatable Assets Metadata 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