Templating /
Building templates

To render HTML pages with dynamic content, Bolt uses the Twig
templating language. This means that everybody who is familiar with Twig can
easily get started with building templates in Bolt.

In short, Twig can be described as a 'flexible, fast, and secure template
engine for PHP'. Primarily, it separates the markup of your templates from the
PHP code in the CMS. It does this elegantly and quickly, which means that
writing your HTML templates in Twig will give you clean and legible templates.

That means you don't have to use PHP-like statements in your markup, so there's
less code like this:

block tags are used to break out inheritable sections of templates for re-use or overriding in child templates

For example, {% if foo == "bar" %} is a statement that tests if the variable
foo is equal to the value "bar". If so, the part that's between the opening
statement and the corresponding {% endif %} will be rendered.

A Bolt website theme consists of a set of Twig templates, that are located in
the theme folder in the public directory of your site.

You can always add more templates, if you want to. By default, the index.twig
template is the homepage, but you can override it using the configuration settings.

The current default theme contains the following files and folders:

File

Description

index.twig

Front page of the web site

page.twig

For a single pages ContentType record

listing.twig

Displaying listings, like 'latest pages', but also taxonomy overview pages

record.twig

A 'generic record' page, used if the ContentType has no template specified

search.twig

Displaying search results.

partials/_master.twig

Base layout template, that other templates extend to inherit the properties of

partials/_aside.twig

Helper template that gets included as the sidebar

partials/_header.twig

Helper template that for the header.

partials/_footer.twig

Helper template that for the footer.

partials/_recordfooter.twig

Footer specifically for ContentType records

theme.yml

A file with configuration related to the theme and how it works with bolt. Can also contain configuration for template specific fields and values for the theme to use in its templates.

js/

Compiled JavaScript files

css/

Compiled CSS files

The file names of the 'helper' templates all start with an underscore. This is
just a convention, to make it easier to recognize which template does what. If
one of your ContentTypes have a 'template select' field, Bolt will skip these
helper templates by default.

Tip: the default template set uses the
include tag to insert the header, footer and such, but you're free to use
Template Inheritance if you prefer.

By default, Bolt creates links to single pages based on the ContentTypes, and
it uses a template based on its name.

For instance, if your site has a ContentType foos, a single record in that
ContentType will be available under domain.com/foo/slug-of-record, where
slug-of-record is the "slugified" version of the title. Bolt will try to use
foo.twig as the template to render the page.

You can change this by either defining another template in contenttypes.yml,
or using a 'template select' field in the ContentType. More information about
this can be found in the section on working with ContentTypes.

Using your themes theme.yml you can also provide fallbacks for certain settings
of the main config.yml. These are useful when building themes and you want to
provide your own templates. Keep in mind that these are overridden by the main
config.yml if the same key exists there.

A simple page.twig template could look something like the example you see
below.

Using this example we'll go over some of the details of the Twig Template
language. As mentioned before: Much, much more detailed info can be found at
Twig for Template Designers on the official Twig site.

{% extends 'partials/_master.twig' %}, line 1: The extends tag tells
Twig that this is a child template, that inherits the content and
functionality from _master.twig

{% block main %}, line 3: The block tag, and its matching endblock on
line 23, tells Twig to override the contents of the block called "main" in
_master.twig

{{ record.title }}, line 6: Since this is a generic template, record
contains the record of the current requested page. For example, if the
current page is domain.com/news/the-website-is-live, record would
contain the record from the news ContentType that has 'the-website-is-live'
as a slug. The record variable acts like an array, so to output the
title field, we use dot-notation (.)

{{ record.link }}, line 6: Here we use the link property to get the URL
that links to the content

{# Only display .. #}, line 8: This is a simple comment. It will be
removed when the template is rendered to the browser, so it will not show
up in 'view source'

{% if content.image != "" %} … {% endif %}, lines 9 - 13: The if
statement only parses the part between the start and end tag, if the given
condition is true. So, in this case, the image is only rendered to the browser, if
content.image does not equal an empty string (""), i.e. if it is not empty

{{ record.image|thumbnail(320, 240) }}, line 11: By using the
thumbnail filter, we can create thumbnail images on the fly. In this
case, the image source attribute in the HTML will be something like
'/thumbs/300x240/imagename.jpg'. Bolt has a built-in image resizer that
will create the image with the exact dimensions, and caches it for further
use.

{{ record.body }}, line 15: This renders the body field of the
ContentType record

{{ record.datecreated|date("M d, ’y")}}, line 19: datecreated is one
of the elements that is always present in all ContentTypes, and it
contains the date the record was created. It's stored in a machine-readable
format, so to display it the way we want, we use the date() filter. In
this case, it will output something like 'August 26, ’12'.