If you want to create a link to an internal page in a Twig template--and there's not already a variable in the template that contains the URL you want to link to--you'll need to determine the route of the thing you want to link to and then use the Twig url() or path() functions to generate appropriate URLs. In most cases when you want to create a link to an entity that is being output by the current template there's an existing helper variable to use. For example, in a node.html.twig template file there's a url variable that points to the current node. For other scenarios, like hard-coding a link to the /about page, you'll need to do a little more work.

In this tutorial, we'll:

• Get the absolute URL value
• Get the relative path value
• Generate HTML for a link
• Get the URI to a file, like an image in the Media library
• Get the active theme path

By the end of this tutorial you should be able to create links to any internal page via Twig.

Twig is the default template engine for Drupal. If you want to make changes to the markup that Drupal outputs you're going to need to know at least some Twig. In this tutorial, we will outline the role that Twig now plays in Drupal, how Twig impacts the theming experience, and where to find additional resources for learning Twig.

At the end of this lesson, you'll be able to:

• Describe the role that Twig plays in creating Drupal themes
• Explain how Twig impacts the theming experience in Drupal
• Locate additional resources for learning Twig

In Twig, you can modify variables using functions or filters. Twig has a bunch of built-in functions and filters. Drupal extends Twig to provide a few handy Drupal-specific functions and filters as well.

In this tutorial, we'll look at:

• What are functions and filters?
• How to use functions and filters in Twig
• Detailed information about the Drupal-specific functions and filters and their use case

To read a Twig template file, you'll need to recognize Twig's syntax delimiters. Twig has three syntax delimiters: one for printing out variables, another for performing actions or logic, and lastly, one for comments, also used for docblocks.

In this tutorial we'll:

• Explore each of Twig's 3 syntax delimiters.
• Show examples of each from Drupal's core template files.

By the end of this tutorial you should be able to recognize each of Twig's syntax delimiters and understand what the engine will do when it encounters them.

More often than not, templates in a theme share common elements: the header, footer, sidebar, or more. In Drupal, themes created with a Twig template can be decorated by another one. This template inheritance allows you to build a base "layout" template that contains all the common elements of your layout defined as blocks. A child template can extend the base layout and override any of its defined blocks. This helps prevent code duplication, and keeps your theme more organized.

This tutorial is for theme developers who want to reduce code duplication in their themes, or anyone seeking to better understand how Twig template inheritance works. We'll cover:

• What the Twig block and extends tags do
• An example use-case for template inheritance
• How to extend a Twig template from another theme or module
• How to include other Twig templates

Do you cringe at the sight of untidy whitespace or (gasp) no whitespace at all when you View Source? Learn how to tame whitespace in Twig template files in this tutorial. By the end of this lesson, you will be able to recognize how Twig controls whitespace and how you can do the same in your Drupal template files.

Twig is the theme template engine in Drupal as of version 8. Like any code, there are guidelines and standards that dictate both the style and the structure of the code. In this tutorial we will explain how to adhere to the Drupal code standards while implementing Twig templating.

By the end of this tutorial you will be able to adhere to Drupal's coding standards when writing Twig, and know where to find more information about the guidelines when necessary.

Set up a local development environment to practice Drupal theme development exercises in our course, Hands-On Theming Exercises for Drupal.

By the end of this tutorial, you should be able to:

• Install Drupal on your computer, so you can edit files in your theme.
• Generate dummy content, so that you have different kinds of pages to theme.

It's time to create the bare-bones structure for a new theme on your site. You should try to complete this exercise based what you've learned from the tutorial prerequisites listed below. The video at the end of this tutorial will walk you through the implementation of this exercise if you need some help. In this exercise, we'll:

• Create an info file that describes a custom theme to Drupal with the regions listed below (we're going to name ours "reboot").
• Enable, and view, a bare-bones custom theme.

By the end of this exercise, you should feel comfortable starting a theme using several methods.

To add CSS or JavaScript files or libraries to your site, you can attach them as asset libraries in your theme. In this exercise, you'll create 2 asset libraries and attach them globally via your theme's info file. In this tutorial, we'll pull in the CSS and JavaScript from the popular Bootstrap framework so that we can make use of its layout utility classes later on. We'll also add a custom CSS file that contains global styles for our site, like setting the page background color.

If you want to try and complete this on your own first you'll need to:

• Add the Bootstrap CSS and JavaScript files to your theme.
• Define an asset library using a THEMENAME.libraries.yml file in your theme.
• Tell Drupal to attach your asset library so that the CSS and JavaScript files it represents are included in the page.

Once that's done your site won't look all that different. But if you view the page source, or look closely, you should see that the Bootstrap files are included along with any CSS rules you placed into your custom style sheet.

Note: Since this course is focused on teaching the Drupal aspects of theme development, and not on writing CSS, we're using the Bootstrap CSS. Feel free to use the framework or library of your choice if you don't want to use Bootstrap.

You should try to complete the exercise steps on your own and use the video to help guide you if you get stuck.

At the end of this exercise, you'll find a video walk-through of the solution.

Drupal has a few handy settings you can tweak to make developing themes a little more intuitive and a lot more awesome. In this tutorial, we'll practice manually setting up our environment for theme development by:

• Disabling some caches
• Turning off CSS and JS aggregation
• Turning on the Twig debug service

By the end of this tutorial, you'll have practiced setting up your environment for theme development.

In order to change Drupal's default markup you need to override template files. The page template controls the overall layout of your theme, including the placement of regions. You should practice the exercise following the written instructions below. Use the video walk-through to help if you get stuck.

In this exercise, we'll:

• Override the currently used page.html.twig template file.
• Modify the content of the file to include the regions defined in the theme's .info.yml file.
• Wrap the regions in the page template file with HTML markup using CSS classes from Bootstrap to achieve the example layout.

By the end of this tutorial, you'll gain practice creating a custom layout in a page template file.

The available dynamic tokens or variables vary from template to template. Each page is built from a set of templates.

In this exercise, we'll:

• Override and name the node template file so that it will only affect Article nodes on our Drupal site.
• Inspect the available variables.
• Customize the markup.
• Use the Twig filter without.

We recommend that you try to work through the exercise yourself, and refer to the video if you need help.

In this exercise, we'll practice theming by overriding the main menu template. We'll:

• Override and rename the main menu template so that it will only affect the main menu component of our Drupal site.
• Add Bootstrap classes from the base nav component into our overridden main menu template file.
• Add CSS classes to HTML selectors using attributes.addClass() and set methods.

We recommend that you work on the exercise steps below first. You can refer to the video if you need some help.

In this exercise, we'll continue our template overriding practice by overriding the image field template. We'll consult the Bootstrap documentation and add a responsive image class that will apply to any images uploaded by a user to the field_image field. Once again, we'll add this class to the classes array in the set Twig tag. You should work on the exercise steps below first, and you can refer to the video if you need some help.

In this exercise, we'll practice using the t filter in a Twig template. As a best practice, all hard-coded text in a template should be translatable. Simple text (containing no dynamic tokens) can be passed through the t filter to achieve this objective. Along the way, we'll also use a basic conditional if statement with Twig. We recommend that you try following the exercise's steps first, and refer to the video if you need help.

Preprocess functions allow you to change existing variables, or add new variables, for a template file using PHP code. In this exercise, you'll:

• Define a PHP function that implements a preprocess hook
• Create a new variable named {{ today }} that contains the current date and gets passed to the page.html.twig template file.

We recommend that you try the exercise's steps first, and refer to the video if you need help.

When defining new layout plugins for Drupal you can add custom CSS and JavaScript via asset libraries. This allows for the creation of layouts with complex structures and interactive elements. Those elements might include grids, tabs, and accordions. Drupal allows you to attach custom CSS and JavaScript directly to a layout plugin, or via the layout's Twig template file.

In this tutorial we'll:

• Define a custom asset library with JavaScript and CSS functionality
• Attach the asset library to the custom layout plugin
• Transform a multicolumn layout into tabs

By the end of this tutorial you should know how to attach custom CSS and JavaScript to a layout plugin to add interactivity and styling.

The Layout Builder Styles module extends the Drupal core Layout Builder UI to add the ability for editors to apply custom CSS classes to the blocks and sections that make up a layout. This gives layout editors more control over the look and feel of elements within a layout. It's especially useful when using Drupal's Layout Builder in conjunction with a design system like Bootstrap, Material UI, or your own predefined utility classes.

The module allows site builders to define new styles. Then, when placing a block into a layout, if there are any styles available for the block type, the user is presented with a select list where they can choose one or more to apply. When a style is applied, any CSS classes associated with the style are added to the markup. Also, a new style-specific theme hook suggestion is added to the block to allow for further customization.

In this tutorial we'll:

• Install and configure the Drupal Layout Builder Styles module
• Learn how to define new styles
• Learn how anyone editing a layout can apply the styles we defined to a block or section in the layout to change the UX

By the end of this tutorial, you should be able to use the Layout Builder Styles module to allow editors to add predefined styles to existing layouts and blocks without writing any code.

Access control for the Media entities in Drupal works in much the same way as any other content entity. The module provides fine-grained control over create, update, and delete operations, while providing only basic control over who can view Media assets. The thinking is that there are too many possible permutations of how an application may want to restrict read access to content. Therefore, rather than try and pick one setting and add it to core, it's left entirely up to the site administrator and contributed modules.

In this tutorial we'll:

• Look at the different permissions provided by the Media module for controlling access to Media entity operations
• Discuss some common misconceptions about file permissions that can lead to potentially exposing private data

By the end of this tutorial you should know how to configure access control for Media entities, and explain how access control relates to files attached to a Media entity attached to a Node.