Templates

• Templates
  • Twig
    • Demo
    • Partials
  • Displaying the template
  • Usage
  • Examples
    • For Loop
    • Auto escaping
    • Including pure html
    • More

Twig

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

Demo

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 }}

                </div>
            </div>
        </div>
    </div>
{ % 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.

Partials

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
    ]));
}

Usage

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

Examples

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') }}

More

Checkout the Twig documentation for more examples and documentation