Template Tags

TakeShape uses the Nunjucks templating language. You can find detailed documentation on the Nunjucks project page. There are number of TakeShape specific template tags for your convenience.

Generated HTML

TakeShape will automatically create an html-ified version of Block Canvas fields. For example if you drag a Block Canvas field into a Content Type and name it bodyContent TakeShape will automatically create a properly  bodyContentHtml which contains ready to use html. You can use this property in a query or templates like any other property {{ bodyContentHtml }} .

Asset Captions and Credits are system created Block Canvases. HTML versions of those properties can be accessed in the same way {{ assetName.captionHtml }} and {{ assetName.creditHtml  }}.

Link to generated pages

route(routeName: String)

{{ post | route('posts') }}

Returns a relative path to a piece of content as defined by the routes in tsg.yml. The input Object must have the necessary fields specified in the route path in order to construct the path properly. 

Markdown

{{ markdown | md }}

Markdown to safe HTML using the CommonMark spec.

Numbers 

{{ numberField | numberformat(',.2r') }}

Returns a number formatted according to the the format specifier string. Uses d3-format.

Code

{{ codeField | code('javascript') }}

Uses prism.js to return an HTML representation of the highlighted code. Takes an optional language string. You will need to manually include the corresponding CSS in your project. 

Images

{{ imageField | image({w: 320, h: 240, q: 90, crop: 'faces'}) }}

Returns an imgix ready url. Takes an object of keys and values for any imgix filter.

Date

{{ aDate | date('MMM Do YYYY') }}
{{ date | date({format: 'MMM Do YYYY', tz: 'America/Los_Angeles') }} 
{{ date | date({format: 'LLL', tz: 'America/Los_Angeles', locale: 'fr') }} 

 Formats dates using moment.js. format can be either a format string or an object where you can specify a format and override the default timezone and locale (configured in tsg.yml).

Pluralize

{{ 'post' | pluralize(num) }}

This example will print "posts" if num is greater than 1 and "post" otherwise. The pluralize has support for english language pluralization and handles irregular rules such as ox -> oxen.

Join us

Interested in joining the team as coworker or investor?

contact@takeshape.com