Drupal heeft een krachtig systeem voor beeldbeheer dat het mogelijk maakt om afbeeldingsstijlen te maken die verschillende effecten op een afbeelding kunnen toepassen en afgeleiden van de oorspronkelijke afbeelding kunnen genereren.

Veel ontwikkelaars geven er de voorkeur aan om de code van de header/footer in een apart bestand op te slaan en dit bestand vervolgens aan te roepen in page.html.twig.

Proces

Stel dat je het volgende bestand hebt aangemaakt in de map van je thema voor de header:

THEME_NAME/templates/includes/header.html.twig

En nu wil je dit bestand opnemen in:

Veel Twig-sjablonen zullen één of meerdere Attribute-objecten hebben die als variabelen worden doorgegeven. De taak van het Attribute-object is het opslaan van een set HTML-attributen, waarbij het de ontwikkelaar nuttige methodes biedt om met deze data te werken en eenvoudig de attributen af te drukken. Bijvoorbeeld, attribute.addClass('myclass') maakt het eenvoudig om een enkele klasse toe te voegen, zonder je zorgen te maken over de juiste string-concatenatie.

Gewoonlijk zouden attributen in een sjabloon er ongeveer zo uitzien:

Net als in Drupal 7 kun je de uitvoer van bepaalde HTML beïnvloeden met behulp van preprocess-functies. Bijvoorbeeld, als je een klasse aan een menu wilt toevoegen en je verkiest dit op PHP-niveau te doen, kun je dat doen. Dit is een goede manier om de markup te wijzigen die betrekking heeft op een thema, maar als je markup wilt maken die niet afhankelijk is van het thema, is het beter om een eigen module te schrijven.

(Opmerking: voor documentatiedoeleinden is hier "mytheme" de machinenaam van je thema; bijvoorbeeld "bartik" is de machinenaam van dat thema.)

In Drupal 8 is er geen gebruikersinterface om breakpoints te bewerken. Omdat breakpoints gedefinieerd zijn in configuratiebestanden, is het ook niet mogelijk om een gebruikersinterface hiervoor te voorzien in contrib.

In het administratiegedeelte van Drupal heeft elk thema zijn eigen instellingenpagina op admin/Appearance/Settings/themeName. Deze pagina bevat een formulier met standaardinstellingen zoals “Logo-instellingen” en “Favicon-instellingen”.

Dit is een lijst van enkele van de meest opvallende wijzigingen in Drupal 8 die invloed hebben op theming.

Wijzigingen in de kernklassen

Vereenvoudigde namen van hulpsklassen "element-x"

Drupal 7 introduceerde een aantal nieuwe klassen: element-hidden, element-invisible en element-focusable. Het was lastig precies te begrijpen wat deze klassen deden op basis van hun namen, daarom zijn de klassen hernoemd. De nieuwe namen moeten het begrip van de klassen vergemakkelijken en beter aansluiten bij HTML 5 Boilerplate, een populaire HTML 5-omgeving.

Dit document werd gebruikt tijdens het grootste deel van het Twig-conversieproces voor Drupal 8 en kan ook nuttig voor je zijn om je eigen thema’s en modules bij te werken voor gebruik van de Twig template-engine in Drupal 8.

Opmerking: al het werk met Twig gebeurt nu in de issue queue van de Drupal core. Gebruik alleen de Twig-conversie sandbox om eerder geconverteerde templates en functies terug te vinden.

Het gebruik van automatiseringstools vereenvoudigt het proces van themabouw. Hier gaan we gulp js gebruiken om een automatiseringstool te maken voor een aangepast thema.

Werken met Gulp 3.x en Node 10.x en lager

Stappen:

1. Installatie van Node.js
Download en installeer de laatste versie van NodeJS van nodejs.org. Het installatieproces kan verschillen afhankelijk van je besturingssysteem.

2. Installeer Gulp