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
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.
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.