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