Bend a CMS to your design's will

A professional content management system must handle a professional website designer's wide range of needs. HiFi is a better website power tool, not a better website cookie cutter.  The combination of a flexible template system and powerful content query language enables developers to achieve their creative visions.

For this mini-challenge, imagine the design of our front-page calls for a list of the most recently updated content across the site. We will pull the content from HiFi using its simple query language and display it using templates. Difficulty: Medium

Getting Started

Step 1) Open up two browser tabs. Navigate the first with the front-page of your trial site. In the second tab log in to your trial site's backend. Open the 'Developer' tab.
 

Step 2) We are going to modify the home page template. In HiFi templates are organized by content type and/or URL. We can find the home page template in the Developer sidebar by opening
 
 Templates > Page > Home > home.html

Step 3) Designers of HiFi sites can use template inheritance to flexibly share common markup between many templates. Template inheritance is too broad a subject to cover sufficiently here, so for more detail check out the in-depth docs. For now, all that you need to know is that the primary structure of this template is defined by index.html and we are customizing certain blocks just for the home page.

Step 4) We will place 'Recently Updated Content' above the 'Sample Gallery' on the home page. This is where we will drop-in our new code in the 'home.html' template:
 

Here is the code snippet to get us started:

<h2>Recently Updated Content</h2>
<ul>
{% for page in hifi.get({'type':'page','orderBy':'-modified','count':5}) %}
    <li>{{ page.title }}</li>
{% endfor %}
</ul>

What is happening in this snippet? Skipping down to the {% for %} control we can see that we are looping through some pages. The pages are pulled from your site's data using the HiFi 'get' command. This command takes a query specified in JSON using the HiFi Query Language and asks for pages arranged by the date it was modified in descending order. For more details check out the documentation on the HiFi Query Language. Each page's title property is printed using the {{ value }} syntax.

Step 5) Refresh your home page. You should now see a list of titles corresponding to the most recently modified content in your trial site. Go back into your admin panel and try editing the 'Overview' page, saving, and then refreshing your home page. If the 'Overview' page you just saved is at the top of the list, you are ready for the challenge.
  

The Challenge

The design calls for some additional requirements in how the recently modified items are displayed. Can you implement them?

  1. Only show the three most recently modified pages by changing the count query modifier
  2. Make the title a link to the actual content.  (Hint: content has a url property, just like it has a title property.)
  3. Display the date the content was modified using the date filter
  4. Increase the font-size to 18px styling using CSS.

Conclusion

With HiFi, professional website designers and developers like you can realize your creative vision for your clients' sites. With complete control over HTML markup and direct access to a powerful, simple query language, you do not have to resort to nasty hacking to uniquely place a site's content exactly where it belongs. A great example of a HiFi site that makes extensive use of custom templates and the query language is PBS' Ciao Italia.