CraftQuest Articles

Tutorials, tips, and thoughts on Craft CMS, modern web development, and more.

Image

Three Twig Tag Types in Craft CMS

Posted on Jul 22, 2020 by Ryan Irelan

Reading time: 1 minute, 38 seconds

Tem­plat­ing in Craft using Twig can, at first, be a lit­tle con­fus­ing. If you, like me, come from oth­er sys­tems that have a pro­pri­etary tem­plate tag sys­tem, then it might take a lit­tle time to wrap your head around how Craft and Twig work. 

But once we learn about the dif­fer­ent types of tags things will be clear­er and you’ll dis­cov­er the pow­er of using Twig in Craft. This tuto­r­i­al will give you the direc­tion and guid­ance you need to get started.

Let’s jump right in.

There are three tag types in Twig and Craft:

  • Statement/​Logic Tags
  • Out­put Tags
  • Com­ment Tags

You will always use the first two in your Craft tem­plates. The third, com­ment tags, are option­al but a handy way of doc­u­ment­ing any­thing that isn’t obvi­ous by read­ing the code.

Statement/​Logic Tags #

State­ment or log­ic tags use the curly brace plus per­cent sign delim­iter. In Twig and Craft they can come in mul­ti­ple forms. 

Some are just a sin­gle tag, like this Craft-spe­cif­ic Twig tag:

{% requireLogin %}

which you would put at the top of a tem­plate in Craft to require a logged-in state. If a vis­i­tor is not logged in than Craft will auto­mat­i­cal­ly redi­rect them to the log-in page.

Oth­er log­ic tags take para­me­ters, like the redirect tag in Craft:

{% redirect "about/tos" %}

The redirect tag takes one para­me­ter, which is the URL or path to where you want to redi­rect the vis­i­tor. This is a tag spe­cif­ic to Craft but there are some Twig tags you should know, too.

Anoth­er type of tag is one that has an open­ing and clos­ing tag, like the for tag in Craft.


{% for %}
{% endfor %}

The tag pairs have an open­ing tag and a clos­ing tag. The clos­ing tag will typ­i­cal­ly have an end” pre­fix, like endfor, endpaginate, and endblock.

Even the set tag we use to set a vari­able can be used as a tag pair. The sim­ple ver­sion looks like this:

{% set author = "Ryan Irelan" %}

But using a tag pair for set, you can assign a block of text to a vari­able. Here we’re set­ting the vari­able socialLinks to an unordered list of social net­work links:


{% set socialLinks %}
<ul class="social">
    <li class="twitter"><a href="">Twitter</a></li>
    <li class="facebook"><a href="">Facebook</a></li>
    <li class="googleplus"><a href="">Google+</a></li>
</ul>
{% endset %}

Anoth­er exam­ple of a tag pair — and by far your most used tag while writ­ing Twig tem­plate code for Craft — is the for-loop. It’s how you will loop through and dis­play sec­tion entries in your tem­plates and out­put oth­er lists, like categories.

This is a for-loop to dis­play con­tent from an array of blog posts:


{% for entry in craft.entries.section('blog') %}
    {{ entry.body }}
{% endfor %}

It uses the curly brace plus per­cent sign delim­iter for both the open­ing and clos­ing tags of the for-loop. This delim­iter tells Twig that what’s between needs to be exe­cut­ed as a state­ment (in this case a for-loop).

Out­put Tags #

The code with the dou­ble curly braces are out­put tags. They print vari­able con­tents to the screen (i.e. out­put con­tent in your template).

{{ author }}

The author vari­able would out­put my name (because we set it in the pre­vi­ous example).

If you want to use an out­put tag to pass in data to anoth­er tag, like when we set a vari­able in Twig, then you don’t need to use the dou­ble curly braces.

{% set name = author %}

If we print­ed out the val­ue of the name vari­able we just set than it would render:

Ryan Irelan

But out­put tags can gen­er­ate the out­put on the fly and then print it to the screen. How about a lit­tle math?

{{ 4 * 4 }}

This out­put tag will do the mul­ti­pli­ca­tion of 4 and 4 and print out the prod­uct. I’m unsure how prac­ti­cal it is to do math like this in the tem­plate but there you have it.

The Twig doc­u­men­ta­tion calls out that the curly braces are not part of the vari­able itself but instead an indi­ca­tor that the val­ue of the vari­able con­tained with­in should print­ed to the screen.

Com­ment Tags #

This tag type is straight-for­ward but per­fect for adding com­ments to your tem­plates but not have those com­ments ren­der in the page source like HTML com­ments would.

{# Begin logic for sidebar #}

Using a sin­gle open­ing curly brace paired with a pound sign, we can cre­ate the un-ren­dered com­ments. They’ll always be avail­able in your tem­plate file but nev­er ren­dered by Twig.

Any code that is inside the com­ment tag will not be exe­cut­ed by Twig.


{# removing this for now to debug
    {% for entry in entries %}
        {{ entry.body }}
    {% endfor %}
#}

There’s a lot more to tem­plat­ing with Twig in Craft but this intro­duc­tion to three dif­fer­ent tags will get you set off in the right direction. 

© 2018 Mijingo, LLC