A template engine enables you to use static template files in your features. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML (or other types) content. This approach makes it easier to design an HTML page.

Flopress uses the excelent TWIG engine to generate html.

Create and use a new template in your flow scripts

Click the Add button and then select template. Set the name and save it.
Select your new template and start adding HTML code.
Once it’s done, select your flow script and drag the Template item directly into the script viewport.
Connect the output connector to the input connector of your function.

To render dynamic data, you can connect the template arguments connector to an array, which provides the dynamic values to be evaluated.

Use functions inside template

WordPress functions

You can use non-executable functions directly into your template. Toggle the right pane and simply drop the wanted function in the HTML code. Alternatively, you can put your cursor at the desired place and click on to the function you want to insert.

It inserts the fp_function which are able to safely evaluate WordPress functions.
The first argument is the function name, the second argument is an array containing the parameters.

{{fp_function('get_permalink', [resource.ID])}}

Set

Inside code blocks you can also assign values to variables. Assignments use the set tag and can have multiple targets.
After the set call, the foo variable is available in the template like any other ones.

{% set title = 'My title' %}
{{ title }}

Will output :

My title

Loop

Loop over each item in a sequence. For example, to display a list of users.

{% for resource in resources %}
   <li>
      <a href="{{fp_function('get_permalink', [resource.ID])}}">
         {{resource.post_title}}
      </a>
   </li>
{% endfor %}

If, else, elseif, endif

The if statement in Twig is comparable with the if statements of PHP. In the simplest form you can use it to test if an expression evaluates to true

{% if online == false %}
    <p>Our website is in maintenance mode. Please, come back later.</p>
{% endif %}

{% if product.stock > 10 %}
   Available
{% elseif product.stock > 0 %}
   Only {{ product.stock }} left!
{% else %}
   Sold-out!
{% endif %}

Dump

For debugging, you can uses the dump function.

{{ dump(post) }}