HiFi Idioms


When getting comments, it is important to be explicit about approved and spam status:

{% for comment in hifi.get({'type':'comment','isSpam':false,'isApproved':true}) %}
  {{ comment.author }}
{% endfor %}

Comments are children of the page they are on:

{% for comment in hifi.get({'type':'comment','isSpam':false,'isApproved':true,'parent':this.id}) %}
  {{ comment.author }}
{% endfor %}

CSS/JS Minification

Minifying (compressing and combining) your stylesheets and javascript files is one of the easiest ways to speed up your website. With HiFi, it is even easier. We have created tags for our templating system that will minify your assets files in a single step, and take case of all the details involved in regenerating the compressed file when one of the source files changes.

In order for automatic minification to work, you must store your CSS files in the assets/ui/styles folder and your scripts in assets/ui/scripts folder. That way, HiFi knows where to find them.


{% css 'layout,typography,homepage' media 'screen' min %}

The css tag takes a comma-separated list of file names. You don't need a path (you put all your stylesheets in the "styles" folder, right?) or the .css extension.

You can optionally specify the media attribute of the css. If you choose to leave this out, it will default to all. For obvious reasons, you cannot combine a print stylesheet with your screen stylesheets. You can certainly minify the styles for both media, but you must use two separate css tags.

If you include the min flag at the end—as in the example above—all of the stylesheets will be combined into a single file and compressed. While you are actively working on the site, you will want to leave off the min flag, which will cause all of the listed files to be included normally. Minified files are hard to debug!

We often will inline compiled CSS into the HTML to optimize site performance. You can do this with the css tag's "source" attribute like this:

<style> {% css "file1,file2.less,path/to/file3.less" source %} </style>


{% js 'jquery,jquery.cycle,jquery.validate,nmcDropDown,setup' min %}

The js tag works almost identically to the css tag. The only difference is that there is no media attribute.

Custom Fields

Custom Fields can be accessed on any type that has them through the 'custom' property.  Fields are namespaced by fieldset in the following way:

{% for page in items %}
    {{ page.custom.fieldset_slug.field_name }}
{% endfor %}

Fetching One Item

Grabbing one item with the HiFi API

{% set post as hifi.get({'type':'post','url':'/blog/some-post'})[0] %}

Image Resizing

The imagesize filter is used in templates to resize images and do other processing. The parameters specifying what you want to do to the image should be passed to the filter in the form of a JSON object.

<img src="{{ image_url|imagesize({width:100,height:100,crop:true,bw:true}) }}" alt="Thumbnail" />


All parameters are optional.

  • width: The maximum width of the resulting image. If this is not specified the image will only be resized based on the height.
  • height: The maximum height of the resulting image. If this is not specified the image will only be resized based on the width.
  • crop: If this is set to true, the image will be cropped to match the specified width and height exactly. If you leave out the crop parameter, the image will be resized to fit within the specified width and height, but will retain its original aspect ratio. It only makes sense to crop the image if you also specify both the width and the height.
  • bw: If this is set to true the image will be converted to greyscale.
  • colorize: Set this to an rgb hex code to recolor an image. For example, if you wanted a sepia-toned image: {{ image_url|imagesize({colorize:"#704214"}) }}
  • radius: This rounds the corners of the image to the specified radius (in pixels). If you don't specify a background color (see below) the resulting image will be forced to a 24-bit PNG format. This is notgenerally recommended, unless the source image is also a PNG.
  • background: If the radius is also set, this is used to specify a background color to fill the corners with. For example, if you wanted an image on a bright red background to have corners with a 10-pixel radius: {{ image_url|imagesize({radius:10,background:"#ff0000"}) }}
  • quality: Sets the output quality for JPEG files (ignored for other formats). This should be a number between 0 and 100, the default is 75.



Media items from the media tab are stored as json objects in an array on pages in the media property. To display them all, you might do this:

{% if this.media %}
{% for image in this.media %}
  <img src="{{ image.url }}" alt="{{ image.caption }}" />
{% endfor %}
{% endif %}

To display the first one, you might do this:

<img src="{{ this.media[0].url }}" alt="{{ this.media[0].caption }}" />

Typically with images you'll want to use the image resizing filter.


Feeds and the children of feeds are automatically paginated through a populated variable called items.  Here is a standard pagination setup:

{% for post in items %}
  {{ post.title }}
{% endfor %}
{% if previousPage or nextPage %}
  {% if previousPage %}<a href="{{ previousPage }}">Previous</a>{% endif %}
  {% if nextPage %}<a href="{{ nextPage }}">Next</a>{% endif %}
{% endif %}

Results Loop

Looping through HiFi API results:

{% for item in hifi.get({'type':'content','count':5}) %}
  {{ item.title }}
{% endfor %}