berekeningen

voorwaardelijk

twig

https://twig.symfony.com/doc/3.x/

https://www.drupal.org/project/twig_field

https://www.drupal.org/project/twig_tweak

Inleiding

Wat zijn Twigs?

To twig (Eng -straattaal-: get wise, understand something)

Onbekend? Je hebt er reeds gebruik van gemaakt... Bij het herschrijven een view kan je variabelen tussen {{ }} gebruiken. Dit zijn Twigs.

Twig is een simpele programmeertaal die door Drupal standaard wordt voorzien. Twig is een uitbreiding van de Symfony PHP taal, die Drupal nu gebruikt. De pagina die je maakt heet een 'template'. Die levert dus verschillende webpagina's op al naar gelang de variabelen.

Op https://twig.symfony.com/doc/3.x/ zie je een overzicht van de mogelijkheden. We zullen er slechts enkele van gebruiken. Met een paar instructies kom je reeds heel ver.

Zoals altijd gaan we dit al doende aanleren...

Beginsituatie

We maken een taxonomie woordenlijst aan met de naam 'Categorie'. Daarna maken we een inhoudstype aan 'Bekende personen', met een titelveld, body, geboortedatum, sterfdatum, gender (lijst met Man, Vrouw, X) en categorie (taxonomie, meervoudig). Het categorieveld zal gebruikt worden om weer te geven waarvoor deze mensen bekend zijn (sport, politiek, wetenschap,...)

Voeg nu een paar personen toe als inhoud. Maak dat er overleden en nog levende personen in voorkomen. Maak ook dat er zowel vrouwen als mannen in voorkomen.

Maak een tabelview aan met de velden van het inhoudstype. Geef de data weer volgens ons systeem. Voorzie een menulink naar de view.

Oefening

Twigs in een view

Twigs als veld in een view

We gaan het genderveld herschrijven

Met dit als resultaat. Je heb gebruik gemaakt van Twigs. Proficiat...

Je kunt Twigs combineren met HTML. Hier zetten we het geslacht in het vet.

Opmerking: als je wilt commentaar toevoegen in je script... {# commentaar #}

Tot hiertoe niets nieuws onder de zon voor een doorwinterde Drupaller...

Voorwaardelijke Twigs

Interessanter wordt het als we voorwaarden kunnen gebruiken.. Voorwaarden if... else...endif staan tussen {% %}. Geen dubbele accolades hier! Dubbele accolades worden gebruikt om velden te tonen. Het == (dubbel) teken wordt gebruikt om na te gaan of de waarden gelijk zijn. Zie ook !=, >=,<=,>,<. Het enkel gelijkheidsteken wordt gebruikt om een waarde toe te kennen. vb x = 5

Deze werkwijze vervangt modules zoals views conditional.

{% if field_gender == "Vrouw" %}
Mevrouw {{ title }}
{% else %}
Meneer {{ title }}
{% endif %}

Opmerking: er bestaan ook ingebouwde variabelen die je kunt combineren met if. Zo kan je testen of een variabele empty (leeg), even (even) of odd (oneven) is: {% if aantal is odd %}

Opmerking: je kunt ook CSS aanbrengen, desnoods voorwaardelijk.

Twigs als variabele

We gaan de leeftijd berekenen van de personen.. dit is het huidig jaar - geboortejaar. Of de leeftijd bij overlijden. We gaan dan het sterfjaar - geboortejaar doen. Dat dit niet altijd klopt, weet ik.. Als je sterft voor je verjaardag telt dit jaar niet mee... Straks lossen we dit op.

We beginnen met het geboortejaar te zoeken. Maak een nieuw veld aan met de naam 'Leeftijd zonder correctie' en vul onderstaande code in:

{% set geboortejaar = field_geboortedatum|date("Y") %}
{{ geboortejaar }}

Je kunt dus een variabele instellen met de instructie set, weer tussen {% %}. Je kunt ook tegelijkertijd filters toepassen. Deze worden met een | teken gescheiden. Hier filter ik de datum op zijn jaartal. Er zijn heel wat twig filters. Voor tekst heb je bijvoorbeeld trim, upper, lower, ... vb {{ 'welcome'|upper }}. Je kunt ook sorteren met sort en rsort = sort ('desc'). Drupal heeft ook een ingebouwde instructie |t . Als je dit achter een tekstvariablele zet, dan wordt deze tekst vertaalbaar en kan je dit via de taalinstellingen vertalen. {{ Welkom|t }} is dus vertaalbaar.

We gaan nu ook de sterfdatum opzoeken en we berekenen de leeftijd. Vergeet dus alle modules die nodig zijn om te rekenen in views.. Met twigs kan je alle bewerkingen uitvoeren.

{% set geboortejaar = field_geboortedatum|date("Y") %}
{{ geboortejaar }}
{% set sterfjaar = field_sterfdatum|date("Y") %}
{{ sterfjaar }}

leeftijd: {{sterfjaar - geboortejaar }} jaar

Er is ook iets eigenaardig.. De nog levende mensen krijgen het huidig jaar als sterfdatum. Straf. Dit komt omdat twig bij een leeg datumveld, automatisch de huidige datum gebruikt. Als je dit niet betrouwt dan kan je altijd nog {% set huidigjaar= "now"|date("Y") %} gebruiken. now is de ingebouwde variabele die de huidige datum weergeeft.

We bouwen dus een correctie in. Merk op dat ik met md (maand en dag) een rangorde kan creëren.

{% if (geboorte_maand_en_dag > sterf_maand_en_dag) %}
{{ sterfjaar- geboortejaar - 1}} jaar
{% else %}
{{ sterfjaar- geboortejaar }} jaar
{% endif %}

De correcte leeftijden... merk de verschillen op met de niet gecorrigeerde leeftijden.

We gaan nog verfijnen. We willen een symbool bij de overledenen ✝ Het stelt een kruisbeeld voor. (https://www.toptal.com/designers/htmlarrows/symbols/latin-cross/)

{% set geboortejaar = field_geboortedatum|date("Y") %}
{% set sterfjaar = field_sterfdatum|date("Y") %}
{% set geboorte_maand_en_dag= field_geboortedatum|date("md") %}
{% set sterf_maand_en_dag= field_sterfdatum|date("md") %}
{% if field_sterfdatum is empty %}
{% if (geboorte_maand_en_dag > sterf_maand_en_dag) %}
{{ sterfjaar- geboortejaar - 1}} jaar
{% else %}
{{ sterfjaar- geboortejaar }} jaar
{% endif %}
{% else %}
{% if (geboorte_maand_en_dag > sterf_maand_en_dag) %}
✝ {{ sterfjaar- geboortejaar - 1}} jaar
{% else %}
✝{{ sterfjaar- geboortejaar }} jaar
{% endif %}
{% endif %}

Opmerking: Je kunt ook filters gebruiken in combinatie met set. Deze instructie geeft het aantal afbeeldingen weer in het afbeeldingsveld van de node: {% set aantal = node.field_image|length %}

Twigs en afbeeldingen

Tenslotte gaan we ook een twig gebruiken met een afbeelding. Als het toevallig iemand zijn verjaardag is gaan we een afbeelding laten verschijnen.. Maak dat er iemand is die verjaart vandaag... We maken gretig gebruik van de HTML die een afbeelding oproept. Ik had daarvoor reeds een node aangemaakt met deze afbeelding. In de broncode kan je dan de url achterhalen. Opgepast. Als je de node later verwijdert kan het voorkomen dat Drupal ook de ongebruikte afbeeldingen verwijdert. Dit is een Drupal instelling. Kijk ook eens naar de cache instellingen van de view. Het is mogelijk dat de afbeelding niet correct wordt getoond omdat de cache aanstaat.

{% set huidig_maand_en_dag = "now"|date("md") %}
{% set geboorte_maand_en_dag = field_geboortedatum|date("md") %}
{% if huidig_maand_en_dag == geboorte_maand_en_dag %}
<img width="75" src="/sites/default/files/inline-images/verjaardag.jpg">
{% endif %}

Je zou nu kunnen met een EVA deze afbeelding ook laten verschijnen in je inhoudstype, contextueel gefilterd met de ID van de node. We hebben echter een betere oplossing...

We hebben kennis gemaakt met Twigs. We kunnen ze gebruiken bij views bij het herschrijven van inhoud en bij tekstvelden. We hebben leren werken met constanten en voorwaarden. Is het mogelijk om ook twigs te gebruiken in een inhoudstype om ook daar inhoud te herschrijven? Yep...

Twigs in een inhoudstype

Installeer de modules Twig Field (https://www.drupal.org/project/twig_field) en ook Twig Tweak (https://www.drupal.org/project/twig_tweak). De eerste module stelt je in staat om hetzelfde te doen als bij views... Het herschrijven van inhoud. De tweede module vergoot de mogelijkheden en gebruiksvriendelijkheid.

Voeg zo'n Twigveld toe aan je inhoudstype. Aangezien we dit pas nu doen, zal er geen standaardinhoud meekomen. We gaan dus in een node, code moeten schrijven om dit veld te gebruiken. We gebruiken de code, nodig om bij een verjaardag een afbeelding te tonen. Kijk eens hoe je in een inhoudstype de veldwaarde aanspreekt? (node.veldnaam.value) Al de rest is hetzelfde...

{% set geboorte_maand_en_dag= node.field_geboortedatum.value|date("md") %}
{% set huidig_maand_en_dag= "now"|date("md") %}
{% if (geboorte_maand_en_dag == huidig_maand_en_dag) %}
<img height="76" src="/sites/default/files/inline-images/felicitaties.png" width="58">
{% endif %}

Bij een view kon je enkel maar de velden gebruiken die boven het herschrijfveld stonden. Hier is dit niet nodig. Je spreekt elke veldwaarde aan waar en wanneer je wilt.

Er is meer... je kunt eigenlijk alle Drupal inhoud gebruiken als variabele. Deze twig tovert bijvoorbeeld een volledig overzicht tevoorschijn als onderdeel van je node: {{ drupal_view('beroemdheden', 'page_1') }}. De syntax is logisch. ( = De machinenaam van de view en de weergave ervan). Je kunt dit ook met een EVA module, maar hier kan je per node kiezen of je een view wilt en zelfs andere views kiezen. Vergeet ook niet dat je voorwaarden kunt instellen. Zo kan je in een webshop al of niet verwijzen naar gelijkaardige artikels, afhankelijk van het artikel dat nu wordt bekeken.

Merk op dat alle modules nodig om berekeningen uit te voeren, alsook alle voorwaardelijke velden hier kunnen vervangen worden door deze twigs.

Twigs in een lus

Bij meervoudige velden kan je lussen gebruiken in Twigs. Sommige bekende personen zijn ingedeeld bij mij in meerdere categorieën.

Ik kan dezelfde waarden in een lus tonen.

{% for tag in node.field_categorie %}
{{ tag.entity.name.value }}
{% endfor %}

Met {% for %} en {% endfor %} maak je een lus. Deze lus word doorlopen zolang er inhoud is. Telkens wordt de variabele met de naam 'tag' gevuld met de nieuwe term. Tag heb ik zelf gekozen, het kon evengoed x of categorieterm zijn.

De huidige code doet hetzelfde als de weergave van het veld en is daarom geen meerwaarde. Tenzij we iets ander beogen natuurlijk. Ik wil de saaie categorienamen vervangen door afbeeldingen. Ik maak daarom in de taxonomie woordenlijst een afbeeldingsveld aan en ik zorg dat elke term een bijhorende afbeelding heeft.

We gaan dus nu leren hoe we met twigs een veld kunnen aanspreken in een referentieveld ( vb andere node of woordenlijst). Merk op hoe je zo'n referentieveld aanspreekt. Voor afbeeldingen bestaat er ook een twigfilter die gebruikt maakt van de afbeeldingsstijlen. Hier gebruik ik thumbnail. Ik gebruik ook de alt en stel zo ook de titel van de afbeelding in.

{% for tag in node.field_categorie %}
<img src="{{ tag.entity.field_categorie_afbeelding.entity.uri.value | image_style('thumbnail') }}"
alt="{{ tag.entity.field_categorie_afbeelding.alt }}"
title="{{tag.entity.field_categorie_afbeelding.alt}}" />
{% endfor %}

Dit had ook gekund.. Hiermee haal je de url op...

Twig filter voor ingelogden

{% if logged_in %}
{{ node.body.value| raw }}
{% else %}
Je moet ingelogd zijn om deze inhoud te bekijken
{% endif %}

Deze code toont voor aangemelden de body, anders krijg je een melding. De |raw filter toont de tekst in HTML. Standaard wordt dit niet gedaan... Deze methode kan dus makkelijk gebruikt worden om bijvoorbeeld groothandelsprijzen en/of bijkomende informatie te tonen. Zeer praktisch. Het oorspronkelijke veld moet wel verborgen staan natuurlijk...

Twigs in combinatie met HTML

Stel dat je van een lijst met gegevens een keuzelijstje wilt maken...

Onderstaande code gebruikt de HTML (select en option) om een dropdown te creëren met de taxonomietermen uit de node.

<select onchange="location = this.value;">
<option value="">Categorie</option>
{% for tag in node.field_categorie %}
<option value={{ path('entity.taxonomy_term.canonical', {'taxonomy_term': tag.entity.tid.value}) }}>{{ tag.entity.name.value}}</option>
{% endfor %}
</select>

We doorlopen alle termen. Merk op dat de link naar de term in de value waarde kan ondergebracht worden. Het pad naar deze term id is complex, maar kan in een paar seconden vanop het internet gevonden worden... Gewoon kopiëren en plakken..

Bij klikken kom je op de term terecht. Je zou dit nog kunnen verfijnen door het aantal termen eerst op te vragen en dan al dan niet een keuzelijst gebruiken of niet. Een keuzelijst met één item is een beetje stom hé...

Een tweede voorbeeld van hoe je Twigs en HTML combineert..

We maken een afbeeldingsveld in ons inhoudtype. We gaan de afbeeldingen op ongeveer de helft van de breedte weergeven, maar we willen bij een onpaar aantal afbeeldingen geen 'wezen'. Dit is een afbeelding die alleen staat in de rij. Als het aantal onpaar is, gaan we de laatste rij, drie afbeeldingen tonen. Zo blijft de voorstelling altijd aantrekkelijk..

Bekijk aandachtig de code.. We stellen de breedte in op 48% (rekening houdend met mogelijke marges van de afbeeldingen) en stellen een teller in op 1. We vragen het totaal aantal afbeeldingen op en kijken of dit even of oneven (odd) is. De laatste drie afbeeldingen worden dan desnoods in 32 % getoond.

{% set breedte = 48 %}
{% set teller = 1 %}
{% set aantal = node.field_image|length %}

{% for afbeelding in node.field_image %}
{% if aantal is odd %}
{% if aantal-3 < teller %}
{% set breedte = 32 %}
{% endif %}
{% endif %}
<img src="{{ file_url(afbeelding.entity.uri.value|image_style('vierkant')) }}" width="{{ breedte }}%" />
{% set teller = teller + 1 %}
{% endfor %}

Twigs en views

Door de installatie van de Twig Tweak module kunnen we ook views aanroepen met Twigs. In één regel roep je de view, de weergave (vb page_1) en desnoods contextuele filters op.

Zo tovert bovenstaand overzicht de view tel_taxonomietermen waarvan page_1 op, gefilterd op de term Geneeskunde. Geneeskunde is hier de contextuele filter. We kunnen die ook als variabele ingeven. Een voorbeeld:

{% for tag in node.field_categorie %}
{{drupal_view('tel_taxonomietermen', 'page_1', tag.entity.tid.value)}}
{% endfor %}

Ik doorloop hier de waarden in een taxonomieveld van een node en voeg telkens een view in. Deze view heeft het voordeel dat ook het aantal van de taxonomiewaarden wordt getoond. Een soort teller. We zien dat ik een contextuele filter zet op de term ID (tid). Dit is beter dan op de naam. Contextuele filters op naam hebben het nadeel dat er soms problemen zijn als de namen speciale tekens en accenten bevatten. Met een ID heb je nooit problemen.

De bekende persoon heeft hier als categorietermen zowel Wetenschap als Geneeskunde en we zien nu hoeveel keer deze termen in het algemeen in gebruik zijn.

De view ziet er dan zo uit.

Maak een view pagina aan met alle termen van betrokken woordenlijst.

Voeg een relatie toe om te kijken welke nodes gebruik maken van deze termen.

Zet op aggregatie om het aantal keer weer te geven dat de term gebruikt wordt.

Voeg de node id toe als veld.

De term moet op groeperen staan, de ID als aantal.

We krijgen nu zo iets:

We willen dit zo...

Daarom herschrijven we de weergave met de gebruikelijke twigvelden en verbergen het eerste veld.

Nu moeten we nog een contextuele filter leggen op de term id

We stellen dit verder in.

In combinatie met de script in het veld, wordt nu de term in de node herschreven, maar wel met de totalen erbij. Dit is maar een simpel voorbeeld van de combinatie tussen views en de twig in een node veld. Als je artikels hebt in een webshop kan je ook op deze manier aan stockbeheer doen en desnoods melding laten verschijnen zoals 'niet beschikbaar', 'laatste stuks',..

Twigs in combinatie met bestaande scripts

Het herschrijven van inhoud, zowel bij nodes als views levert ons onbeperkte mogelijkheden op. Zo zijn er talrijke scripts voorhanden die (nog) niet in Drupal modules werden gegoten. Je moet eens Googelen met de zoekterm 'image gallery' en vertel mij hoeveel mogelijkheden er zijn...

Ik neem er eentje als voorbeeld: https://www.cssscript.com/photo-grid-gallery/ Een voorstelling van afbeeldingen in een rooster, dat bij klikken een vergrote voorstelling weergeeft.

Ik neem hier klakkeloos hun instructies over...

How to use it:

Link to the stylesheet grid-gallery.min.css and JavaScript grid-gallery.min.js.

<link rel="stylesheet" href="css/grid-gallery.min.css">
<script src="js/grid-gallery.min.js"></script>

Add images to the grid gallery.

<div class="gg-container">
  <div class="gg-box">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>
  <div class="gg-box"> 
    <img src="4.jpg">
    <img src="5.jpg">
    <img src="6.jpg">
  </div>
  ... more galleries here ... 
</div>

That’s it. Override the default settings to config the plugin.

Er wordt dus gebruik gemaakt van een CSS en een Javascript bestand. De CSS wordt standaard in het begin van de code ingeladen, de Javascript op het einde. Desgevallend kan je gebruik maken van de Asset Injector om dit te doen. Als de scripts tamelijk klein zijn, durf ik die gewoon in de Twig aan te brengen. De bestanden kan je via de download van de script bekomen.

Voor de rest zien we dat de afbeeldingen in een div zitten met de naam gg-container, met per rooster een div met klasse gg-box.

De afbeeldingen moeten we dus enkel herschrijven naar deze script.

{% for afbeelding in node.field_image %}
<img src="{{ file_url(afbeelding.entity.uri.value) }}"/>
{% endfor %}

</div>
</div>

Met de CSS en de JS erbij bekom je dit:

{% for afbeelding in node.field_image %}
<img src="{{ file_url(afbeelding.entity.uri.value) }}"/>
{% endfor %}

</div>
</div>
<script>
const root=document.querySelector("body, html");const container=document.querySelector(".gg-container");const images=document.querySelectorAll(".gg-box > img");const l=images.length;for(var i=0;i<l;i++){images[i].addEventListener("click",function(h){var f=this;const c=f.parentElement,a=document.createElement("div");a.id="gg-screen";container.prepend(a);if(c.hasAttribute("data-theme")){a.setAttribute("data-theme","dark")}var p=f.src;root.style.overflow="hidden";a.innerHTML='<div class="gg-image"></div><div class="gg-close gg-btn">&times</div><div class="gg-next gg-btn">→</div><div class="gg-prev gg-btn">←</div>';const k=images[0].src,q=images[l-1].src;const o=document.querySelector(".gg-image"),e=document.querySelector(".gg-prev"),b=document.querySelector(".gg-next"),r=document.querySelector(".gg-close");o.innerHTML='<img src="'+p+'">';if(l>1){if(p==k){e.hidden=true;var n=false;var g=f.nextElementSibling}else{if(p==q){b.hidden=true;var g=false;var n=f.previousElementSibling}else{var n=f.previousElementSibling;var g=f.nextElementSibling}}}else{e.hidden=true;b.hidden=true}a.addEventListener("click",function(s){if(s.target==this||s.target==r){m()}});root.addEventListener("keydown",function(s){if(s.keyCode==37||s.keyCode==38){d()}if(s.keyCode==39||s.keyCode==40){j()}if(s.keyCode==27){m()}});e.addEventListener("click",d);b.addEventListener("click",j);function d(){n=f.previousElementSibling;o.innerHTML='<img src="'+n.src+'">';f=f.previousElementSibling;var s=document.querySelector(".gg-image > img").src;b.hidden=false;e.hidden=s===k}function j(){g=f.nextElementSibling;o.innerHTML='<img src="'+g.src+'">';f=f.nextElementSibling;var s=document.querySelector(".gg-image > img").src;e.hidden=false;b.hidden=s===q}function m(){root.style.overflow="auto";a.remove()}})}function gridGallery(a){if(a.selector){selector=document.querySelector(a.selector)}if(a.darkMode){selector.setAttribute("data-theme","dark")}if(a.layout=="horizontal"||a.layout=="square"){selector.setAttribute("data-layout",a.layout)}if(a.gaplength){selector.style.setProperty("--gap-length",a.gaplength+"px")}if(a.rowHeight){selector.style.setProperty("--row-height",a.rowHeight+"px")}if(a.columnWidth){selector.style.setProperty("--column-width",a.columnWidth+"px")}};
</script>

De makers van de script geven nog mee dat je makkelijk d einstellingen kunt wijzigen. Zo kan je in hun CCS de breedte en hoogte van de roostercellen wijzigen.

Het resultaat is een responsive rooster.

Bij klikken kom je op de ware grootte van de afbeeldingen met navigatieknoppen.

Slot

In deze kennismaking hebben we eenvoudige Twigs leren gebruiken. Twigs zijn één van de meest onderschatte tools in Drupal. Maak er meer gebruik van.

Dit is slechts een kennismaking.... Je kunt ook met php in een template pagina zelf twig variabelen definiëren die de dan probleemloos als twig kunt gebruiken. Zo kan je alle nodes van een inhoudstype als variabele {{nodes}} definiëren, die je dan met een lus doorloopt. Omdat ik gezworen heb om geen php te gebruiken in deze uiteenzetting, is dit niet aan bod gekomen.

Opdracht

De Fotorama module voor Drupal 9 is niet optimaal. Je kunt er bijvoorbeeld geen automatische slideshow mee instellen. Gebruik Fotorama zonder de module te installeren en toon een automatische slideshow: https://fotorama.io/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<div class="fotorama" data-nav="thumbs" data-autoplay="true">
{% for afbeelding in node.field_image %}
<img src="{{ file_url(afbeelding.entity.uri.value|image_style('vierkant')) }}"/>
{% endfor %}
</div>

Welkom

Module bespekingen

Algemene Besprekingen

Ervaring delen

Nuttige links

Zoeken

Facebook

Een kennismaking met Twigs