Legacy Blok Preview Configuration

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

Section titled Preview template 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}}