Drupal 8 Theming without Panels

So you want to build a Drupal 8 site and you can’t wait for the Panels module to be ready for production? Here is a solution that allows us to create custom layouts within a basic page structure.

For our purposes, we will be using two core pieces of functionality: Entity References and View Modes. Entity References are fields that can pull content from one entity into another. For example, if we have an Event and a Basic Page and I want to show an Event on a Basic Page, I can add this using an Entity Reference.

View Modes allow you to change the display of an entity. So in our example, the Event has several fields: a title, a location, a date, a brief description, a long description, a contact, a photo, and a link. But when I show it on the page, maybe I only want to see the title, date and description. View Modes allow me to customize which fields to display.

1. Organize Your Page.

You may need to change the way you think about the page structure and the main content section of the page. Let’s start with a page that has a header, a main content area and a footer.

2. Add Entity Reference Fields.

Instead of adding blocks to regions (see graphic, top left), we will add content to fields that are within a single region (see graphic, top right). Since these fields will appear in specific places on the page, it’s a good idea to give your fields names that are descriptive of where that field will appear on the page. First we’ll need to set up a content type with these Entity Reference Fields.

3. Add Content to Your Entity.

Now that we have our basic page structure set up, we are ready to add some content. Let’s start with the Event. I have filled out all eight fields: Title, Body, Date, Location, Contact, Photo, Link and Subhead.

4. Create a Page that Will Be Referenced

Next we will create a page. There are two Entity Reference fields (one for the sidebar area and the other for the main content area) at the bottom of the form. Notice that I have added the same Event to both fields.

5. Theme the Page that Will Contain the Entity Reference

After we’ve entered the content, our page might look something like this.

This is not what I want the layout to look like. I want a two-column layout with a sidebar. First I will need to edit my node twig template. I have added the two variables for the two Entity References to my Twig Template:

Printing a variable in Twig is easy: just wrap two sets of curly braces around the variable name. So this code:

{{ content.field_sidebar_reference }}

will print our entity reference sidebar field. I don’t intend to get too deep into the mechanics of Twig here, as there are already plenty of good online resources for this. If you are not familiar with Twig, I encourage you to read more. One of the important features is Twig debug which, when turned on allows you to see what templates are available to you. 

So we have wrapped those fields inside divs ("node__content" and "node__sidebar") and we can change the layout so that we have a main column and a narrower sidebar on the right.

I still want to filter out some of the Event fields and would like to differentiate the content in these two fields. This is where View Modes come in.

6. Set up View Modes

To set up a new View Mode, go to the View Mode admin page (/admin/structure/display-modes/view) and click “Add new view mode.” Type in a name and submit. Again, it’s a good idea to give the View Mode a name that is descriptive of the type of content or where it will display. Now we need to set up the fields we want to display in this view mode.

In our example, we have a page content type that we want to display as an entity reference in another page. Go to the content types admin page (/admin/structure/types) and select “Manage Displays” in the dropdown next to the page content type. Then scroll to the bottom of that page to activate the two View Modes (underneath the “CUSTOM DISPLAY SETTINGS”).

Then scroll to the bottom of that page to activate the two View Modes (underneath the “CUSTOM DISPLAY SETTINGS”).

Click “Save” and you should see two tabs for the Sidebar and Main Content Area View Modes. Now you can edit the fields that will display and the order in which they will appear. Save this and repeat it for the other View Mode. You can also use this page to hide the field labels.

7. Edit the Twig Template.

It is worth noting that you can change the field display in the twig template itself. In this case, we have created a twig template for the event content type (node--event.html.twig).  we will print all the fields that are set in the View mode and wrapping it in a div with the class “content-wrapper.”

Also, notice that the node title (“label”) will only appear in the Sidebar View Mode. So within the twig template itself, we can conditionally hide or show data. Now, we have the fields we want and the proper markup, we can use css to differentiate these two Entity References. In this case, we will add background colors and change font colors and styles.

I have posted the Event Twig file in a codepen, here: http://codepen.io/chrisdoherty70/pen/GJGNmM.

If you would like to take a closer look at the theme files that I created they are available here: https://github.com/chrisdoherty70/orangeant

Combining Entity References and View Modes are a useful way for Drupal themers and site builders to build complex layouts. To review, the main steps in this process are:

1. Define entity reference fields to display content regions,
2. Use view modes to differentiate the display of the same node, and
3. Use a combination of twig and css to further differentiate those nodes.