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

The Structure of Control

6:13 with Alena Holligan

Twig uses filters to format the content on a page.

Twig 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.

Variables can be modified by filters. Filters are separated from the variable by a pipe symbol (|) and may have optional arguments in parentheses. Multiple filters can be chained. The output of one filter is applied to the next.

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

    The first thing I want to do is show the name if the variable is set, 0:00
    or else, default to world. 0:06
    A conditional statement is a command. 0:08
    So I use the curly brace along with the percent sign, then our command itself. 0:11
    If name is not empty. 0:18
    Then I'm going to show the name. 0:25
    Else, I'm going to show world. 0:28
    And finally, end if. 0:35
    We see the greeting with a name, then if go back into index and 0:42
    remove that variable, now we see world. 0:48
    But I still want to adjust my spacing and add some HTML tags. 0:52
    I'll put my variable back. 0:59
    And then in home, I'm going to surround my whole greeting in an h1 tag. 1:02
    And then I'm going add emphasis tags, 1:12
    surrounding my conditional. 1:17
    Finally, I want to add dashes to my tags to remove spacing. 1:20
    Notice that for world, I added the dashes to my command tags. 1:30
    Now my greeting is formatted properly, but I still want to filter my name. 1:36
    Name should be title case. 1:43
    Next I want to add some navigation. 1:45
    I'm going to use an array for this to give us a chance to work with an array. 1:47
    Back in my index file, I'm going to create my array. 1:52
    Nav equals an array, And 1:56
    then I'm going to create two inner array elements. 2:01
    Home, Is going to equal 2:05
    an array where the href is equal to slash. 2:10
    The caption is equal to welcome. 2:19
    And the status is equal to active. 2:26
    My second item is going to be contact. 2:32
    I'm going to set this equal to an array href will equal slash contact. 2:37
    The caption is going to equal contact us, 2:46
    and the status is going to equal false. 2:52
    Then I'm going to pass my array to my Twig template 2:58
    Nav is going to contain my nav array. 3:04
    Now let's go back into our twig template. 3:10
    We can run a filter on our array just like we did on our variables. 3:14
    Nav and then pipe. 3:19
    First, we're going to use a filter to get the keys. 3:22
    Keys, and then another filter to join. 3:25
    And we pass in the character we wish to join with. 3:30
    Back in the browser, I can see our keys separated with a comma. 3:36
    Remember, you can find a full list of tags, filters, functions, tests, and 3:40
    operators all on a single page of documentation. 3:45
    If there's something you are trying to do, go here and take a look. 3:48
    Now let's set up the navigation. 3:52
    We're gonna start by looping through each item in my nav array. 3:58
    Our command tag for item in nav, 4:03
    Then we'll add our endfor. 4:11
    I'm going to put this below our list item. 4:15
    I'm going to copy the list item and I'm going to use it in our else. 4:21
    In Twig, a for loop can have an else if 4:27
    there are no items in the array. 4:32
    Within our loop, the variable item is now a single dimension associative array. 4:36
    The href here is going to use our item, href. 4:42
    Twig allows me to access an element of an array in one of two ways. 4:48
    Item and then square brackets for href, just like I would in PHP. 4:55
    We can also use the dot syntax. 5:02
    So for my link text, 5:05
    I'm going to use item.caption. 5:08
    Finally, I only want my active link to show as active. 5:14
    Instead of adding the class active here, 5:18
    I'm going to show item.status. 5:23
    I'm also going to add a condition around my span. 5:27
    If item.status equals active, 5:33
    Then I'll use my span, endif. 5:43
    Let's go back to the browser and check this out. 5:48
    Now I see the navigation for the welcome and the Contact Us page. 5:52
    Our links won't actually work because I don't have my contact page set up yet. 5:57
    We'll do that in the next video. 6:02
    Before we move on though, I want to finish my template by 6:04
    dynamically adding the year to the footer. 6:09

    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