Migrating to Drupal 8 part 3: lessons
Migrating to Drupal 8 part 3: lessons
Read the articles inspired by the research, knowledge and experiences of our leading strategists, designers and developers.
In part two of our series we dove into Drupal 8’s templating system. We looked at how Twig functions, and how we can process our output in different ways. We also looked at how to debug and refine the data that Drupal is giving us. In part three we’ll talk through some things we learned while theming our first few Drupal 8 sites, using regions, manipulating our data within Twig, and controlling the output.
Outputting regional content
In most templates, the content can be directly output using the `{{ content }}` variable. Depending on the template, sometimes that has to be accessed through the `item` variable, using `{% for item in items %} {{ item.content }} {% endfor %}`. However, if you’re within a region template, you have to access individual blocks using the `elements` variable. When you’re at this level in the render tree, the `content` variable is a rendered string of all the blocks in that region. This isn’t entirely obvious at first when you get used to accessing most things through the `content` variable.
For example, let’s say you have a footer element with three columns/sections. The first column is your logo and branding information, the second column is quick links, and the third column is a small contact form. Back in your templates you might have a `region--footer.html.twig`, and then a specific block template for each column. At first thought, you might try creating the structure in the `region--footer.html.twig` file, and then try including block templates where you need them. This won’t work however, because the include function doesn’t seem to work in this way, and even if it did, the variables wouldn’t be able to pull in the right information because we’re at a different place in the render tree. Instead, you need to access the `elements` variable within the region, and print out the specific block before they get stuck together into the `content` variable.
Use regions to your advantage
Sometimes you want to change your template based on the presence of certain blocks. You can easily change the layout of your pages by detecting the presence of a specific block. For example, if you don’t place a sidebar navigation on one of your subpages, you would obviously want the main content block to stretch and fill the whole page.
If the `sidebar_first` region exists, create that element in the DOM, if not, don’t!
Take advantage of Twig
If you’re thinking Drupal 7, you might assume you need to do a lot of things in preprocess or in a PHP file somewhere when really, you just need to take advantage of what Twig can offer!
Control your whitespace
If you need to, you can modify the whitespace around your HTML elements. You can wrap your Twig statements with `{% spaceless %} … {% endspaceless %}`, and that will remove any and all whitespace between the HTML elements inside, but not within the content of the elements themselves. If you would like to remove the whitespace from a specific side of the tag, you can use a dash: `{%- … %}`, `{% … -%}`, or `{%- … -%}`.
You made it!
We’re at the end! Hopefully you found something in this series that was helpful. Maybe it’ll clear up some confusion or apprehension you might have about starting with Drupal 8. It’s a great CMS and it’s only getting better. Feel free to reach out to me, or any of the fantastic Drupal developers we have here at zu. All thanks and shout outs go to Dan Surkan (@aeotrin), Sadie Swanson (@aveldina), and Cam McHugh (@cammchugh) for mentoring me in the ways of Drupal, it’s been a fun ride with Drupal 8, can’t wait for more!
Resources
Drupal.org Drupal 8 Theming Guide
Lullabot’s Drupal 8 Theming Fundamentals
Sensiolabs’ Twig Documentation
