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 <em>name</em>,

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
<em>world</em>.

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