DotKernel comes bundled with the Twig templating engine, which allows you to create blocks, loops, layouts and more in your HTML.


Here you can see how a contact us template could be built.

{ % extends '@layout/default.html.twig' %}

{ % block title %}Contact Us{ % endblock %}

{ % block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3 no-padding forms">
                <h1>Contact Us</h1>
                <div class="form-content">
                    { { messagesPartial('partial::alerts') }}

                    { % set dummy = form.prepare() %}
                    { { form().openTag(form) | raw }}

                    { % include '@partial/form-display.html.twig' with {'form': form, 'showLabels': true} %}

                    { { form().closeTag() | raw }}

{ % endblock %}

1) First, we start by selecting the base-layout that we want to extend. 1) Then we say that in the base-layouts’ title block, we want to write “Contact Us” 1) and lastly, we add the content of our specific page to the base-layouts content block.

The Twig files requires a special, .twig extension, which is appended after the .html ending, and makes the filename look like this: contact-us.html.twig.

Twig uses the { % syntax to open and close blocks, see more about the tags in the usage section.


In the example above, you see something called a partial, include '@partial/form-display.html.twig'. A partial is some HTML code that you want to be able to include in many different templates.

Imagine you had five pages that all needed the ability to show alerts, then you could create a partial and include it in those five pages only.

Here we’re displaying our form through the form-display partial, and passing it two variables, the form variable, and the showLabels variable.

Displaying the template

In the controller, you need to return the correct template, like so:

public function indexAction(): ResponseInterface
    $form = $this->forms('ContactForm');
    return new HtmlResponse($this->template('app::contact', [
        'form' => $form


Symbol Usage
{ % A programmatic block, used for PHP commands like loops and includes
{ { Display a variable
{ {$var|e Display an escaped variable, the |e means escape
{ # Comment in the code, which won’t be in the html

Remove the space after the {, We have to put it there for technical reasons.


For Loop

{ % for user in users %}
    * { { user.name }}
{ % else %}
    No users have been found.
{ % endfor %}

Auto escaping

{ % autoescape "html" %}
    { { var }}
    { { var|raw }}     {# var won't be escaped #}
    { { var|escape }}  {# var won't be doubled-escaped #}
{ % endautoescape %}

Including pure html

{ { include('page.html') }}


Checkout the Twig documentation for more examples and documentation

This page was generated by GitHub Pages.