Twig Templates in Craft by Ryan Irelan
Total Page:16
File Type:pdf, Size:1020Kb
Twig Templates in Craft by Ryan Irelan The how, what, and why of using Twig in Craft templates. A companioln to the Learning Craft course. In this course you will get a comprehensive overview of working with Twig templates in Craft. The goal is to get over the hump of writing Twig code, dispel any myth that using Twig is difficult, and help you take the next step in using Craft. Twig Templates in Craft by %author From a course at Mijingo.com Introduction Welcome to Twig Templating in Craft. In this course we will cover how to create templates with Craft using Twig, the built-in template engine. Our goal in this course is to dispel the myth that working with Twig in Craft is difficult or confusing. I’ve found that a big questions people new to Craft have are: Where does Twig end and Craft begin? Which tags are Craft and which are Twig? Where should I look when I need help? The Craft documentation or the Twig documentation? By understanding what’s Craft and what’s Twig we’ll be able to answer all three of those questions. We will work together to review the basics of templates in Craft first, and the move into the basics of Twig, and, finally, into the Craft-specific implementation of Twig. What’s Craft? If you’re watching this video, I assume you already know what Craft is. But just in case… Craft(http://buildwithcraft.com) is a modern content management and publishing system by Pixel & Tonic(http://pixelandtonic.com). The CMS is built on PHP, using the Yii framework. It, as you can guess, uses the Twig template engine for the template piece of the CMS. What We’ll Cover This course is broken up into three different modules: Introduction to Craft Templates & Twig Craft + Twig Craft Navigation & Pagination The first module will get us acquainted with Craft templating and how vanilla Twig (not as part of Craft) works. The second module–the longest part of the course–will clarify how Craft and Twig work together, so you can jump right in to building your first Craft website (or getting better at building your second, third, or fourth site). Copyright %Y Mijingo, LLC - %URL 2 Twig Templates in Craft by %author From a course at Mijingo.com The third module covers how to use Craft navigation and pagination tags. Pre-requisites To use this course, you ideally have already watched my Up and Running with Craft video course(https://mijingo.com/products/screencasts/craft-cms-tutorial/) or have worked with Craft enough to understand generally how it works. This course won’t teach you how to build a site in Craft–we will only be focused on the templates. If you want to learn the steps to building a site in Craft, you should watch my Learning Craft course. A general familiarity with HTML and how to navigate an HTML document would be helpful for this course. Although, if you are already doing web development with other content management systems or building static templates with HTML and CSS, then you should have no problem following along in this course. There is absolutely no programming experience required. While we will look at some programming concepts that come with Twig and Craft, this course doesn’t require that you have programming experience (whether a formal education or even work on building web publications with languages like PHP Ruby or Python). This course is set up to be for people who do not have programming experience and simply want to build a website using the craft CMS. You should also have a local development environment set up already that you can use to build the Craft website for this course. If you need more information on how to set up localhosting, check out my Reliable Localhosting course(https://mijingo.com/products/screencasts/setting-up-a-local-web-server/) to learn more. Installing Craft Later on we will install the Happy Lager sample site. If you haven’t installed Craft before you can follow my video tutorial on it: https://mijingo.com/lessons/installing-craft-cms/ Other we will cover installing the site in the Installing the Sample Site section later in this course book. Craft Licensing A question you might have is: Do I need a craft license in order to follow along with this course? Copyright %Y Mijingo, LLC - %URL 3 Twig Templates in Craft by %author From a course at Mijingo.com No, you do not need a Craft license to follow along with this course. However, you do want to make sure that you run the local version of the site at happylager.dev so that you can run Craft without restrictions. Craft is set up in such a way that using certain localhosting domains allows you to run a full version of Craft without needing a license. This is great for getting started but you should definitely pick up a Craft license for your next project! Copyright %Y Mijingo, LLC - %URL 4 Twig Templates in Craft by %author From a course at Mijingo.com Module 1: Basics of Templating in Craft Goal: Get comfortable and familiar with general template setup in Craft. Before we start looking into how Craft and Twig work together, let’s first review how Craft works with templates. How Craft Stores Templates Craft templates are stored as normal HTML files. However, in addition to the HTML, Craft templates also have a special type of code (this is the Twig code we’ll cover later) that tells Craft where to insert content that is stored in the database. (If you have used other content management systems like ExpressionEngine or WordPress, then you’re familiar with how this works.) In Craft, the templates are not accessible via the control panel. Templates are stored solely as files. They are not stored in the database and people who have access to the Craft control panel can not access the templates or edit them. Speaking of storing templates as files, there are some really nice features to how Craft lets you store and name templates and template directeories. Simply put: Craft doesn’t care what you name your templates, what you name your template directories or how you organize your templates and template directories. The only thing Craft cares is that you tell it where those templates are when you specify a template that is assigned to a section. show example of a template directory and templates The template directory structure and naming are completely up to you: you just need to tell Craft where to find the templates. To do this, when you set up a section in craft, you specify a template that craft should use when craft needs to display an individual entry for that section. For example, let’s say we have a blog on a website. When we set up that blog section in Craft, we tell Craft that when somebody wants to view an individual entry of that blog, then they need to use blog/view. Copyright %Y Mijingo, LLC - %URL 5 Twig Templates in Craft by %author From a course at Mijingo.com Craft Routing to Templates Craft has a routing check sequence that every request goes through so it ends up at the right place, delivering the right page. The second-to-last check in the sequence to see if the request URI matches a template. If the URI is a valid template path (directory + template), then Craft will render that template. If you have a request for mysite.com/offices/austin template offices/austin.html and Craft goes through its checks and doesn’t find a match before it gets to the template check then it will render the offices/austin.html template. If you had an entry with that URI then it would render the entry instead (using whichever section entry template you specified). At the end of the check sequence, if there are no matches, Craft will return a 404 error. If you don’t have a custom 404 template, Craft will render the default view. To create a custom 404 template, add a 404.html template file in the root of your craft/templates directory and Craft will use it. Dynamic Routes There are times when you want to load a specific template but not at the URI that is a literal mapping of the template directory and template file name. In Craft this is done with Dynamic Routes. These routes are specified in the Control Panel and can map a URI to a template. This is handy for when you want to pass along other information in URI, like dates. A good example given in the Craft documentation is for an archive page. You want to pass create a news archive page for a year and month. Your URI is: news/year/month but your template is news/_archive . You can use Dynamic Routes in Craft to map news/2015/02 to news/_archive and then use the two last segments of the URL to determine which content to show. Introduction to Twig Copyright %Y Mijingo, LLC - %URL 6 Twig Templates in Craft by %author From a course at Mijingo.com Twig is a template engine for PHP applications. It takes a series of tags and compiles them into standard PHP that is then processed by PHP on your web server. It’s used by the development framework Symfony, the e-commerce platform Lemonstand, Drupal 8, and is similar to Jinja, the Django templating engine.