Component/Schema Configuration

Here you can find out more about all options you have when configuring your content-types and components in Storyblok.

Config Tab

In the config tab of your component/content type you can find the general settings.

Options

Technical name

This is the technical name which will be included in the JSON content of your content entries under the attribute component. If you do not define a “Display name” the “Technical name” will be transformed to a human readable name in the editor interface. For example: “feature_area” will be transformed to “Feature Area”.

Be aware! Changing the technical name can take a few minutes to update all content items. Make sure your editors have saved their current work and exit the editor. If you use branches only the “Preview” branch will have the new component name until you deploy the other branches.

Display name

The value of this field will be shown for editors as component/content-type name. If this field is empty the “Technical name” will be shown.

Preview template

With this option you can define a template that gets rendered in the blocks field. The template language you can use here is based on Squirrelly.

To render the preview like above you can use following template.

<div>{{text}}</div>
<!-- ".image" is the field name -->
{{image(options.image.filename)/}} 

<!-- old image field -->
{{image(options.image)/}} 

All fields you have defined in your schema can be used with the following syntax: {{YOUR_FIELD_NAME}}. When using helpers like if() or image() the attributes are accessible via the options object.

Allowed HTML tags

• Tags: div, span, strong, ul, li, p
• Attributes: class

Styling

Preview templates can be styled with classes that are inside our index-latest.css, which uses UiKit V2:

<div class="uk-text-bold">{{item}}</div>

Linked Stories

If you linked another story inside your schema through a single or multiselect field, you can only use the story id in the preview template, but not the fields that are inside that linked story.

# possible
<div>{{linkedAuthor}}</div>

# not possible
<div>{{linkedAuthor.name}}</div>

Available helpers

image

{{image(options.your_attribute)/}}

if/else

{{if(options.your_attribute === 1)}}
Display this
{{#else}}
Display this
{{/if}}

each

{{each(options.somearray)}}
Display this
The current array element is {{@this}}
The current index is {{@index}}
{{/each}}

foreach

{{foreach(options.someobject)}}
This loops over each of an objects keys and values.
The value of the current child is {{@this}}
The current key is {{@key}}
{{/foreach}}

Screenshot or icon

This option lets you define a screenshot which gets shown when the user inserts a new component in the blocks field. This helps the user to better identify the component type.

Act as content type

Read more about content types.

Nestable

Every block in Storyblok can have child blocks. If you define a block as nestable, then the editor of the content can position that block in a nestable area.

Usually, root blocks like pages, articles and products aren’t defined as nestable, as they are designed to build the root of your content structure. Read more on “What is a root block?”.

Schema Tab

At the schema tab you can configure the fields of your content-type/component.

Field Options

Type

Defines the type of your field.

Translatable

Defines if the field can be translated using the field level translations feature. The languages needs to be defined in the space settings area.

Required

Defines if the field is mandatory. The validation happens when the user clicks the “Save” or “Publish” button.

Regex validation

Defines a regex validation for the field. The validation happens when the user clicks the “Save” or “Publish” button. It’s important to note that the format is JS RegEx.

/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g

The expression checks if there’s a special character (,.[]) in a string, returns true if there is and false if there’s none.

Description

Defines a description for the field to be shown below it.

Default value

Defines a value for the field. The default value only will be set if the field has not be defined yet.

Exclude from translation export

Defines if the field should be excluded in translation export.

Enable RTL (Right to left)

Defines if RTL should be enabled for this field.

Rich-text as default

Defines if the rich-text view in markdown fields should be enabled by default.

Section items

Defines a list of components to include in the group.

Custom type

Defines a custom field type plugin.

Source

Defines the source of option and multi-option fields:

• Self: A list of options you define only for that specific field (Use a “Datasource” if you use the list of options in multiple fields)
• Stories: A list of content entries to create relationships
• Datasource: A datasource you use globally
• External JSON: A JSON with following format: https://github.com/storyblok/default-datasources

Path to folder of stories

Defines a filter for stories (used in option and multi-option fields). In case you have a multi-language folder structure you can add the ‘{0}’ placeholder and the path will be adapted dynamically.

Examples:

• authors/
• {0}/categories/ (for multi-language folder structure)
• {0}/{1}/categories/ (for multi-language folder structure)

Internal datasource

Defines a datasources.

URL

Defines an external datasource JSON Url. The url must be CORS enabled.

Options (name/value)

Defines a list of options.

Force crop

Defines if force crop is enabled for images.

Keep original size

Defined if the original size should be kept and only the aspect ratio is used in force cropping the image. Example: Define width 16 and height 9 to let the user crop the image at the aspect ratio 16:9.

Width (px/ratio)

Defines the width in px or aspect ratio x if “Keep original size” is enabled.

Height (px/ratio)

Defines the height in px or aspect ratio y if “Keep original size” is enabled.

Default asset folder

Defines a default asset folder to store the uploaded image of that field.

Prepend https to url

Defines if https should be prepended to the url.

Restrict to set of components

Defines if only specific components should be allowed in the “Blocks” field.

Allowed maximum

Defines a maximum amount of blocks in the “Blocks” field.

Component allowlist

Defines a list of allowed components.

Disable time selection

Defines if the time selection should be disabled in the “Date/Time” field.

Maximum characters

Defines the maximum length of the input string.