1 00:00:00,000 --> 00:00:04,852 Although their capabilities are limited, template languages 2 00:00:04,852 --> 00:00:09,701 use the same basic concepts as any other programming language, 3 00:00:09,701 --> 00:00:13,857 variables, loops, conditionals, and functions. 4 00:00:13,857 --> 00:00:17,739 Let's take a look at the syntax Twig uses to build our templates. 5 00:00:20,525 --> 00:00:22,098 We've already started with variables. 6 00:00:22,098 --> 00:00:24,021 The name is a variable. 7 00:00:24,021 --> 00:00:28,757 To use a variable in Twig, first we have to pass it 8 00:00:28,757 --> 00:00:33,271 to our render as an array of named value pairs. 9 00:00:33,271 --> 00:00:37,909 We see here, our array, name = Fabien. 10 00:00:37,909 --> 00:00:43,400 I'm going to change this to alena, in lower case. 11 00:00:43,400 --> 00:00:48,415 In our template, home.twig, we then output the variable 12 00:00:48,415 --> 00:00:53,243 by calling the name of the variable within curly braces. 13 00:00:53,243 --> 00:00:56,963 We can affect our variable by using filters. 14 00:00:56,963 --> 00:01:02,000 Filters are like built in functions to make changes to the display of a variable. 15 00:01:02,000 --> 00:01:07,939 Let's leave this variable for now and we'll show you some examples below. 16 00:01:07,939 --> 00:01:09,950 We'll add the name here. 17 00:01:09,950 --> 00:01:12,422 And then to filter the variable, 18 00:01:12,422 --> 00:01:16,939 we use the pipe character followed by the name of the filter. 19 00:01:16,939 --> 00:01:21,428 I want this to be title case, so I'll use title. 20 00:01:21,428 --> 00:01:23,237 Let's jump back to the browser. 21 00:01:23,237 --> 00:01:27,683 I see my greeting and the name is not capitalized. 22 00:01:27,683 --> 00:01:33,724 But after that, where I filtered my name variable, it's capitalized. 23 00:01:33,724 --> 00:01:38,523 Back in the Twig documentation, you can go to 24 00:01:38,523 --> 00:01:44,096 documentation and see a list of different filters. 25 00:01:44,096 --> 00:01:48,119 Let's go back to the code and experiment a little more. 26 00:01:48,119 --> 00:01:55,089 I want to combine my name with the emphasis or tags. 27 00:01:55,089 --> 00:02:00,602 If I use name, 28 00:02:04,741 --> 00:02:09,067 It acts as if the name is part of the string and not a variable, and 29 00:02:09,067 --> 00:02:12,687 it doesn't matter if we use single or double quotes. 30 00:02:12,687 --> 00:02:16,732 This is exactly what I want if I'm using the default world. 31 00:02:16,732 --> 00:02:18,588 So let's add that as the line. 32 00:02:24,812 --> 00:02:26,340 World. 33 00:02:26,340 --> 00:02:30,845 We'll change this to use the concatenation character, which is the tilde. 34 00:02:37,131 --> 00:02:44,350 This combines my title with my tag strings, but now the filter isn't working. 35 00:02:44,350 --> 00:02:47,126 I can create a new variable using Twig. 36 00:02:47,126 --> 00:02:52,541 Twig uses two different tags. 37 00:02:52,541 --> 00:02:58,174 The double curly braces that we've seen so far are used for displaying the data. 38 00:02:58,174 --> 00:03:02,980 For control of the data, we use the curly brace with the percent sign. 39 00:03:09,111 --> 00:03:11,211 I'll use the command characters, the curly braces with the percent sign. 40 00:03:11,211 --> 00:03:16,948 And then set namestr = 41 00:03:16,948 --> 00:03:21,190 concatenate name, 42 00:03:21,190 --> 00:03:26,683 concatenate closing. 43 00:03:26,683 --> 00:03:29,603 Now I can use that name string. 44 00:03:29,603 --> 00:03:33,685 Name string and we'll filter title. 45 00:03:36,093 --> 00:03:43,605 This time, the filter works and capitalizes both the original and alena. 46 00:03:43,605 --> 00:03:48,587 One other way I can use a filter is by wrapping a string in a filter command. 47 00:03:53,668 --> 00:03:56,299 Filter upper, 48 00:03:59,742 --> 00:04:04,019 world. 49 00:04:05,637 --> 00:04:06,732 And then close my filter. 50 00:04:09,518 --> 00:04:10,509 Endfilter. 51 00:04:17,363 --> 00:04:21,309 We've seen these filters, but this isn't actually working as we want. 52 00:04:21,309 --> 00:04:28,180 We probably want Twig to use the HTML tags instead of displaying them to the screen