Toepassing Twigs

Op onze pagina over de werkmaterialen maken we enkele blokken aan die vervolgens linken naar verschillende pagina's. De achtergrondkleur van elk blok gaan we zonder code toevoegen. We gebruiken hiervoor een Twig-field. Met dank aan Dirk Bernaert.

1. Installeer eerst de module Color Field
2. Je hebt ook de twig modules nodig:
   1. Twig Field
   2. Twig Tweak
3. Maak een nieuw inhoudstype aan: In de kijker
4. Voeg drie velden toe aan dit inhoudstype:
   1. Achtergrondkleur (veldtype: kleur)
   2. Tekstkleur (veldtype: kleur)
   3. Twiggie (veldtype: twig template)
5. Voeg een standaardwaarde toe bij het veld Twiggie. Hierin schrijven we een stukje code waarin we bepalen dat de body de gekozen achtergrondkleur krijgt en de gekozen tekstkleur:

6. Stel beide kleurvelden zodanig dat dat deze gebruik maken van Color HTML5. Dit bij de formulierweergave.
7. Pas het twigveld verder aan zodat:
   1. De hoeken worden afgerond
   2. Een schaduw aanwezig is
   3. De tekst 2 keer zo groot wordt getoond
8. Voeg nu vier keer inhoud toe van het type in de kijker, gebruik voor de kleuren de volgende website. Deze maakt voor u de correcte kleurenschema's.: https://color.adobe.com/nl/create/color-wheel
   1. Workshop metsen
   2. Onze promoties
   3. De correcte zaagtechniek
   4. Ons bedrijf

Toepassing Flex

Van onze net toegevoegde inhoud maken we een blok dat op de pagina getoond zal worden. Om dit deftig weer te geven gebruiken we de weergave Flex. Dit is ons door Jurgen in de vorige les uitgelegd.

1. Maak een overzicht aan van het inhoudstype in de kijker
2. Maak een blok
3. Plaats op de juiste niveaus reeds een CSS-klasse die je straks kan aanspreken:

       

4. Geef het blok nu eerst een plaats op de pagina van de werkmaterialen. Ik steek deze in de content suffix, kies zelf maar waar je deze juist zet.
5. De css van de parent heb ik in de injector geplaatst. Deze zorgt dat het geheel als flex wordt weergegeven.
6. De css van de objecten binnen de parent (child) heb ik toegepast in het twig-field. Dit als experiment. Blijkt dat dit perfect werkt. Maar als je iets wenst aan te passen, dan moet je dat in elke node gaan instellen. Hier kan je dus kiezen. De CSS in de injector plaatsen of in het twigfield. Waar moet de opmaak aan voldoen:
   1. Schaduw
   2. Grotere tekst
   3. Tekst gecentreerd, zowel verticaal als horizontaal. Voor het verticale heb ik ook flex gebruikt. Flex toegepast op één item.
   4. De breedte van de blokjes is 250px
   5. De hoogte van de blokjes is 150px
   6. De regelafstand is 30pt

Extra uitleg over de gebruikte code:

Extra

Op de pagina werkmaterialen hebben we nu vier blokken. Deze linken nog naar niets. We leggen een link en laten telkens iets anders zien, al dan niet bij het haar getrokken.

Ons bedrijf

1. Wanneer je klikt op dit blokje, dan verschijnt een pagina met een aantal foto's (DEZE FOTO'S)
2. De foto's worden mooi naast elkaar getoond en zullen ook mooi verspringen als het scherm kleiner of groter is. Gebruik hier dus ook Flex
3. Pas een beetje CSS toe, dan is het ook mooi om naar te kijken.

De correcte zaagtechniek

Simpel maar handig. Wanneer je hierop klikt, dan krijg je een filmpje te zien waarin tips gegeven worden over zagen. Het filmpje komt van Youtube.

Module hiervoor nodig: Video Embed Field

Onze promoties

1. Hiervoor voegen we eerst wat inhoud (DOWNLOAD HIER) toe. Steek deze inhoud ook in een nieuw inhoudstype. Let op. In dat inhoudstype berekenen we meteen de korting in een twig-field.

2. In het twig-field berekenen we de totale prijs, inclusief de korting dus. Misschien verstandig om dit als standaardwaarde in te stellen:

3. Voeg nu de nodige inhoud toe. Deze kan je terugvinden in de gedownloade bestanden in dit hoofdstuk (zie hoger).
4. We maken van het geheel een overzicht aan. Uiteraard is dit overzicht een onopgemaakte lijst van velden die vervolgens als Flex wordt weergegeven. Bekijk hieronder een screenshot van de gebruikte CSS.

5. Extra in deze oefening. Wanneer de korting meer dan 50% bedraagt dan verschijnt de afbeelding 'Mega Deal'. Ook deze is te vinden in de gedownloade bestanden. 
6. Voeg een veld toe 'aangepaste tekst'. In het tekstgedeelte ga je een twig invoeren:

Opmerking

Het is ook perfect mogelijk om de korting te berekenen in de view zelf. Je gaat hiervoor ook een nieuw veld 'aangepaste tekst' toevoegen. Vervolgens werk je met de data uit de velden korting en adviesprijs. Echter is het belangrijk om deze velden als onopgemaakt weer te geven, anders komen er te veel zaken mee waar het twig-veld geen weg mee kan.

Daarna is het ook belangrijk om de eventuele spaties te verwijderen via TRIM

Workshop metsen

Deze mogen jullie volledig zelf invullen. Wees creatief.