Example Lesson Videos - Drupal 8 Theme Development: Enabling Twig Debug Mode (Part 1 of 2)

Lesson Notes
Playlist
Transcript

Lesson Notes

These are two example lesson videos pulled from our Drupal 8 Theme Development course.

See Full Course Syllabus and Schedule

Example Code For This Course

All the example code you see me using in this course is available as a git repository. This allows you "checkout" different versions of the code to move to any point in the course. Your primary assignment each week is to follow along with creating the modules you see me create in the lesson videos. You have two ways you can do this. Personally, I prefer to copy and type out the programs I see on screen, because I find it helps me remember things better. However, this can be fairly time-consuming, so there is a second option. Since I have provided many different versions of the code in the example git repository, you can watch the videos, and when you get to a checkout point (there will be an on-screen prompt), checkout that version of the code, read through it, and run it to confirm you understand what you've just watched. That will take less time, but I will leave it to you to decide how you learn best. Be sure you perform the clone operation in the correct folder, depending on whether or not you want to copy the code yourself or just use the example code to follow along. I discuss the appropriate locations in the code repository video.

Frequently Asked Questions

Do the lesson videos play on iPads and iPhones?

Yes, they work on both desktop/laptop computers and iOS devices.

How can I ask questions or get help?

You can ask questions about the lesson or get help with your assignment by posting to the class discussion forums and attending the weekly live Q&A sessions with the instructor. (online via webinar software)

Do I need to have my own website or hosting account to work on?

No, we will provide you with a development environment you can install on your computer. Installation and configuration of the local development is covered step-by-step in course lesson videos.

Playlist

Transcript

Before we begin doing theme-related work in Drupal 8, we need to put our Drupal website into Twig debug mode. This mode will disable certain performance and caching features of Drupal 8. We need that so that we can edit our template files without having to clear the caches every time we make a change. This will allow us to work much faster. In addition, putting the website in Twig debug mode will also print out some debug information for us in the HTML source code. This will make it easier for us to find which templates we need to override, which is something I'll show you in a future video. So to put the site in Twig debug mode, the first thing is we need to make sure that you already have the site set up with the settings.local file. I had you do this in a previous video, but just to quickly check under sites, default, settings.php at the bottom, you should have this section that loads the settings.local.php. That settings.local.php should have been copied originally from example settings local. And then we uncommented in that video where I showed you how to set it up, we uncommented these two cache settings. So make sure those are uncommented. And then if all that's set up, then that enables this development.services.yml file and so we can put some additional configuration in this file for our development settings. And so that's where we're going to set up Twig debug mode. All right, but all those other things have to be in place or else this file will be ignored. That's why I just wanted to make sure you have al l those other things set in development mode first, and then this will work. Okay. The setting that we need to copy in here, into this file, is this. So you want to make sure that you'll have a top-level of key parameters. If you already have one in this file for some reason, then you can just work underneath it. If you don't, then you can add it. So under parameters, we have Twigs.config and then under there, we have debug set to true. And so this will enable Twig debug mode. So to check this, we need to save it. And then we'll need to clear our caches. So I'm going to log in to my virtual machine and I'll go to sites/drupal and I'll run 'drush cr' to rebuild the caches. This is because Drupal needs to pick up the settings change that we made. And now that we've done that if we want to check if Twig debug mode is enabled, we can refresh the website and then if you right click and choose View page source, you could scroll down and if you see these green, well it's green on Chrome but you see these HTML comments that say theme hook to toolbar. Begin output and then they say something about Twig. They're all throughout the source code. So here's another one, here's one. If you see that information that means Twig debug is enabled. All right and so make sure... this is going to make it a lot easier for us to do development work for theming, but this should never be enabled on a production site. It really does hurt the performance. So make sure that you disable this functionality. In fact, you should disable all of the development functionality by removing your settings.local override in settings.php before you go to production with the site. Either that or make sure that the settings.local doesn't have any debug or sorry, any development settings in it. Okay, so that's all we need to do to set up our site for Twig debug mode. Now, we're ready to create our first theme.