Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Macros are comparable with functions in regular programming languages. They are useful to reuse often used HTML fragments to not repeat yourself.
Macros are comparable with functions in regular programming languages. They are useful to reuse often used HTML fragments to not repeat yourself.
A macro is defined via the macro tag. Here is a small example (subsequently called forms.html) of a macro that renders a form element:
{% macro input(name, value, type = "text", help) %}
<div class="form-group">
<label for="input{{ name }}">{{ name|title }}</label>
<input class="form-control" type="{{ type }}" id="input{{ name }}" name="{{ name }}" value="{{ value|e }}" placeholder="Enter your {{ name }}" />
{% if help %}<small class="form-text text-muted">{{ help }}</small>{% endif %}
</div>
{% endmacro %}
From the twig documentation,
lets go to macro.
0:00
Macros are like writing custom function.
0:04
These functions are different
than PHP functions in a few ways.
0:08
Arguments of macro are always optional.
0:12
This means that your not
required to define default values
0:16
along with your argument.
0:20
However, you may set a default
value when defining an argument.
0:21
You can also set a default value
later on in your code, but
0:26
they work a little differently.
0:30
Default argument values are defined
using the default filter
0:32
when you're in the macro body.
0:36
If extra positional arguments
are passed to a macro,
0:39
they end up in the special varargs
variable as a list of values.
0:43
But just like with PHP functions,
0:48
macros only know about the variables
that have been passed.
0:51
Let's define a form field macro.
0:55
We'll create a new template.
0:58
Named form.twig.
1:03
And we're going to define a macro, so
1:07
we use our command macro, and
we're going to name this input.
1:10
And then I'll end my macro.
1:19
I'm going to paste it
in a form field group.
1:22
And we'll start adding fields from there.
1:25
You can check the notes for
your own group.
1:27
The most important thing is
the name of our form field, so
1:32
let's add that as the first
argument of our macro.
1:36
We'll call this name.
1:41
Then I'm going to use
the name in a few places.
1:43
First, the name of our
field will just be name.
1:49
The idea of our field that we'll use for
the for
1:54
in the label,
we'll add input and then name.
1:57
So let's add that to the for
as well, input and then name.
2:05
Our label itself is going to use name.
2:11
But I want to add the title filter.
2:15
Finally, our placeholder is going to say,
Enter your, and then name.
2:20
That's all we really need to do.
2:29
But let's add a few more options.
2:32
We'll want to show the user entered value.
2:34
Then if their was an error or some other
problem when the user submitted the form,
2:37
they'll see the value and
they won't have to retype it.
2:42
We'll add value.
2:47
And then here in our field,
We'll add value.
2:51
By default,
twig is escaping our variables.
2:57
But if we want to make extra sure
that this variable is escaped,
3:01
we can add an escape
filter just to be sure.
3:05
We use the shortcode e for escape.
3:10
Twig won't double escape, so
this is going to work just fine.
3:13
We might want to allow a password field.
3:17
So then we will need to be
able to change the type,
3:20
so let's add type as an argument.
3:23
By default we want our type to be text, so
3:29
we're going to add type and then default,
3:33
To text, Default.
3:40
Finally, we have some help text that we
only want to display if the help is set.
3:49
So first,
we need to accept an argument for
3:56
help, and then we're going
to display that help here.
3:59
But I also want to set up a conditional.
4:05
If help is not empty.
4:09
Endif.
4:15
Now let's go to the contact page and
add our form.
4:18
You need to sign up for Treehouse in order to download course files.
Sign up