Quick Start Beginner Tutorial

Template Overview What is JSON? View JSON Data Templating Basics Using Git

Template Configuration Layouts & Regions Template Partials Menus & Navigation Folders & Indexes Collections Static Pages

What is JSON-T? JSON-T Directives JSON-T Predicates JSON-T Formatters JSON-T Helpers JSON-T System Variables

Open Block Field Navigation Tag Category Tag Custom Query Tag

Custom JavaScript Image Loader

Local Development Custom Post Types Template Annotations Style Editor Error Reporting URL Queries

JSON-T Formatters

Formatters can be used to control the formatting of data for a given variable.

The syntax of a formatter is {variable-name|formatter-name}.

JSON

{variable|json}

Output the variable as JSON data.

Prettified JSON

{variable|json-pretty}

Output the variable as formatted JSON data.

Date/Time Formatters

Date

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

Format a date in-line using the YUI date format.

Timesince Date

{addedOn|timesince}

Displays the time/date in a term relative to right now. Also referred to as 'time ago' or 'twitter-style' date format.

String Formatters

Slugify

{variable|slugify}

Converts a human readable string variable to lowercase, removes non-word characters (alphanumerics and underscores) and converts spaces to hyphens. For example, "Test Example" would become "test-example".

Smartypants

{variable|smartypants}

Translates plain ASCII punctuation characters into "smart" typographic punctuation HTML entities (source).

URL Encode

{variable|url-encode}

Encodes a variable so it can be safely used in a URL. For instance, "Test Example" would become "Test%20Example".

HTML

{variable|html}

Encodes a variable so it can be safely used in HTML, replacing the characters <, >, and & with their corresponding entities. For example, <script> would become <script>.

HTML Attribute

{variable|htmlattr} or {variable|htmltag}

Similar to html but additionally escapes quotes, replacing the characters <, >, &, and " with their corresponding entities, to ensure it can be used in an attribute (src="X", for instance) within an HTML tag.

Truncate

{variable|truncate 250}

Limits the length of a string to the number following the formatter, and once truncated includes an ellipsis.

NOTE: should be combined with safe if truncating a string that contains HTML.

Safe

{variable|safe}

Make the variable 'safe' by stripping away unsafe HTML, such as injected script tags.

Item Count

{items|count}

Output the length of the items array

Twitter Links

{variable|activate-twitter-links}

Make links and @names link to the appropriate places on twitter. For instance, @squarespace (the string) would become @squarespace.