This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Templating with Twig

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Template Language

4:28 with Alena Holligan

Although their capabilities are limited, template languages use the same basic concepts as any other programming language: variables, loops, conditionals, and functions. We'll take a look at the syntax Twig uses to build our templates. We'll also explore how autoescaping works (or doesn't work) on different variables and display.

Documentation

Twig for Template Designers describes the syntax and semantics of the template engine and will be most useful as reference to those creating Twig templates.

Twig Reference Browse the online reference to learn more about built-in features.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Although their capabilities are limited, template languages 0:00
    use the same basic concepts as any other programming language, 0:04
    variables, loops, conditionals, and functions. 0:09
    Let's take a look at the syntax Twig uses to build our templates. 0:13
    We've already started with variables. 0:20
    The name is a variable. 0:22
    To use a variable in Twig, first we have to pass it 0:24
    to our render as an array of named value pairs. 0:28
    We see here, our array, name = Fabien. 0:33
    I'm going to change this to alena, in lower case. 0:37
    In our template, home.twig, we then output the variable 0:43
    by calling the name of the variable within curly braces. 0:48
    We can affect our variable by using filters. 0:53
    Filters are like built in functions to make changes to the display of a variable. 0:56
    Let's leave this variable for now and we'll show you some examples below. 1:02
    We'll add the name here. 1:07
    And then to filter the variable, 1:09
    we use the pipe character followed by the name of the filter. 1:12
    I want this to be title case, so I'll use title. 1:16
    Let's jump back to the browser. 1:21
    I see my greeting and the name is not capitalized. 1:23
    But after that, where I filtered my name variable, it's capitalized. 1:27
    Back in the Twig documentation, you can go to 1:33
    documentation and see a list of different filters. 1:38
    Let's go back to the code and experiment a little more. 1:44
    I want to combine my name with the emphasis or tags. 1:48
    If I use <em>name</em>, 1:55
    It acts as if the name is part of the string and not a variable, and 2:04
    it doesn't matter if we use single or double quotes. 2:09
    This is exactly what I want if I'm using the default world. 2:12
    So let's add that as the line. 2:16
    World. 2:24
    We'll change this to use the concatenation character, which is the tilde. 2:26
    This combines my title with my tag strings, but now the filter isn't working. 2:37
    I can create a new variable using Twig. 2:44
    Twig uses two different tags. 2:47
    The double curly braces that we've seen so far are used for displaying the data. 2:52
    For control of the data, we use the curly brace with the percent sign. 2:58
    I'll use the command characters, the curly braces with the percent sign. 3:09
    And then set namestr = 3:11
    concatenate name, 3:16
    concatenate closing. 3:21
    Now I can use that name string. 3:26
    Name string and we'll filter title. 3:29
    This time, the filter works and capitalizes both the original and alena. 3:36
    One other way I can use a filter is by wrapping a string in a filter command. 3:43
    Filter upper, 3:53
    <em>world</em>. 3:59
    And then close my filter. 4:05
    Endfilter. 4:09
    We've seen these filters, but this isn't actually working as we want. 4:17
    We probably want Twig to use the HTML tags instead of displaying them to the screen 4:21

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up