Onze website op Drupal 8 beta: The making of

Dec 2014
-
Marieke Hollevoet

De laatste weken van het jaar en een leuke uitdaging: onze eigen site ontwikkelen met Drupal 8. Even wennen, maar na wat graaf -en zoekwerk kwamen we tot een bruikbare setup in Beta2. Algemeen gezien liet Drupal 8 ons in ieder geval een positieve indruk na. Hier delen we onze ervaring van developer tot developer. Geniet en deel!

Drupal 8 is here!

 

De basis setup ging vrij vlug (met af en toe een wit scherm - dat blijkbaar magisch verdwijnt wanneer je je pagina refresht).

Het samenklikken van content types, views,... lijkt eigenlijk enorm op Drupal 7. Maar heeft wel een leuke opgefriste (responsive) interface!

Een aantal zaken kregen een andere naam of plaats, maar niets wat een beetje Googlen niet kan fixen. Een post die op een leuke manier de basics van D8 uitlegt en die we zeker kunnen aanraden is deze van Matt Korostoff

Echte uitdagingen doken op wanneer we het design begonnen te implementeren. Enkele waarnemingen:

Panels

Panels (of alternatieven) zijn er nog niet. Dus moesten we een stap terug naar het gebruik van Drupal regions en blocks.

Display Suite

Display Suite werkt nog niet. Gewoontes zijn er om te doorbreken zullen we maar zeggen en dus “back to the roots”. Terug naar ongelofelijk veel template files.

Template files
 

In ons design voor een detail van een project staan verschillende fields in een andere regio (ze nemen de volledige breedte in en hebben een andere achtergrond). Met gewoon de node--project--full.html.twig file te overschrijven kwamen we er dus niet. In DS lossen we dit op door ‘Region to block’ te gebruiken om zo enkele fields in een volledige andere region te plaatsen. In Drupal 8 hebben we dit na wat onderzoek ‘opgelost’ door de page.html.twig te overschrijven voor project pagina’s. Deze template bestaat niet standaard dus hebben we d.m.v. hook_theme_suggestions_page een nieuwe page template suggestie toegevoegd per contenttype:

function xtheme_theme_suggestions_page_alter(&$suggestions, $variables) {
  // Get current node
  $node = \Drupal::request()->attributes->get('node');
  if ($node) {
    // Node type project && page template
    if ($node->getType()) {
      $suggestions[] = 'page__' . 'node__type' . '_' . $node->getType();
    }
  }
}

In die page--node--type-project.html.twig hebben we de regions verwijdert. En deze dan nagebootst in de node--project-full.html.

 

Breadcrumbs

Breadcrumbs: bevat nogal wat bugs en zijn in deze fase nog niet bruikbaar. Om de één of andere reden kregen we telkens home=>node te zien. Dus hebben we er de breadcrumbs maar uitgelaten.

Custom field formatters 

Het lijkt heel eenvoudig, we wilden onze tags oplijsten met komma’s tussen. Hiervoor hadden we een eigen field formatter nodig. Dit is een duidelijk verschil met Drupal 7. Door ons te baseren op de taxonomy PlainFormatter in Core en deze blogpost te lezen is het ons uiteindelijk gelukt. Vreugdesprong!

Custom block plugin

Op onze homepagina hebben we een blok waarin 4 nodes worden ingeladen met hun eigen view mode. In Drupal 7 werkt dit eenvoudig met Views, Display suite en door alternating view modes te gebruiken. Voor Drupal 8 hebben we dit custom moeten bouwen. Een stukje D8 dat heel duidelijk gedocumenteerd staat op Drupal.org.

Multilingual

Multilingual werkt. Out of the box. Én is eenvoudig te gebruiken! Geen tientallen modules die je al dan niet mag/kan combineren en waar de settings alles bepalend zijn.

Manage form display

In het begin wat verwarrend dat 'Manage fields' en 'Manage form display' twee verschillende tabs zijn. Door de Manage form display kan je forms gaan goedzetten (zoals we in D7 al konden met Display suite forms). Wij hadden per ongeluk 'Geschreven door (Author)' uitgezet in deze 'Manage form display'. Hierdoor werden onze nieuw toegevoegde blogposts niet gekoppeld aan een auteur (auteur anoniem). Dit is inderdaad logisch, maar is iets waar we in D7 geen rekening mee moesten houden en we dus volledig over het hoofd hadden gezien.

Manage form display

Menu.html.twig

Een verademing in vergelijking met Drupal 7! Onze case: social media links toevoegen met passend icoontje. In Drupal 7 gebruiken we hiervoor een menu waar we d.m.v. Menu Attributes de juiste class toevoegen voor onze icon font. Dankzij menu.html.twig heb je de volledige menu structuur ter beschikking in één template file! Door onze social media menu template te overschrijven en gebruik te maken van de clean_class filter (fantastische filter die tekst omzet naar propere class output) kunnen we op een eenvoudige manier de naam van het menu item toevoegen als icoon class.

class="icon-{{ item.title|clean_class }}"

 

Conclusie

Drupal 8 Beta ziet er veelbelovend uit. Drupal Core zorgt voor een basis waar je vroeger tientallen contrib modules voor nodig had. We kijken uit naar de verdere ontwikkelingen de komende maanden, laat die Release Canidate en extra modules maar komen! We delen onze bevindingen verder met de community.

Een basis versie van het gebruikt Xtheme kan je als dev-versie al vinden op Drupal.org.

 

Concept & strategie
Website CMS
Multi-language
Responsive
Training