Populating the preview with mock data
Mocking data is an important tool in theme development. Mock data provides your development environment with simulated real-life data (such as names, dates, text, and images) so you can evaluate your templates' layout and styling.
Data files come with helpers that generate random mock data, saving you the time of creating your own or connecting to a back end to inject data into the template. The randomization also tests your templates' robustness, allowing for evaluations with longer and shorter text strings and larger or smaller images.
Value helpers
Value helpers provide mock data in the theme preview. For example, suppose you have a template with the following markup:
{{#with "reporter"}} <div class="reporter"> <p>{{this}}</p> </div> {{/with}}
You can use a value helper in the data file to generate a random name.
{ "_template": "path/to/template.hbs", "reporter": "{{name}} }
At runtime, Brightspot evaluates the helper and generates the following HTML:
<div class="Article-reporter"> <p>Alfalfa Mail</p> </div>
The following sections describe the available value helpers.
date
Generates a random date.
Syntax
Form | Result |
---|---|
| Returns date as July 4, 1776 |
| Returns date as Tue Jul 04 1776 07:31:28 GMT-0400 (EDT). |
| Returns date as 7/4/1776. |
| Returns date as 1776-7-4. |
Example
{ "dateBorn": "{{date('iso')}}" }
hexColor
Generates a random hex color.
Syntax
Form | Result |
---|---|
| Returns a random RGB color in lower-case hexadecimal, such as |
| Returns the lower-case hexadecimal color corresponding to the provided luminosity (0 ≤ luminosity ≤ 100). |
Example
{ "textColor": "{{hexColor(45)}}" }
html
Renders value as HTML rather than a string literal.
Syntax
Form | Result |
---|---|
| Returns text formatted by HTML tags, such as |
Example
{ "response" : "{{html('<strong>Yay!</strong> That action was a complete success.')}}" }
image
Returns the URL for use in an HTML <img src="url">
tag.
Syntax
Form | Result |
---|---|
| Returns the path to a mock image with the passed width and height. Brightspot stores the mock image in |
Example
{ "headShot": "{{image(100, 500)}}" }
You implement this value helper in the template as follows:
<img src="{{headShot}}" >
name
Generates a random name.
Syntax
Form | Result |
---|---|
| Returns a mock first and last name. |
Example
{ "authorName": "{{name}}" }
number
Generates a random number.
Syntax
Form | Result |
---|---|
| Returns the passed value. |
| Returns a random number between lower and upper. |
All arguments and returned values are integers.
Example
{ "age": "{{number([1,100])}}" }
paragraphs
Generates mock paragraphs.
Syntax
Form | Result |
---|---|
| Returns the passed number of paragraphs, each containing the passed number of sentences. Each sentence contains the passed number of words. Some words may be a two-letter name. |
Example
The following snippet generates three HTML <p>
tags with four sentences in each. Each sentence has five random words.
{ "articleBody": "{{paragraphs(3,4,5)}}" }
Because this helper provides the <p>
tags, you don't need to include them in the template.
sentences
Generates mock sentences.
Syntax
Form | Result |
---|---|
| Returns the passed number of sentences, each containing the passed number of words. Some words may be a two-letter name. |
Example
The following snippet generates three sentences with seven words each.
{ "byLine": "{{sentences(3,7)}}" }
var
Returns the value of a variable defined in the vars object in your theme's _config.json
file.
Syntax
Form | Result |
---|---|
| Returns the value for the passed |
This value helper is available for use within a data file only; you cannot use it in a template.
Example
Suppose you have a file _config.json
with the following vars
object:
{ "vars": { "color": "blue" } }
You can retrieve the color using var
.
{ "headline": "The sky is {{var('color')}} today." }
words
Generates mock words. Some words may be a two-letter name.
Syntax
Form | Result |
---|---|
| Returns the passed number of words. |
| Returns a random number of words between |
Example
The following snippet generates 10 words.
{ "headline": "{{words(10)}}" }