Like many things in Drupal, there are multiple ways to solve the same problem when using Layout Builder. The Layout Builder system is very flexible. In order to be successful when using it, it helps to plan ahead and think through your specific use-case. Picking a pattern, and sticking to it, will help ensure your configuration is more maintainable, and easier for others to understand. While there's nothing to prevent you from mixing and matching, in our experience we've found it's helpful to at least set some ground rules.
In this tutorial we'll outline 3 different patterns to use with Layout Builder, and the pros and cons of each. We'll include:
- Using content fields in scenarios where a few pages use Layout Builder, but the majority of the site's layout is done via the theme and is generally not configurable by editors.
- Using a blocks-based approach to layouts for scenarios where you want to use Layout Builder instead of the traditional blocks and regions approach and allow editors to make changes via the UI.
- And finally, using an Entity view modes approach for sites that rely heavily on Layout Builder and contain lots of interrelated content types with complex layout requirements.
By the end of this tutorial you should have a better understanding of how to approach using Layout Builder for your specific use-case, and the advantages and disadvantages of different common patterns.
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.
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.
Views is one of the most utilized modules in Drupal. When combined with Layout Builder, it provides a powerful tool for adding related content to a layout. Combining Views with Layout Builder can solve several common problems, including:
- Placing blocks of related content within Layout Builder sections
- Constructing search pages with custom layouts
- Placing call-to-action cards or buttons within a custom layout
- Allowing editors to use Views blocks in the layout without the need to export and import configuration and alter code
In this tutorial we'll:
- Learn how to place views blocks into a layout
- Explore the Views related settings available from within the Layout Builder UI
- Explain how to allow a View's exposed filters to be displayed and used in a layout
- Use contextual filters to control what is displayed in the View
By the end of this tutorial you should know how to place lists created with Views into a Layout Builder layout.
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.
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.
The most common way to use Drupal's Media items is to add fields to content types, allowing the Media entities to be associated with one or more pieces of content. For example, adding a cover image to an article, or embedding a set of YouTube videos into a tutorial. This is accomplished by adding a Media field to the content type in question.
In this tutorial we'll:
- Explain what the different Media field-specific configuration options do
- Add a Media field to the existing Article content type
- Explain what the different field-specific configuration options do
- Confirm that it worked by verifying that the form for adding an article has the new field
By the end of this tutorial you'll know how to add a Media field to any content type, or any other fieldable entity, in order to allow Media items to be associated with the content.
Media entities in Drupal are content entities, and can be administered like most other Drupal content entities. In most cases you'll likely add new Media entities via the Media Library widget when creating a new content entity like an Article. However, it's possible to add them to the library without having to attach them to a piece of content. You may also want to update an existing Media entity, or just search the library to see whether something already exists.
In this tutorial we'll:
- Learn what a Media entity is in Drupal
- Get an overview of the main Media management page
- Learn how to add, edit, and delete, Media entities
- Learn how to bulk edit Media entities in Drupal
By the end of this tutorial you'll know how to perform basic find, add, edit, and delete operations to manage the Media entities in your library.
Drupal site administrators can create new media entity types, with their own unique configurations and sets of associated fields. Different media types can be configured with different field names, permissions, moderation workflows, and display settings, making it possible to create truly custom content administration experiences. The process is similar to creating a node content type like articles or events with one major distinction: every media type inherits from a specific media source plugin. The source plugin provides domain-specific knowledge about the kind of resource being represented. For example, the Remote video source plugin used with the default Remote video media type knows how to consume and display videos from YouTube and Vimeo given only their URL.
Drupal core comes with a couple of common media source plugins, and contributed modules and custom code can add to this list, increasing the different media providers with which Drupal can integrate.
In this tutorial we'll learn how to:
- Install a contributed module that provides a new media source plugin.
- Create a new media type.
By the end of this tutorial you should be able to explain how source plugins relate to media types, and create a new media type.
The Drupal Media Library and Media ecosystem can be integrated with any third-party media provider by defining new media source plugins. Media types (Media entity bundles) have an important distinction compared to other content entity types like nodes. Every media type inherits from a specific media source plugin. The source plugin provides domain-specific knowledge about the kind of resource being represented. For example, media types dealing with images know how to validate file extensions and render <img>
tags. Media types dealing with remotely hosted videos might know how to retrieve thumbnails from a remote API, and display an HTML video player and transcript.
In this tutorial we'll learn how to:
- Define a new source plugin
- Integrate a third-party API via its existing PHP library
By the end of this tutorial you should be able to create a new source plugin that exposes any third-party media resources you want to integrate with Drupal.
If the Media assets you want to use in your library support oEmbed, then you might be able to use them with a minimal custom code. Before you go down the path of creating a custom media source plugin try this approach first.
oEmbed is a standard way of allowing third party sites to embed an asset represented by a URL. The Remote Video source in core uses the oEmbed features of YouTube and Vimeo. When you paste a link into a Slack channel, and it displays a pretty card preview, or an embedded video or Spotify playlist, that's oEmbed in action. Does the Media you want to embed have a canonical URL? If so, paste it into the tool here and see if it displays oEmbed info in the results.
In this tutorial we'll:
- Learn how to enable additional oEmbed providers as Media sources
- Use the contributed oEmbed Providers module for compatible providers
- Demonstrate how to create a custom oEmbed media source plugin to further customize the results
By the end of this tutorial you should be able to embed any oEmbed-compatible content as Media assets in Drupal.
When using the Drupal Media Library to browse for available Media entities to attach to your content, the interface that you see inside the modal window is created using Views. This means you can change it for your specific use-case. This is most useful when you want to expose filters for custom fields to allow users to more easily locate content in your library. As your library of media grows, you can create powerful application-specific ways for content authors to segment the list and find their assets.
In this tutorial we'll:
- Learn how to edit the Views used by the Drupal Media Library browser
- Add a new exposed filter for the custom tags field on some media entities
- Demonstrate how this change affects the user interface for locating and selecting media
By the end of this tutorial you should be able to customize the View used by the Media Library to add new filters and make other use-case specific changes.
Media Source plugins in Drupal have a powerful feature, called field mapping, that allows an administrator to configure a Media entity type to automatically populate the value of custom fields based on metadata retrieved from the source content. For example, you can add a creator field to the Remote Video Media type, which can use YouTube as a source. When a content author adds a new Remote Video entity they can provide a URL for the YouTube video. Then the source plugin can extract the creator's name from the YouTube API and use that data to populate a custom field. This saves the content author from having to do that work themselves.
In this tutorial we'll learn:
- How to discover what source metadata is available
- How to configure a Drupal Media type to automatically populate custom fields
By the end of this tutorial you should be able to add a custom field to a Media type on your Drupal site and automatically populate it with data retrieved from the source content.
One of the most powerful features of Drupal's Media Library is that it enables content authors to re-use media entities. Have a favorite image that you like to use with all blog posts about a specific topic? Or a default icon you want to use for a tutorial unless an alternative is provided? The Media Library can accommodate this without requiring you to keep a copy of the image locally and then attach it to every node where it's needed.
This can lead to a potential issue when an editor deletes an image, thinking they've also deleted all the content that used it. If they missed a post referencing the now deleted image, what happens when there is no image to show?
The contributed Entity Usage module provides a mechanism for tracking relationships between entities. This is essential functionality when working with a library of reusable media entities because it helps ensure that media entities attached to content are not deleted.
In this tutorial we'll:
- Discuss the use case for the Entity Usage module
- Learn how to configure Entity Usage to keep track of relationships between media entities and nodes that reference them
- Prevent media items from being deleted if they are in use somewhere on the site
By the end of this tutorial you should be able to explain what the Entity Usage module does, and how to use it to solve common problems related to deleting items from a large Media library.
A commonly asked question is, "How do you add images to the body of a content item in Drupal?" You can allow users to embed images, videos, or any other media into a field configured with a WYSIWYG editor, such as CKEditor. In this tutorial, we’ll show you how to enable Drupal’s Insert Media button for CKEditor, and configure the corresponding text format so that it can render embedded Media entities.
Content authors can then use the Media Library to select images (or other media) to embed into the page.
In this tutorial we'll:
- Learn how to enable the Insert Media button for CKEditor
- Demonstrate how to insert media into the body of a content item (or any other field configured to use CKEditor)
By the end of this tutorial you should know how to configure Drupal to allow content authors to embed images in content items.
Drupal's media management tools, the Media and Media Library modules, provide content authors with drag-and-drop media and asset handling, full WYSIWYG editor integration, and a library of reusable media assets. There's minimal configuration required to get started, but full control via Drupal's standard Entity and Field systems for those who need it.
In this tutorial we'll:
- Provide an introduction to the media system in Drupal and its use-cases
- Explain the Drupal core features that the Media system is built on
- Link to other tutorials that will go into much more depth on these topics
By the end of this tutorial you should know what role the Media and Media Library core modules fill and know whether or not you'll want to make use of them on your project.
Media entities are standard Drupal fieldable content entities. For the most part, they function, and are managed, in the same way as Nodes. So if you've previously created content in Drupal, much of working with Media entities should be familiar -- with some notable exceptions related to the connections between Media types and the media resources they represent.
In this tutorial we'll:
- Get an overview of Media entities, Media types, and Media fields in Drupal
- Point to other tutorials that go into more depth on individual topics
- Learn some basic terminology and concepts related to the Media system in Drupal
By the end of this tutorial you'll have an overview of the pieces that make up the Media system in Drupal core.
Often, there's an existing Drush command that does most of what you want, but needs just a few tweaks or enhancements to make it meet your project requirements. Maybe the existing core Drush command has the functionality but lacks some additional validation. Or maybe you need to add an option to perform some application-specific debugging logic for all commands in a group.
Drush hooks can be used to alter, extend, and enhance existing Drush commands.
In this tutorial we'll:
- Learn how to alter a Drush command with code in a custom module
- Declare a validation hook that alters the
user:password
command with additional password validation logic
By the end of this tutorial you should be able to alter a Drush command provided by Drush core or a contributed module with your own custom code.
Back-end developers, and Drupal site builders, often find themselves having to perform the same UI steps over and over again, like exporting configuration, importing configuration changes, running cron, processing a large queue of jobs, indexing items for Search API, and more. Performing these tasks with Drush saves time and reduces the number of clicks required.
Drush core contains commands to execute all the most common tasks. Many contributed modules provide their own Drush commands to make interaction with the module's features, easier, faster, and scriptable.
In this tutorial we'll:
- Learn about the Drush core commands for common tasks like interacting with queues, performing database backups, and importing/exporting configuration
- Demonstrate how to find the Drush commands provided by contributed modules in your project
By the end of this tutorial you'll learn some popular commands for common tasks that'll speed up your daily work.
Every Drupal site consists of many Drupal projects like modules and themes. Drush comes with a group of commands that aid in managing projects from the command line. These commands can check which modules are present in a site's codebase, report their security status, enable modules, and display metadata for modules and themes. All of these commands start with the pm
prefix, and are part of the project manager group.
Common use cases for the project manager commands include: quickly enabling/disabling modules via the CLI rather than performing numerous clicks in the UI, and as part of CI/CD process that lists (or maybe even automates) security updates.
In this tutorial we'll:
- List the available
pm
commands - Enable a module with Drush
- Uninstall a module with Drush
- Use Drush to check for security updates for modules, themes and PHP packages
By the end of this tutorial you'll have an understanding of the project manager commands that come with Drush, how to use them, and how to speed up common workflows and maintenance tasks.