Join our HiFi mailing list to receive the latest news & updates

Image Grid Creator

1 Comment(s) | Posted | by Joel Sutherland | |


This snippet allows you to easily create a grid of images from the media tab.  You upload however many image you want, and then using custom fields, specify how wide you want the container to be and the number of images you want on each row.

All of the images are then automatically resized and placed in the grid.


No external requirements.



{% include 'common/image-grid.html' with ['images', 'width':this.custom.tych.width, 'layout':this.custom.tych.layout] %}


To install this snippet, you just need to upload the file in the zip to your theme and include it in your desired template. All of the required CSS and image resizing is done inside the template itself.

You need to make sure that you're passing in variables for images, width and layout.  This means that you need to set up custom fields for width and layout.

  1. width: This is the width of the container that holds the images. Use a text field for this.
  2. layout: This is a textarea that explains how many images go on each row.

All the magic happens in the layout field.  The following would display 5 images total, 2 on the first line, 3 on the second:


It is also possible to indicate how tall you want each row to be in pixes. You can optionally do that by using a bar ("|") and then putting in the number of pixels you want. Here is an example that displays 6 images, 1 on the first row, 2 on the second, 3 on the third. The second row is set to 100px high:


Here is a screenshot showing the custom fields. Note that I am also using an "Enabled" dropdown so that it runs optionally.

Navigation Menu

1 Comment(s) | Posted | by Joel Sutherland | |


This snippet is a core part of every HiFi theme.  It allows you to easily build navigation, menus, sitemaps or any feature that needs a nested list of your site content.

The idea behind the snippet is that you provide a piece of content as a starting point and a depth, and this will build a tree for you.  Typically, the starting point will be your homepage, and the depth will be 1 or 2 depending on whether you want drop downs in your navigation.

By default, this snippet generates nice and clean markup, but you can pass in other templates if you need to change that markup dramatically.  Most common things, like adding ids and classes can be done with the default templates.


No external requirements -- although this snippet won't do you any good if you're not on HiFi.



The default options will generate nested unordered lists starting from your homepage, two levels deep.  Here is how you make the default call:

{% import '/common/navigation/navigation.html' as navigation %}
{{ navigation.draw() }}

This will generate something like the following:

    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a>
            <li><a href="/about/philosophy">Philosophy</a></li>
            <li><a href="/about/history">History</a></li>
            <li><a href="/about/team">Team</a></li>
    <li><a target="_blank" href="">Yahoo</a></li>
    <li><a href="/contact">Contact</a></li>

If you need to do something beyond the defaults, you can add in options by passing in an options object. Here is an example that changes the maxDepth to 3 and has two other fake options. It doesn't matter what order they are in.

{% import '/common/navigation/navigation.html' as navigation %}
{{ navigation.draw({
    maxDepth: 3,
    option: 'value',
    otherOption: 'value'
}) }}

Options Reference


A query to find the starting point for the nav. So {type: 'page', url: '/about'} would start from the about page. It uses the first result from the query.
Default: {type: 'home'}


The number of levels this should traverse.
Default: 2


This is the query used to restrict the items that are found. It is used at each depth level.
Default: {type: 'content', inMenu: true, orderBy: 'ordinal', count: 100}


The class to put on the active nav item based on url.
Default: 'active'


The class to put on ancestors to the active nav item based on url.
Default: 'active'


If true, the root is included in the first level nav.
Default: true


Display a level class on each li (ie. class="level_3")
Default: false


Specify the string you want to prefix the level number
Default: 'level_'


The id attribute assigned to the nav's first ul
Default: ''


The class attribute assigned to the nav's first ul
Default: ''


For link types that have newWindow set, what attribute do you want to add to the link.
Default: 'target="_blank"'


Specify whether folder links should have the href attribute
Default: false


Path to the template to use for wrappers
Default: '/common/navigation/wrapper.html'


Path to the template to use for items
Default: '/common/navigation/item.html

The HiFi Snippet Library Has Launched

0 Comment(s) | Posted | by Joel Sutherland | |

HiFi Snippets

This morning we're making it official the HiFi Snippet Library has launched.

A great thing about working with HiFi is that you can use the web technologies you know (HTML/CSS/JS) with no restrictions. Many systems say this, we actually mean it. This means that it is extremely easy to build reusable snippets that can save you all kinds of time when building your client sites.

If none of this makes sense to you, hopefully we can answer your questions here.  If you have any others, let us know in the comments.

What is a snippet?

A snippet is a combination of HTML, CSS and JS that you can drop into your sites' templates to quickly implement a feature. Since it is based in just HTML/CSS/JS, it is easy to customize or change them.

Why is this cool?

Snippets let you quickly add functionality to your sites without forcing you to use particular HTML. Design and code the sites the way you want, and then hook up the functionality with snippets.

How much do they cost?

The snippets are completely free.  Most can even be used on non-HiFi sites!

Where are they coming from?

The HiFi snippets are being written both by the HiFi team as they build sites, and by customers using HiFi. If you have a snippet you would like to see, or a snippet you want to contribute to the library, get in contact.

How often will they be released?

We have committed to release at least one snippet a week, but through community contributions, the number may be even higher! Whenever we release a snippet, we will be posting it to the HiFi blog. So be sure to subscribe to the blog to get updated on the newest snippets.

Your snippets are stupid. Why don't you have an XYZ snippet?

We like your attitude. Shoot us a message and we'll make sure it gets added!

HiFi on Forrst

4 Comment(s) | Posted | by Joel Sutherland | |

We've been working away, readying our next major release that will provide better support for agencies and those managing multiple sites.  While this has been in the works, our team discovered Forrst.


It has turned out to be a great community of people interested in web design/development as a whole, not just some part of it.  We've been putting up some of our ideas and feature screenshots and have been getting some great feedback:

We've also had some good conversations about web technologies that we care about:

If you're on Forrst and want to follow the some of the HiFi team, here are our accounts:

If you're not on Forrst and interested in an invite...we've got a couple, so let us know who you are in the comments.

Olark Review: 25% of our Customers Live Chatted with Us Before Buying

5 Comment(s) | Posted | by Joel Sutherland | |


We soft-launched HiFi about two weeks ago.  This meant closing down the beta program and launching our pricing and sign-up pages. We've been writing posts on this site for some time so we get a fair amount of traffic to the blog from people who might be interested in our product.

Like most new products there is a lot of marketing left for us to do. We haven't come close to explaining all of the features and advantages that HiFi has on this site.  Since the our team knows the product well, it only made sense to try letting our customers contact us and ask us about it. We turned to Olark to help make this possible.

The results are already pretty impressive.

Just over 25% of our signups have been from people that have chatted with us first. About 50% of the people that chat with us have gone on to sign up!

Generally the conversations have gone really well: our customers are web designers and developers and our staff is made up of web designers and developers so both parties have a lot in common.  For the most part, customers have been happy that we have been able to answer their questions with as much depth as we have.

How to set it up

Olark works through a simple Javascript file you include at the bottom of your page.  On HiFi this is super easy to do.  We like to set up a JS block that allows us to add scripts only on the pages they are needed.  We just wanted Olark to run on the pricing and signup page.  To get it to work there, I edited the JS block on both pages as follows:

{% block js %}
    {% parent %}
    <!-- begin olark code --> <script type="text/javascript">...</script> <!-- end olark code -->
{% endblock %}

Once you've done that, Olark will recognize that it has been installed.  From there, you can sign in to just about any IM client and link it to your account.  I use Google Talk so I linked that up.  When you do this, Olark will automatically request to chat with you from a number of different names like "".  Once you approve this, you're good to go.

Now, whenever somebody is browsing a page on your site with Olark installed, you'll see an active buddy on your chat list.  Either you or your customer can initiate the conversation, it's that simple!

One great feature for those on gchat is that Olark is smart about when to show up. If you aren't logged in or have your status set to 'Busy' it won't give visitors the option to chat with you.

Also, you can connect it with multiple gchat accounts.  Once one of them responds, it blocks the others.  This allows for several of us to be available at the same time without having to worry about whether someone else is already chatting with a customer.

How it looks

olark on hifi

You can control where on the page Olark shows up.  The bottom right is default and probably most common so we put it there.  It starts closed, but will open when you click on the title. You can control 100% of the copy that people see.


Our experience might not be 100% typical.  We're able to make our founders and developers available to our customers. I don't know that it would be working as well otherwise.  Additionally, our product has high switching costs.  Before someone commits to using HiFi as a CMS they will need to be willing to build a site on it!  This means that our customers likely want to do a lot more research before making a purchasing decision.

That said, we would highly recommend giving Olark a shot.  It's so easy to install and its defaults are really sensible.  You'll be able to get a feel for how well it works quickly and uninstall it if you don't think it's worth it.  There is a 14-day free trial so you can figure out if it works for you at no charge.

HiFi Improvement Recap

0 Comment(s) | Posted | by Joel Sutherland | |

Since the launch of the private beta, HiFi has gone through quite a few fixes and improvements.  As we make them, we're sure to both update the documentation at as well as put a notice on the HiFi Changelog.  If you haven't yet, go ahead and subscribe to the changelog to get the latest updates on the improvements and fixes we're adding to HiFi.

In the meantime, here is a recap of some of the more exciting changes and improvements to HiFi.

Improved Page Picker

HiFi Page PickerEverywhere in HiFi that you can add a link, there is also an option to use the Page Picker.  This lets you quickly add links to content that you've already developed  for your site. This is now being loaded dynamically for improved performance and there is also the option to quickly search as well as browse for content.

Additional SEO Controls

HiFi automatically does a whole bunch of great SEO things as well as gives fine grained control over things like URL structure, meta descriptions and more. With an update early last week, it is now possible to have more control over the sitemap.xml and robots.txt files that are generated.  It is now possible to exclude live pages (and their children) from the sitemap.xml file as well as make the entire site un-indexable via robots.txt.  This is really helpful when either working on a new site that you want to hide, or just a section of a site.

Better Notification Controls

HiFi Notifications

Now, site owners have the option to be notified of all non-spam comments and form submissions, even if there are other people set up to be notified as well. This makes it easier to track what is going on when areas of the site have been delegated to others.


We added an awesome new method to the HiFi API.  It's called merge, and it does just that.  You can pass it as many arrays of HiFi objects or even HiFi queries and it will returned a single array of all the unique results.  If you pass in a string, it will even order them for you.  This is great for putting together searches or feeds from many areas of a site.  It's also a great example of why the HiFi Templating system is so awesome -- with full access to your data, just about any site is possible.

There is more

This is just an overview of some of the changes and improvements we've been making. As always, if there are any questions feel free to drop them in the comments or shoot us an email.

Update: Relaunches - New Overview Screencast

2 Comment(s) | Posted | by Joel Sutherland | |

We've relaunched the HiFi site!  The previous version is on the left below, and the new version is on the right:

hifi relaunch

While the new version may be less intense and impressive, we feel that it will be a good foundation for the site as we move towards our product launch.  

The first site put a premium on design, which paid off in a couple of ways.  First, it led to HiFi getting reviewed on several Design and Development sites, which drove some great targeted traffic and quickly accumulated links for the new product.  Second, it showed the versatility of the system that we were able to faithfully reproduce such an intense design on HiFi and have it deliver great performance to visitors.

The new site is aimed at quickly giving visitors an idea of why HiFi is the CMS for them.  It more prominently features specific feature details above the fold and gives a first-time visitor much more information about the product than the old site.  The new design also highlights efforts to convert visitors to our Beta program (and eventually our pricing page), which is a nice step forward to make this site more product oriented.

Some of the cool pages to check out on the new site are the features page and examples page.  The features page gives a 10,000 foot view of what HiFi is all about and features our new product video.  The examples page shows just a few of the sites that are already in production on HiFi.  Flipping through those should show you that there truly are no design constraints on HiFi!

The HiFi Overview Video

We also now have a great overview video of the HiFi system.  It was put together by Alex Pomer, one of the project managers from New Media Campains.  Alex has been using HiFi every day for over six months and has really fallen in love.  Watching this video is a great introduction to the system as a whole:

Let us know your thoughts on the new site and content, and be sure to share it with your friends!  We've got some exciting stuff that has come out of the beta program that we should be sharing soon.  As always, shoot us an email if there are any questions!

Private Beta is Rolling, Mentions Everywhere

0 Comment(s) | Posted | by Joel Sutherland | |

This post is an update on the HiFi private beta.  We've invited 37 to the program so far, and have received some great feedback.  We are going to continue rolling these out to those that apply in the sidebar on the right.

In addition to the 37 in beta, there are another 63 in production for a grand total of 100 HiFi sites already.  So far we've been incredibly pleased by its performance and with the comments we are receiving from designers, developers and content editors alike.  Thanks to everyone that has been helping out!


Some other exciting news that has come this week has been in the form of mentions and recognition from some really cool sites.  HiFi has all kinds of neat technology built in and we're getting noticed for it.  In fact, we were mentioned by Microsoft and Mozilla this week.  An odd pairing, but we'll take it.  Here are those mentions:


HiFi theme editor is based on Skywriter: 01 via

Microsoft: jQuery Templating in the Wild

These bits are pretty fresh so there are only a few examples of websites using them.  One early adopter is hiFi, a website publishing engine.  They take performance seriously which is why they chose to use jQuery Templating engine to render their comments to the client. The team at hiFi have also written up a really nice post on the subject of jQuery Templates.

Additionally, we were recognized by Design Shack once again, this time as a top alternative to Wordpress:

Design Shack: 50 CMS Alternatives to Wordpress

Is WordPress a CMS? Many developers say “no” while countless others continue to use WordPress as a content management system regardless of its definition or intended use as a blogging platform.

Regardless of which camp you fall into, you should know that there are a lot of robust and powerful alternative CMS options that have been built from the ground up to help you manage the content on your site. Below you’ll find 50 content management systems perfect for designers, end users, churches, media sites and more!

A Great HiFi Tour is now Available

0 Comment(s) | Posted | by Joel Sutherland |

Now that the private beta rollout has begun, we are going to begin releasing details about HiFi much more rapidly.  To kick things off, we've recently posted a HiFi Welcome Walkthrough that give an overview of the system as a whole:

This is hosted on the brand new HiFi documentation site:

We're still adding polish to it, but it is already fairly comprehensive. We have enabled comments on every page and are monitoring them closely.  The goal is to make sure that any questions about HiFi have an answer on this site! Featured in HTML5Gallery

1 Comment(s) | Posted | by Joel Sutherland |


The site has been featured in the HTML 5 Gallery. This is the leading site used to showcase sites that use html5 for markup.  One of our goals when creating this site was to build something that showcased the full range of what HiFi was capable of.

This site is built using HTML5 and CSS3 extensively.  We were also sure to document the entire build process.

The HiFi team is really honored to have the site featured.  Hopefully many more designers and developers are able to use HiFi to build HTML5 sites in the future!