Legacy Blok Preview Configuration

Warning: This is the old documentation for Squirrelly 7, please write your templates with the new syntax for Squirrelly 8.

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, you use the 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 using the blok ink: classes for specific text styling:

<div class="sb-typography__title">{{item}}</div>

Linked Stories

If you linked another story inside your schema through a single or multi-select field, you could only use the story id in the preview template, not the fields 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}}