WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.126 --> 00:00:04.036 align:middle We have an HTML layout, yay! 00:00:04.226 --> 00:00:05.596 align:middle Good for us! 00:00:05.686 --> 00:00:08.166 align:middle But... it's super boring... 00:00:08.476 --> 00:00:09.846 align:middle and that's just no fun. 00:00:10.316 --> 00:00:13.076 align:middle Besides, I want to talk about assets! 00:00:13.076 --> 00:00:17.276 align:middle If you download the code for this project, in the start/ directory, 00:00:17.346 --> 00:00:19.076 align:middle you'll find a tutorial/ directory. 00:00:19.696 --> 00:00:21.616 align:middle I've already copied this into my project. 00:00:21.916 --> 00:00:27.146 align:middle It holds some goodies that we need to help get things looking less ugly, and more interesting! 00:00:27.266 --> 00:00:30.246 align:middle First, copy the 4 directories in web/... 00:00:30.476 --> 00:00:41.326 align:middle to web/: this includes some CSS, images, JS and vendor files for Bootstrap and FontAwesome: 00:00:42.036 --> 00:00:47.456 align:middle These are boring, normal, traditional static files: we're not doing anything fancy 00:00:47.456 --> 00:00:49.586 align:middle with frontend assets in this screencast. 00:00:50.496 --> 00:00:54.606 align:middle Ok, important thing: the web/ directory is the document root. 00:00:55.096 --> 00:00:58.556 align:middle In other words, anything in web/ can be accessed by the public. 00:00:58.676 --> 00:01:05.426 align:middle If I wanted to load up that favicon.ico, I'd use my hostname /favicon.ico - 00:01:05.426 --> 00:01:10.366 align:middle like http://localhost:8000/favicon.ico. 00:01:10.486 --> 00:01:14.956 align:middle If a file is outside of web, then it's not publicly accessible. 00:01:15.906 --> 00:01:21.776 align:middle Ok, more work: go into the app/ directory and copy the new base.html.twig file. 00:01:22.326 --> 00:01:27.256 align:middle Paste that over the original and open it up: Hey! 00:01:27.506 --> 00:01:29.516 align:middle We have some real-looking HTML! 00:01:30.096 --> 00:01:33.066 align:middle To bring this to life, we need to include some of those CSS 00:01:33.066 --> 00:01:35.906 align:middle and JS assets that we just put into web/. 00:01:36.396 --> 00:01:40.406 align:middle And here's the key: Symfony doesn't care about your assets... 00:01:40.866 --> 00:01:41.446 align:middle at all. 00:01:41.646 --> 00:01:44.626 align:middle It's not personal, it keeps things simple. 00:01:45.726 --> 00:01:52.006 align:middle You include CSS and JS files the way you always have: with tried-and-true link and script tags. 00:01:53.216 --> 00:01:57.706 align:middle These paths are relative to the web/ directory, because that's the document root. 00:01:58.746 --> 00:02:03.706 align:middle Ok ok, in reality there are two little-itty-bitty Symfony things 00:02:03.706 --> 00:02:05.236 align:middle to show you about assets. 00:02:05.366 --> 00:02:10.186 align:middle First, notice that the link tags live inside a block called stylesheets: 00:02:10.926 --> 00:02:13.886 align:middle Really, technically, that does... 00:02:14.056 --> 00:02:14.496 align:middle nothing! 00:02:15.466 --> 00:02:19.366 align:middle Seriously: you don't have to do this, it will make no difference... 00:02:19.366 --> 00:02:20.376 align:middle for now. 00:02:21.016 --> 00:02:26.556 align:middle But, in the future, doing this will give you the power to add page-specific CSS 00:02:26.846 --> 00:02:31.806 align:middle by adding more link tags to the bottom of the stylesheets block from inside a child template. 00:02:32.426 --> 00:02:33.466 align:middle I'll show you that later. 00:02:34.016 --> 00:02:39.936 align:middle Just know that it's a good practice to put CSS inside of a block, like stylesheets. 00:02:40.016 --> 00:02:45.866 align:middle The same is true for script tags: I've got mine in a block called javascripts: 00:02:46.036 --> 00:02:49.616 align:middle You're probably already looking at the second important Symfony thing 00:02:49.616 --> 00:02:52.046 align:middle about assets: the asset() function. 00:02:52.666 --> 00:02:57.726 align:middle Whenever you refer to a static file, you'll wrap the path in {{ asset() }}. 00:02:58.696 --> 00:02:59.206 align:middle This does... 00:02:59.676 --> 00:03:00.336 align:middle you guessed it! 00:03:00.906 --> 00:03:01.636 align:middle Nothing! 00:03:02.216 --> 00:03:04.286 align:middle Ok, that's not totally true. 00:03:04.636 --> 00:03:10.886 align:middle But it really doesn't do much, and you'd be just fine if you forgot it and hardcoded the path. 00:03:10.886 --> 00:03:12.606 align:middle So what does asset() do? 00:03:13.546 --> 00:03:18.316 align:middle Well, if you eventually deploy and use a CDN, it will save your butt. 00:03:18.866 --> 00:03:26.006 align:middle With just one tiny config change, Symfony can prefix every static URL with your CDN host. 00:03:26.166 --> 00:03:37.166 align:middle So /css/styles.css becomes http://superfastcdn.com/css/styles.css. 00:03:37.166 --> 00:03:41.056 align:middle That's pretty awesome, so be good and use asset() in case you need it. 00:03:42.256 --> 00:03:44.466 align:middle You can also do some cool cache-busting stuff. 00:03:45.386 --> 00:03:50.346 align:middle Other than the asset stuff, the base layout is just like before: it has a title block, 00:03:50.716 --> 00:03:53.426 align:middle a body block in the middle and some javascripts. 00:03:53.896 --> 00:03:55.646 align:middle We just added the pretty markup. 00:03:55.646 --> 00:03:57.946 align:middle Let's finish this! 00:03:58.206 --> 00:04:04.936 align:middle Copy show.html.twig and overwrite our boring version: And yep, it's also similar to before - 00:04:05.236 --> 00:04:08.496 align:middle I swear I'm not trying to sneak in any magic! 00:04:09.206 --> 00:04:16.836 align:middle It still extends base.html.twig, prints out the genus name and loops over the notes. 00:04:16.866 --> 00:04:17.726 align:middle Oh, and hey! 00:04:18.276 --> 00:04:23.366 align:middle When I refer to the image - which is a static file - I'm using the asset() function. 00:04:27.776 --> 00:04:28.986 align:middle Ok, ready for this? 00:04:29.396 --> 00:04:30.366 align:middle Refresh the page. 00:04:32.276 --> 00:04:32.886 align:middle Boom! 00:04:33.046 --> 00:04:34.156 align:middle So much prettier. 00:04:34.576 --> 00:04:39.026 align:middle These days, you can do some pretty crazy things with assets via frontend tools 00:04:39.026 --> 00:04:41.516 align:middle like Gulp or PHP tools like Assetic. 00:04:41.906 --> 00:04:43.966 align:middle But you might not need any of these. 00:04:44.316 --> 00:04:45.966 align:middle If you can, keep it simple.