Templates

Templates are the most powerful, flexible, and critical component in the CMS. A beautiful template will not only make the live site look and feel great, it will also make it simple and intuitive to build the site for both technical and non-technical users as well. Conversely, a poorly conceived template will also negatively impact both the frontend and backend of the website.

Before we dive into what makes a beautiful template, why don't we discuss a few of the basics first.

Types of Templates

Page

The page template is the top-level template that used to display a page. Every page on the CMS has a page template - which should either output or include everything necessary to display the page, including the html, head, and body tags, javascript, stylesheets, the site navigation, and more.

Generally speaking, it is easier to break a page template up into a number of smaller and more modular partial templates which facilitate creating different types of page templates with similar themes and elements.

*note: It is possible to create a page template that does NOT output an HTML page, such as a JSON or RSS feed, or a partial page that will be included in full pages via javascript. If you create this type of page template, please name your template CLEARLY so that nobody tries to use or modify it for any other purposes.

Partial

Partial templates are your friend. While you cannot create a page from a partial template, they make page templates MUCH easier to create and manage. Some partial templates, such as header and footer templates, may be included once on every page of the site. Other partial templates, such as pagination templates, may only be included on the pages that need them. It is also possible to include a partial template multiple times from the same page template - such as to display a series of similarly formatted marketing messages.

Partial templates can also include other partial templates, allowing for a nearly endless configuration of templates and sub-templates. The main thing you have to be careful about is not to write an endless include loop as that will ultimately throw an error and prevent the page from loading anything at all.

While there are no hard and fast rules for how to break up partials, and it is possible to get carried away, a good rule of thumb is that the more small and modular partial templates you have the better. This allows you to develop your own "library" of frontend tools to choose from when building out your site.

Gallery

Gallery templates are simply partial templates that are used to display gallery items. This makes it simple to customize (and standardize) the display and functionality of galleries across your site.

Similar to partial templates, you can include other partial templates in your gallery templates. However, unlike partial templates, it is generally better to only have a small number of gallery templates as this will simplify the process of selecting which gallery template to use for a given gallery.


Templating Language

Marketpath uses our own version of the popular Liquid templating language to turn your templates into web pages. In addition to the core functionality, we have added a full library of tags and objects to assist in querying the CMS and displaying content however you want. We are always open to adding new functionality to our library, but before you request something new check out our documentation; maybe we already have something that works.


Custom Fields

Part of what makes the CMS so flexible is the ability to define custom fields for your templates. Whenever a user creates a page using your template, they will be asked to fill in whatever custom fields you have defined in that template. This includes both fields that are saved on the page and fields that are saved on the entity. Using custom fields saved on the page, a template developer can customize the look and feel of individual pages while writing a minimal amount of code. Using custom fields saved on the entity, a template developer can turn an ordinary article into anything they want - maybe a hotel, a swimming pool, or a novel!

You should be careful when creating your templates not to overuse custom fields, however. Every field that you add is another option that content creators will have to consider. This is one of those areas where you have the ability to make the entire system simple and fun to use or difficult and stressful. Thankfully, we have added several advanced tools to custom fields to make them easier for both you and content creators alike.

  1. Conditionals: You can easily show and hide fields based on the values entered for other custom fields. This reduces the number of fields that content creators have to consider until they become relevant to the current page. There are many ways to utilize conditions, but one example might be hiding fields relating to a sidebar if the user specified that they want a single column layout.
  2. Groups: You can group multiple custom fields together to make it visually obvious which fields are related. Additionally, this makes it simple for content creators to hide entire groups of fields with one action if they do not want to fill them in at the moment. These also make it easy for you to use conditionals to hide the entire group at once if it is not relevant to the current page.
  3. Lists: If you want users to select multiple objects, consider using a list field. You can specify that the list contains a minimum and/or maximum number of items - which saves you time creating a series of nearly identical fields and saves the content creator from having to look at all of those separate controls. There are also some additional helpful properties with lists that may help template developers write cleaner templates (eg: list.total_count).
  4. Subtext: For some custom fields, it is obvious what the field is intended for and how it will be used. For example: a "Show Sidebar?" checkbox. Other fields are less obvious. How many articles should be selected in a "Related Articles" list? And what does an "Alternate Nav" menu even do? For those cases where a little extra explanation is helpful, you should include "Subtext'. Subtext is the text that is displayed when a user hovers over the "information" icon next to a field. A little bit of direction can go a long way when a user is not sure what to do with a field.

For more information on using or displaying custom fields from templates, check out the page and entity liquid documentation.

Sharing Templates

Once you have created your templates, the CMS makes it easy to copy those templates to new (or existing) sites. Using this functionality, you should be able to relatively easily craft a core set of templates to use across multiple sites. Alternatively, you can copy only the modular pieces that you want to other sites - such as the templates, javascripts, and stylesheets necessary to display certain types of galleries, etc....

Developer Overview

Liquid Markup