Our website on Drupal 8 beta: The making of

Dec 2014
-
Marieke Hollevoet

During the past few weeks at XIO we’ve had a nice project to get our teeth into; developing our own site with Drupal 8 beta2. It took some getting used to but we learned a lot, and all in all we were impressed with Drupal 8. Here we share our experiences - enjoy and share!

Drupal 8 is here!

 

The basic setup went pretty quickly (with the exception of the occasional white screen which, thankfully, magically disappears when you refresh the page).

Creating content types, views, etc., is much like in Drupal 7, although the interface is fresh and responsive by comparison!

Some things have different names or are located elsewhere, but there’s nothing that a bit of Googling can’t fix. I can really recommend this nice post about D8 from Matt Korostoff.

The real problems surfaced when we tried to implement the design itself. A few observations on that:

Panels

Too bad, not there yet - meaning we had to use Drupal regions and blocks.

Display Suite

Display Suite is something that we’re very accustomed to using, but it doesn’t work yet in D8. In other words, back to the roots - and back to a massive amount of template files.

Template files
 

In our design for a project detail, various fields are located in different regions (they take up the full width and have different backgrounds). Simply overwriting node--project--full.html.twig clearly wasn't going to do the job. In DS, we solved this by using ‘Region to block’.
In Drupal 8, we eventually figured out a ‘fix’ by overwriting page.html.twig for individual project pages. Hook_theme_suggestions_page makes it possible to add new template files.

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();
    }
  }
}

And we mimicked the regions in the node--project-full.html.
 

Breadcrumbs

Breadcrumbs are still buggy. In fact, they simply don't work - for some reason we kept seeing a home=>node. So we decided to leave them out.

Custom field formatters

It seemed so simple: we just wanted to list our tags using commas. For this, we needed a special field formatter - this is radically different from Drupal 7 and it took some effort, but with the help of the PlainFormatter taxonomy in Core and this blogpost we managed to succeed. Hooray!

Custom block plugin

On our homepage is a section that loads 4 nodes, each with its own view mode. In Drupal 7, you could simply do this with Views and Display Suite by using alternating view modes. For Drupal 8, we had to build it ourselves. This is a part of D8 that is very clearly documented on Drupal.org.

Multilingual

Multilingual works! Out of the box. And what’s more: it’s easy to use. No problems with dozens of different modules that you can’t put together, while taking extreme care over which settings you switch on or off.

Manage form display

In the beginning it was a little confusing that ‘Manage fields’ and ‘Manage form display’ are two separate tabs. With Manage form display you can align the back-end (like we did in D7 with Display suite forms). We'd turned off ‘Written by (Author)’ in this Manage form display by mistake, and as a result our newly added blog posts weren’t linked to an author - being labelled as anonymous instead. This is in fact logical, but it’s something that we didn’t have to worry about in D7.

Manage form display

Menu.html.twig

This is so much easier than in Drupal 7. We wanted to add social media links with the appropriate icon.
In Drupal 7, we usually create a menu for this, adding the right class for our icon font using Menu attributes. Thanks to menu.html.twig you simply have access to the full menu structure in a single template file! By overwriting our social media menu template and using the clean_class filter (a fantastic filter that converts text into neat class output), we could simply add the name of the menu item as an icon class.

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

 

Summary

Drupal 8 has a huge amount to offer. Drupal Core can do a lot, including many things that you used to need dozens of contrib modules for.
You can find a dev version of the Xtheme we used on Drupal.org now.

Concept & strategy
Website CMS
Multi-language
Responsive
Training