This tutorial demonstrates how to locate the template file that is currently being used to render an element and override it in your own theme. This is an important skill for anyone who wants to make changes to Drupal's default HTML markup.
In this tutorial we'll:
- Override the node.html.twig template in our theme
- Make changes to the markup
- Create a content-type-specific template override like node--CONTENT_TYPE.html.twig
By the end of this tutorial you should be able to modify the HTML markup used to display a node, or any other element of the page generated using a template file.
Concept: Render API
FreeDrupal's Render API plays a crucial role in how content is presented on a site. The Render API manages how content is rendered through render arrays and render elements.
In this tutorial, we'll:
- Define render arrays, highlighting properties and elements.
- Explain how render elements are used as shorthand for complex structures.
- Describe the primary types of data we can use in a render array.
- Touch on the role of renderers and special methods for rendering entities.
By the end of this tutorial, you'll better understand how Drupal constructs a page's output through render arrays and streamlines rendering with render elements.
Props and slots are the two ways that data can be provided to a single directory component (SDC). They are part of a component's schema definition, and are used to determine the names of variables passed to a component's template file. Props pass structured, validated data into a component, while slots allow us to inject flexible content such as HTML or nested components. Understanding when and how to use each ensures you can build reusable and adaptable components.
In this tutorial, we'll:
- Learn what props and slots are, and how they differ.
- Discuss how using one or the other impacts the developer experience and use of your components in a UI.
- Practice deciding when to use each for component design.
By the end of this tutorial, you'll know how to choose between props and slots when building components.
As we learned in the What Is a Breakpoints YAML file? tutorial, modules and themes can expose their site's CSS breakpoints and media queries to other Drupal modules and themes by implementing a breakpoints YAML file. In that tutorial, you also learned about the structure of a breakpoints configuration file and why you'd want to create one. In this tutorial, we’ll walk through the process of creating an example breakpoints file step-by-step.
By the end of this lesson, you should be able to create a working breakpoints YAML file in a theme or module. We'll test it out by enabling Drupal's Responsive Image module, where we'll be able to see it listed in the configuration form for creating a new responsive image style.
Dig into Drupal 8 at DrupalCon
Blog postDrupalCon is almost here and it’s time to start filling out your schedule. There’s a lot to do and see (not to mention eating lots of great New Orleans food!), so we definitely recommend having at least a rough game plan for how to use your time. Here’s a look at things you should be considering, especially if you are looking to take away a lot of Drupal 8 knowledge.
What's New in Drupal 8.1.0
Blog postDrupal 8.1.0 was released on April 20th. There are a few things that are exciting about this release; in particular the 2 new experimental modules BigPipe and Drupal Migrate UI.
Learn Views in Drupal 8
Blog postOne of the big changes in Drupal 8 is that Views, the most popular contributed module in Drupal 7, is now included as part of core. Learning Views is a key component of learning to build Drupal sites. Aside from having this tool built in core now, the beauty of this new feature is that it is almost identical to Views in Drupal 7. You can get started site-building with Views in Drupal 8 without waiting for any fancy version-specific instructions.
Customizing the available regions in your theme is one of the first things you'll do when creating your own themes. Doing so gives you complete control over where content is displayed on the page, and the markup involved. Adding regions to a theme is a two-step process that involves editing your theme's THEMENAME.info.yml file and updating your page.html.twig file.
In this tutorial we'll:
- Declare one or more new regions in our themes THEMENAME.info.yml file.
- Output the content of those regions in our theme via the page.html.twig file.
By the end of this tutorial you should be able to add or edit the regions a theme provides. Also, you'll ensure that blocks placed into regions are displayed by outputting the regions in the page template.
Meet Drupal Site Builder Scott Wilkinson
Blog postIn this Drupalize.Me interview, we interview Scott Wilkinson, a builder of Drupal sites that solve problems for his freelance clientele. This interview is part of an ongoing series where we talk with a variety of people in the Drupal community about the work they do. Each interview focuses on a particular Drupal role and this interview with Scott focuses the site builder role, filled by a person who builds Drupal sites by expertly piecing together and configuring modules, themes, and settings.
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.
Info files, aka THEMENAME.info.yml files, provide Drupal with metadata about your theme, the features it supports, and the regions that it defines. All themes are required to have a THEMENAME.info.yml file, and creating one is generally the first step you'll take when creating a new theme.
In this tutorial we'll:
- Create a new .info.yml file and define a new theme
- Review the required key/value pairs of an .info.yml file
- Enable our new theme in the Drupal UI
By the end of this tutorial you'll be able start a new theme by creating the required *.info.yml file and better understand its contents.
Themes and modules can alter the list of theme hook suggestions in order to add new ones, remove existing ones, or reorder the list. This powerful feature allows for the definition of custom logic in your application that can tell Drupal to use different templates based on your own unique needs. You might for example; use a different page template for authenticated users, or a custom block template for someone's birthday.
In this tutorial we'll cover:
- Adding new theme hook suggestions from a theme using
hook_theme_suggestions_HOOK_alter() - Altering the list of theme hook suggestions
- Removing theme hook suggestions
- Reordering the list of theme hook suggestions
We’ve completed a major overhaul in how our tutorials are organized on Drupalize.Me. Take a look at the new Guides page and find something to new to learn about Drupal.
Upgrade Status: Phases 1 and 2 Complete
Blog postIt has been a few months since we started our site upgrade, and I wanted to give an update on our progress. We are a small team of three, who manage the site and create most of the videos, so needless to say we've gotten a bit waylaid on our schedule. We've also had quite a bit of fun distraction with our Lullabot company retreat (which was sooo fun!) and DrupalCon Munich (which was amazing). So, while we're not as far as we wanted to be, we have gotten a good chunk of work started, and we're through Phases 1 and 2!
Theme developers often need to add or remove classes and other attributes from an HTML tag. Template files handle this with a special Attributes object that contains the attributes and their values, as well as a handful of powerful methods to help manage these attributes.
In this tutorial we’ll cover:
- Adding/removing classes from elements in a Twig template
- The attributes object
- Examples of common tasks using various helper methods on the attributes object
One important aspect of theme administration is the configuration of global and theme-specific settings. In this tutorial, you will learn where theme settings are configured in Drupal's administrative interface, the difference between global and theme-specific settings, and what each global setting refers to on a base installation of Drupal with a custom theme installed.
One of the primary ways that modules extend Drupal is by adding dynamic pages with content generated by application-specific logic. This tutorial looks at Drupal's process of handling a user's request and transforming it into a complete web page. We'll answer questions like:
- How does Drupal use Symfony's HttpKernel to process requests?
- How do user-configured blocks and the theme layer contribute to the page's content and appearance?
- What is the role of routes, controllers, and responses in this process?
In this tutorial, we'll:
- Follow the journey of a user request from URL to an HTML response in Drupal.
- Define the role of routes, controllers, and responses in Drupal's request handling.
- See how blocks and the theme layer contribute to the final output of a Drupal page.
By the end of this tutorial, you should be able to describe Drupal's request flow, understand the interaction of its key components in building a page, and appreciate the modular architecture that drives Drupal's flexibility.