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

Well done!

You have completed Templating with Twig!

Sign up for Treehouse Back to Library

Custom Functions with Macros

4:22 with Alena Holligan

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 %}

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

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up