Twig filters

Een variabele kun je bewerken met een filter. Een filter wordt gebruikt met een | tussen de variabele en het filter. Je kan meerdere filters achter elkaar gebruiken om tot de gewenste waarde van de variabele te komen. De uitkomst van het ene filter wordt doorgegeven aan het volgende filter. Hierdoor kun je dus meerdere filters achterelkaar plakken. In onderstaand voorbeeld maken we van een array een string, gescheiden door '-', die we vervolgens naar hoofdletters zetten.

1{% set foo = ['foo', 'bar'] %}
2{{ foo|join(' - ')|upper }}
3{# result: 'FOO - BAR' #}

|t (translate string)

Om tekst vertaalbaar te maken binnen een template kun |t achter de tekst plakken. Bijvoorbeeld een toevoegen aan winkelwagen button kun je als volgt vertaalbaar maken.

1<button class="btn btn-success">
2  {{"Toevoegen aan winkelwagen"|t}}
3</button>

Er bestaat in onze editor ook een shortcut om deze formattering op een string toe te voegen. Selecteer de tekst die je vertaalbaar wil maken en druk tegelijk ALT+T in (mac: OPTION+T).

|keys

twig docs: https://twig.symfony.com/doc/3.x/filters/keys.html

Wanneer je op zoek bent naar data in een dump is het soms erg onoverzichtelijk om door alle geneste data te moeten scrollen. Daarom is het filter |keys een uitkomst.

Als je bijvoorbeeld alle keys van het tekstblokken object wil bekijken kun je het volgende doen.

1{{dump(blocks|keys)}}

Je zal nu een array zien met alleen de keys van alle entries binnen blocks.

|date

twig docs: https://twig.symfony.com/doc/3.x/filters/date.html

|date_modify

twig docs: https://twig.symfony.com/doc/3.x/filters/date_modify.html

|upper

twig docs: https://twig.symfony.com/doc/3.x/filters/lower.html

|lower

twig docs: https://twig.symfony.com/doc/3.x/filters/upper.html

|first

twig docs: https://twig.symfony.com/doc/3.x/filters/first.html

|last

twig docs: https://twig.symfony.com/doc/3.x/filters/last.html

|length

twig docs: https://twig.symfony.com/doc/3.x/filters/length.html

|merge

twig docs: https://twig.symfony.com/doc/3.x/filters/merge.html

|replace

twig docs: https://twig.symfony.com/doc/3.x/filters/replace.html

Met replace kun je een gedeelte tekst vervangen voor een andere tekst. Door middel van een object waarin de key is wat je wil vervangen en de waarde wat je er wil van maken kun je dit gebruiken.

Parameters

Gebruik

1// input: Blauw wit vest ([label])
2
3{{ product.name|replace({ "[label]": "Uitverkocht" }) }}
4
5// output: Blauw wit vest (uitverkocht)

|price

Het prijs filter voegt een opmaak toe aan de variabele waarop je hem gebruikt. Hierdoor krijg je altijd de juiste opbouw en het correcte valuta symbool.

Parameters

Gebruik

Standaard

1{{ product.price|price }}

Zonder valuta symbool

1{{ product.price|price(true, '') }}

|image

Het image filter is een hulpstuk wat voor Quicq gemaakt is. Dit transformeert de afbeelding URL uit de database naar een Quicq URL. Aan deze functie kun je ook de Quicq URL-parameters meegeven. Let er wel op dat het gebruik van dit filter in combinatie met Quicq er voor zorgt dat altijd de full size afbeelding wordt gebruikt. Wil je dus van een thumbnail van 400x400 weer een 400x400 afbeelding maken via Quicq, dan zul je dus de parameters hiervoor moeten toevoegen.

Parameters

De parameters die je kan gebruiken in dit filter zijn gelijk aan de omschreven parameters in: https://afosto.com/nl/docs/apps/quicq/afbeeldingen-bewerken-via-url/. Je geeft deze als object mee aan het filter.

Gebruik

standaard

1{{ product.image_default.filename|image }}

Met parameters

1{{ product.image_default.thumbs.400|image({ "w": 400, "h": 400, "q": 20, "b": 3 }) }}