First, JSON Template is not JSON

Second, if you have no idea what JSON is or what it looks like, check out this page.

Sections & Repeated Sections

Sections do most of the work in JSON Template. There are two important things you need to know about sections and repeated sections:

1. The content inside a section will only display if the section exists
2. Sections define scope, meaning they set the root for any data tags added inside them (more detail).

Sections

{.section item} If this section exists, display this {.end}

Repeated Sections

{.repeated section items}
  If there are any items, repeat this info for each item
{.end}

Alternating Sections

{.repeated section items}
  This stuff shows for each item.
{.alternates with}
  ------ *show this dashed line in between each item*
{.end}

Or statements

Can be used within sections and repeated sections. Used to display something if the condition of the section/repeated section is not met...e.g. if the section does not exist:

{.section item}
  Item exists!
{.or}
  Item does not exist :(
{.end}

Data Tags

Used to inject data from the JSON into your file.

The following example will inject the title data (in this case a string of text):

{title}

You can also dig down into the JSON structure using dot notation:

{item.author.displayName}

Index reference (@)

The '@' carries a reference to the item you are scoped within - same as 'this' in JavaScript. This is commonly used for displaying an html tag only if the item exists.

Take the following statement:

<div class="title">{title}</div>

If {title} did not exist, the div structure would still be written to the html as an empty div:

<div class="title"></div>

To prevent this, the statement can be written like this:

{.section title}<div>{@}</div>{.end}

This way, if there is no title, nothing is written to the html.

Thumbnail Images

Many collection post types have an associated main image. These images are tied to the post via the post url, so you need to access it in kind of a funny way:

{fullUrl}?format=750w

Every thumbnail image is available in multiple widths:

original, 1500w, 1000w, 750w, 500w, 300w, 100w

There is also a special test for whether a post has a main image specified, so that you will not end up with an empty <img> tag if there is no main image uploaded for a particular post:

{.main-image?}{.end}

Example use:

{.main-image?}<img src="{fullUrl}?format=750w" />{.end}

If your template relies on a main image to maintain the style of your post display, you can create a fall-back by using the {.or} statement:

{.main-image?}
  <img src="{fullUrl}?format=750w" />
{.or}
  <img src="[fallback-img-URL]" />
{.end}

Pluralize

Adds an "s" to the word if the value is > 1

You have {num} message{num|pluralize}.

Adds "es" to the word if the value is > 1

They suffered {num} loss{num|pluralize es}.

Facilitates subject-verb agreement

There {num|pluralize is are} {num} song{num|pluralize}.

Custom Pluralizer (first value assigned if 1, second if > 1)

{num-people|pluralize/It depends/They depend} on {num-things} thing{num-things|pluralize}.

Advanced pluralization

{.repeated section num}

  {.plural?}
    There are {@} people here.
  {.or singular?}
    There is one person here.
  {.or}
    There is nobody here.
  {.end}

{.end}

Formatters

Date/Time Formatters

Format a date in line with YUI date formatting syntax:

{addedOn|date %A, %B %d}

Timesince Date formatting (twitter-style):

{addedOn|timesince}

String Formatters

html – Escapes html tags (<, >, &)

{[string]|html}

htmltag – Escapes html tags and quotes (<, >, &, ")

{[string]|htmltag}

slugify – Converts to lowercase, removes non-word characters (alphanumerics and underscores) and converts spaces to hyphens.

{[string]|slugify}

smartypants – translates plain ASCII punctuation characters into “smart” typographic punctuation HTML entities (source: http://daringfireball.net/projects/smartypants/)

{[string]|smartypants}

Predicates

These are a series of Squarespace-specific additions to JSON Template... they are a list of tests to limit code to specific situations.

All predicates work like this:

{.predicate-name?}
  code if the predicate test returns true
{.or}
  code if it the test is not true
{.end}

Commonly Used Predicates

Does this item (or collection) have a thumbnail image set?

{.main-image?}

Does this item have an excerpt set?

{.excerpt?}

Are comments on for this item?

{.comments?}

Are Disqus comments enabled for this item?

{.disqus?}

Promoted Block Predicates

Does this item have a particular block type promoted?

{.promote[blockName]?}

Available [blockName] tests (replace [blockName] above with one of these types):

map, embed, image, code, quote, twitter, link, video, foursquare, instagram, form

Navigation Template Predicates

Is this navigation item an external link?

{.external-link?}

Is this navigation item a folder?

{.folder?}

Other Predicates

Does this item have location data?

{.location?}

Is this item an event post type?

{.event?}