Banner
Title

Layout in Drupal 8, Part 1

July 19, 2017| by Dan Moriarty
Body

What's the best approach for building out web pages in Drupal? If you’re a designer, site builder, themer or editor in charge of producing a functioning website, layout is an important consideration.

Of course we’re talking about content, but also functionality and design – you likely have custom designs you need to turn into functioning webpages, complete with different regions, different media, different callouts and multiple columns.

If you're new to Drupal 8, or just Drupal in general, there are many options and approaches you could take. Let’s take a look at what’s available, what’s changed in Drupal 8, and how you can make the right decision for building your custom website.

Paragraphs
How Drupal Does Layout
illustration of an open toolbox, with various tools exposed

Out of the box, core Drupal 8 provides a variety of tools to help with layout, including:

  • Default themes and regions
  • Template files
  • Blocks
  • Views
  • Display modes
  • WYSIWYG

Drupal can also be extended through a number of contributed modules, themes and libraries, which we'll look at in Part 2 of this article. For now, let's start by only focusing on our Core options. 

1) Themes and Regions

Themes get defined under the Appearance tab of your admin tools. Bartik remains the default theme from Drupal 7 to Drupal 8, but with some edits around responsive theming and using the new-to-Drupal-8 Twig language for theme templates.

Bartik provides some initial theming, including a variety of custom .css files, organized in SMACSS folder structure recommended in Drupal 8. A series of blocks are already placed for you, such as the site menu, and a number of custom templates are provided, for components such as the site branding, search form, comments, and other small details.

Drupal also includes the Classy, Stable, Stark and Seven themes by default.

Regions

Bartik provides a variety of pre-defined regions for content. Regions in a Drupal theme are the areas in a template where content can be placed. These typically include a Header, Footer, and Content region at minimum, but can be expanded to include various sidebars, menus, breadcrumbs, and columns of regions for content. Bartik gives you around 17 regions by default, for a lot of layout flexibility. 

For each region, editors can place blocks or other content, depending on the setup and customization of each site. Regions can be easily added or removed from a theme by editing a theme’s .html.twig.php template file, and a theme’s .info.yml file. 

Regions available in Bartik theme, highlighted in gold
Demonstration of regions available in Bartik theme

 

2) Template Files
playful illustration of blades of grass with eyes, take from the Twig homepage

One of the biggest changes to layout in Drupal 8 was the introduction of the Twig language, replacing the PHPTemplate engine for templates in Drupal 6 and 7.

Twig is a template language from the Symfony2 framework. It’s a new syntax to learn, but there are many advantages to this change. Twig makes it easy to include and extend code from one template to another, in a language that’s easier to read and more secure that including PHP in your templates. 

Many more page elements are exposed as template files in Drupal 8 as well, meaning it is easier than ever to customize your page layout.

sample template file, written in twig language
3) Display Modes

Similar to Drupal 7, editors can affect the display of their content fields via the “Manage Display” screen. New to Drupal 8 (core)  is the ability to create additional display modes, beyond the usual “Default” and “Teaser”. This used to require the Display Suite module or the Entity View module. 

example of the manage display screen for content types in Drupal 8

Also new to Drupal 8 is the separation of “Manage Display” (what the end user sees) and “Manage Form Display” (what the editors see). This allows for the creation of some more editor-friendly experiences, and customization of the screens for editing content. 

example of the new "manage form display" option on content types in Drupal 8

What Hasn't Changed

Using Display Modes, an editor can rearrange content fields, show/hide labels, and affect the format of some content such as images. It remains as one-column, however, and not exposed to additional layouts such as a 3-column layout. To do that, you’ll need some additional modules, as we will see in Part 2 of this article.

4) Blocks
outside of a large apartment, and windows look like a series of blocks
https://flic.kr/p/7G66eR

Blocks got a major overhaul in Drupal 8. A staple of Drupal for as long as I can remember, blocks have always functioned as little chunks of content that editors could create and move around to different regions of their theme, via the Block UI. 

The problems with blocks were (1) you only had a title and body field (2) once you had a number of them, it was difficult to use the core Block UI to manage. Many users relied on the Context module or switched to a module like Panels instead. In Drupal 8, however, Blocks begin to address these issues. 

Changes to Blocks

screenshot of the Custom Block options available in Drupal 8

First change, blocks are now fieldable! This means you can create custom block types and add your own fields to each type, just like Content Types. This began in Drupal 7 with the BEANS module, but now it’s part of core. Because of this change, the Drupal 7 module Fieldable Panel Panes is also no longer needed.

Second change, everything is a block. While items such as the site navigation were exposed as blocks in Drupal 7, others were hidden from editors, such as the site name and logo. Editors can now ‘see’ these elements as blocks (site branding), edit them and move them as needed.

Third change, blocks are now reusable. In Drupal 7, blocks could be placed in one region at a time. If you wanted to use the same block in different regions, you had to duplicate its content. 

New modules for Blocks

screenshot of the Blocks Admin UI in Drupal 8, with Block Visibility active

The Blocks UI Admin is, by default, still not the best. Some older modules for managing blocks, such as Context, have made the jump to Drupal 8 (in Alpha at the time of this writing). A few new modules have a lot of promise for managing blocks as well.

The Place Block module, now in core, will let editors place blocks on the page they are currently editing, eliminating the need to go to the Blocks UI Admin, and remember the URLs or node IDs of the content they wish to alter. 

The Block Visibility Groups module improves the Blocks UI by allowing for filtering. This means editors can make the list of regions and blocks more manageable while editing and placing particular groups or types of blocks. 

Settings Tray is currently an experimental core module (formerly known as Outside-In module) that allows for the editing of all page elements, while viewing a particular page. For example, while viewing an About Us page, an editor could expose all the related blocks on a page (site name, search block, etc.) and edit each of them individually via a slide-out editor (settings tray). Being able to edit all the blocks and global elements of a site on any given page is powerful, and part of the “outside-in” initiative of Drupal for better editing experiences.

Demonstration of using the Settings Tray module in Drupal 8 to edit a block
Demonstration of Settings Tray
5) Views

Views is still with us in Drupal 8, but now in core! Views remains a fantastic visual database query tool, frequently used in making lists of content. But it’s also a handy tool for laying out content in rows and columns.

Data can be displayed in tables, lists or grids, similar to Drupal 7. But in Drupal 8, the grid format uses <div> instead of old-fashioned <table> data, which makes for a better responsive experiences.

Rendered entities, including blocks or other views, can be embedded inside custom views, for complex collections of data.

6) WYSIWYG
Screenshot of Drupal 8 WYSIWYG editor

While not my recommended choice for page layout, a WYSIWYG editor has always been an option for some. And now, finally, Drupal has a WYSIWYG editor in core (CK Editor). 

I recommend everyone avoid large blobs of content in their editors, and try not to include any layout altering code when possible (e.g. using a table for layout). In part 2 of this article, we’ll explore better ways of managing data such as Tables. Use your WYSIWYG for basic content, such as HTML headers, lists, paragraphs and links.

About the Layout Initiative

Layout is one of the "core strategic initiatives for Drupal 8", meaning that time and resources are being encouraged towards improving how Drupal handles layout moving forward.

One of the first fruits of this initiative appeared earlier this year, as the Layout API. While not a tool with a graphic user-interface, it does bring some more consistency to Drupal.

All contributed modules that rely on different page/content layouts (think 2 column, 3 column, etc.) will share the same library. It means less duplication between modules such as Page Manager and Display Suite and any other module or theme that supplies layout templates.

A lot of work thus far has yet to make it to official core modules. But more will be coming. An experimental module called Field Layout duplicates what contrib module Display Suite offers – editors could rearrange content fields inside different page layouts, instead of the current "1-column only" offering. 

Big thanks to all those volunteering time on the layout initiative!

Next Up

This has been a broad overview of Drupal 8’s many options for layout. For a deeper dive into Blocks, Views, or any of these other topics, I recommend some additional links.

In Part 2 of Layouts for Drupal 8, we’ll look at some of our favorite modules for expanding our layout options.

Have questions or comments, please add them below.

Author
Dan Moriarty headshot

About the Author:

Dan has been working as a UX/UI designer, business analyst and digital strategist since 2000, prior to founding Electric Citizen in 2012. More about Dan »