In this lesson, we’ll take a look at how to modify the HTML output from Views, explore some of the default templates that Views provides, and learn about the various permutations of names we can give our template files to override output for everything from a large set of Views to a single field on a single View. We’ll also discuss the difference between displays, styles, rows, and fields when it comes to theming a View.
Like most output in Drupal, Views relies on Twig templates for a significant amount of its rendering. In this tutorial we'll identify where you can find the default Views templates within your file system, what the common templates are for, and how to name your templates so that they are applied to specific views.
By the end of this tutorial, you should be able to:
- Identify where to find default views templates
- Understand which templates apply to what part of a view
- Get a sense of the template suggestions and how to use them to limit where your custom templates are applied
- Identify a view's machine name
- Identify a display's machine name
- Identify a field's machine name
One of the challenges that comes with Layout Builder is increased complexity of front-end development. Layout Builder offers site administrators increased flexibility regarding the placement and use of fields and blocks; a theme developer needs to account for this. Depending on how Layout Builder is used, this could mean a small number of new combinations, or virtually infinite combinations. Therefore, predicting and theming all of these combinations becomes a difficult but necessary task in order to ensure maintainability and overall design consistency.
In this tutorial we'll look at some things we've found helpful to consider when theming Layout Builder including:
- Design, and theme, atomic components
- Limit the number of possible combinations of fields by using entity view modes
- Handle edge cases
By the end of this tutorial you should have a better understanding of how using Layout Builder can impact theme development, and how to account for it.
By default, individual forms in Drupal are not output using Twig template files. It's possible to associate a form with a Twig template file by creating a new theme hook, and then referencing that theme hook from the $form array that defines the form. Doing so allows theme developers to customize the layout of the elements in the form using HTML and CSS.
This is useful when you want to change the layout of the entire form. For example, putting the elements into 2 columns. If you want to change individual elements in the form, you can often do so by overriding element specific Twig template files.
In this tutorial, we'll:
- Learn how to create a new theme hook that can be used to theme an element in a render array.
- Associate the
$formwe want to theme with the new theme hook we created. - Create a Twig template file for the theme hook that will allow us to lay out the form elements using custom HTML.
By the end of this tutorial, you should be able to associate a Twig template file with any form in Drupal, so that you can customize its layout using HTML and CSS.
Learn Drupal
Guide
Build Drupal Sites
Guide
Develop Drupal Sites
Guide
A Drupal single directory component (SDC) is Drupal's way of packaging the markup, metadata, styles, and behavior for a UI element in one self-contained folder inside a theme or module. This structure helps front-end developers and site builders keep all related files together for easier theming and reuse. A Drupal single directory component directory must be located in a specific place and its files named with a particular convention so that the system can discover it and use its assets.
In this tutorial, we'll:
- Show where Drupal discovers single directory components in your codebase.
- Explain the naming and organization conventions for Drupal single directory component directories and files.
- Outline key files for a component—both required and optional.
By the end of this tutorial, you'll be able to identify an SDC directory in a Drupal module or theme and know exactly what you're looking at.
Introduction to Drupal
Guide
Develop Forms in Drupal
Guide
We recommend planning ahead when using Layout Builder, documenting how you intend to use Layout Builder for your specific use-case, and then doing your best to stick to it. One approach that we've found works well for sites that need a maximum amount of flexibility (and have the resources to do the upfront planning and theming required) is using entity view modes.
This approach is similar in concept to component based design systems, where you do the initial work of creating a set of components that all work well together up-front, and then allow them to be mixed and matched in whatever way is necessary.
In this tutorial we'll:
- Create new view modes for the Basic Page content type representing the different components.
- Use the ctools blocks module to allow displaying an entity as a block and choosing which view mode to use when rendering the entity.
- Provide custom HTML and CSS styling for the new components.
By the end of this tutorial you'll know how to use Layout Builder in combination with entity view modes.
Overview of regions from a theming perspective.