Drupal media entities are fieldable entities, which means that you can add any custom fields you want to your Media types. These fields can be used for collecting additional metadata about a resource, categorizing and organizing resources so they're easier to find in a large media library, or for displaying information like a photo credit or transcript for a video. The possibilities are endless once you know how to add, and optionally display, fields in Drupal.

Some example use cases for adding fields to Media types:

• Collect, and display, a credit to go along with a photo. This could also be a date, a location, or any other metadata.
• Store resource width and height dimensions as custom fields so they can be referenced by display logic in the theme layer.
• Use Taxonomy reference fields to add tags or categories to help keep a large library organized.

In this tutorial we'll:

• Learn how to add fields to a Media type
• Verify our new custom field is working

By the end of this tutorial you'll know how to add custom fields to any Media type.

Modules can provide new render element types -- a powerful way to encapsulate complex logic into a reusable component. This can help to cut down on code repetition, and allow other module developers to build on your work. In this tutorial we'll:

• Define a recipe for creating a new render element type
• Look at the code for the marquee element type from the render_example module in the Examples for Developers project.

By the end of this tutorial you should be able to implement a new render element type in your own module and make use of it when defining content as part of a render array.

Linking to things is probably one of the first things you learned how to do as a web developer. Anchor tags are the framework of how the world wide web works. So it's important to know how to create them in Drupal. Chances are you'll be doing a lot of it.

Creating links to things in Drupal, however, is a bit more complicated than just typing out an HTML anchor tag. It requires understanding how URLs are generated from routes, and how to define links as renderable arrays. It can also be tricky because of the multitude of deprecated, but still functioning, ways of creating links.

In this tutorial we'll:

• Use the \Drupal\Core\Url class to generate URL objects from routes and external URIs.
• Use the \Drupal\Core\Link class to create HTML links within a Drupal module.
• Examine best practices for working with URLs and links in a Drupal module in order to ensure that your code continues to work into the future.

By the end of this tutorial you should be able to link to anything, either internal to your application or external, using Drupal best practices.

Custom themes in Drupal must be configured to inherit settings, templates, and other assets from a parent theme. Which base theme you use is configurable. This allows theme developers to use a different set of markup as the starting point for their theme, organize various theme assets into a more maintainable structure, and more. All of this is made possible because of how Drupal's theme layer uses a chain of inheritance when assembling all the parts of a theme.

Base themes are also a powerful way to encapsulate standards and best practices into a reusable code base. You'll find dozens of contributed base themes on Drupal.org that can serve as a great starting point, especially if you're planning to work with an existing design framework like Bootstrap or Susy Grids. Or if you want to leverage modern JavaScript bundling without setting up Webpack on your own.

In this tutorial we'll:

• Learn what base themes and subthemes are
• Look at a few examples of template inheritance and how that works
• Discuss some use cases for theme inheritance

By the end of this tutorial you'll know how to declare the base theme that your theme builds upon.

#prefix and #suffix are two commonly used examples of standard properties. That is, they are available for use on any element in a render array regardless of the element #type or #theme property's value. They are a great way to add additional layout markup to an element in a theme-agnostic way.

In this tutorial we'll:

• Use the #prefix and #suffix Render API properties to wrap an element
• Look at some possible use cases for using #prefix and #suffix in your own code

By the end of this tutorial you should know how, and when, to use the #prefix and #suffix properties in a render array.

Writing a React application requires including the React JavaScript library in the page, writing some React-specific JavaScript, and then binding it to a specific DOM element on the page. You may also want to include existing packages from the npm ecosystem, and use modern JavaScript (ES6+) features, which necessitates setting up a build toolchain for your JavaScript using a tool like Webpack or Parcel.

There are a lot of different ways you could go about setting this all up. Do you add React via a theme or a module? Do you need a build tool? Should you use Webpack, or Babel, or Parcel, or something else? While we can't possibly cover all the different approaches, we can help you figure out what is required, and you can adapt our suggestions to meet your needs.

In this tutorial we'll:

• Create a new custom theme with the required build tools to develop React applications
• Add a DOM element for our React application to bind to
• Create a "Hello, World" React component to verify everything is working

By the end of this tutorial you'll know how to configure everything necessary to start writing React within a Drupal theme.

Every theme can contain an optional THEMENAME.theme file. This file contains additional business logic written in PHP and is primarily used for manipulation of the variables available for a template file, and suggesting alternative candidate template file names. Themes can also use this file to implement some, but not all, of the hooks invoked by Drupal modules.

In this tutorial we'll learn:

• The use case for THEMENAME.theme files, and where to find them
• The different types of functions and hooks you can implement in a THEMENAME.theme file

By the end of this tutorial you should be able to know how to start adding PHP logic to your custom theme.

Code generators are great productivity boosters that allow generating scaffolds for common development tasks in Drupal. One of the most common use cases for generators is scaffolding the code required for a custom entity type. Custom entities require many files and complicated annotations in order to function properly. There is a lot of boilerplate code that is more-or-less the same for every entity type. Creating all the files is repetitive, time-consuming, and prone to human error. Generators can help automate this task and make creating your own custom entity types quicker.

In this tutorial we'll:

• Learn how to generate the code for a custom entity with Drush
• Learn about the options that generators provide for custom entities

By the end of this tutorial you should know how to generate custom entities with Drush.

Of the 3 main components of the field system -- types, widgets and formatters -- only 1 has an impact on the actual display of content for end users: field formatters. Field formatters are responsible for taking the data stored by a field and transforming it into the markup that is sent to the browser when an end user views your site.

In this tutorial we'll:

• Look at the role field formatters play in the Field API
• Identify the main components that make up a field formatter

By the end of this tutorial you should be able to define the role of a field formatter plugin.

React and Drupal can be used together in two different ways: fully decoupled, also known as headless; or progressively decoupled.

In this tutorial we'll talk about the differences between these two approaches, including:

• Defining what each method refers to
• Considerations regarding hosting, performance, and access

Then we'll link to lots of additional reading materials so you can gain a deeper understanding of the subject.

By the end of this tutorial you should be able to define what decoupled and progressively decoupled mean, and how they differ from one another.

Before we start writing any React code, let's go over some basic concepts and terminology. Throughout this series we'll assume you're familiar with these things. They'll come up again and again as you work on projects that involve React, so it's worth taking the time to learn them.

In this tutorial we'll cover the following at a high level, and provide links to resources:

• Why choose React?
• What are React components?
• What are hooks, state, and JSX?
• The role of build tools when developing React applications

By the end of this tutorial you should have a firm grasp of the fundamental concepts and terminology necessary to start creating React applications.

Using hook_views_post_render() Drupal module developers can change the render array representation of a View before it gets displayed. You can use this to modify the computed HTML of a view just before it gets printed. This hook is similar to using a preprocess function for a template file, but in this case you have access to the whole render tree, not just the specific leaf covered by the template file you're preprocessing.

This hooks gets called after the Views object has been through the render process, and all the different configured displays and formatters have been applied, producing a render array representation of the results of the view. This hook receives an $output parameter which contains the render array, and only changes made directly to the $ouput variable will have any effect. This hook is the last chance to make changes to the render array before it is converted to markup.

You can use hook_views_post_render() to change #cache properties for the View, and to do things like add CSS classes to rows, and change the page title.

In this tutorial we'll:

• Learn how to alter a view's rendered output right after the Views object completes the render phase of the build cycle.
• Use hook_views_post_render() to change the title of the view's display

By the end of this tutorial you should know how to alter the render array generated by a View prior to it being passed to the theme layer and converted to HTML.

As a theme developer you can extend an existing asset library to include custom CSS and/or JavaScript from your theme. This is useful when you want to add styles or behaviors to components provided by Drupal core or another module.

Sometimes there are CSS or JavaScript asset libraries attached to the page by Drupal core, a contributed module, or another theme, that do something you don't like, and you want to change it or even exclude it all together. There are a couple of different ways that themes can override, alter, or extend, an existing asset library in order to modify the CSS and JavaScript that get attached the page by other code belonging to another theme or module.

In this tutorial we'll learn how to:

• Extend an existing asset library using libraries-extend, so that our custom CSS and JavaScript is included whenever that library is used.
• Override an existing asset library using libraries-override, to alter the definition of the library, and replace or exclude individual assets (or the entire library).

By the end of this tutorial you should be able to use your custom theme to override, extend, or alter any of the asset libraries added to the page by another theme or module.