Chapters

13 Chapters | 1:14:58 |

01

Symfony 4: Let's Launch!

4:03
02

Our Micro-App & PhpStorm Setup

5:37
03

Routes, Controllers, Pages, oh my!

7:16
04

Symfony Flex & Aliases

5:51
05

The Twig Recipe

2:49
06

Twig ❤️

8:23
07

Web Debug Toolbar & the Profiler!

3:55
08

Debugging & Packs

3:16
09

Assets: CSS & JavaScript

8:51
10

Generating URLs

5:48
11

JavaScript & Page-Specific Assets

5:16
12

JSON API Endpoint

6:29
13

Services

7:24

This tutorial has a new version, check it out!

> Symfony 4 > Stellar Development with Symfony 4

09.

Assets: CSS & JavaScript

Autoplay

Previous Chapter

Next Chapter

Even astronauts - who generally spend their time staring into the black absyss - demand a site that is less ugly than this! Let's fix that!

If you download the course code from the page that you're watching this video on right now, inside the zip file, you'll find a start/ directory. And inside that, you'll see the same tutorial/ directory that I have here. And inside that... I've created a new base.html.twig. Copy that and overwrite our version in templates/:

            Copy Code

                        67 lines
            |
            templates/base.html.twig
        
            <!doctype html>
        
            <html lang="en">
        
                <head>
        
                    <title>{% block title %}Welcome to the SpaceBar{% endblock %}</title>
        
                    <meta charset="utf-8">
        
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
                    {% block stylesheets %}
        
                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        
                    {% endblock %}
        
                </head>
        
                <body>
        
                    <nav class="navbar navbar-expand-lg navbar-dark navbar-bg mb-5">
        
                        <a style="margin-left: 75px;" class="navbar-brand space-brand" href="#">The Space Bar</a>
        
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        
                        <span class="navbar-toggler-icon"></span>
        
                      </button>
        
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
        
                            <ul class="navbar-nav mr-auto">
        
                                 <li class="nav-item">
        
                                   <a style="color: #fff;" class="nav-link" href="#">Local Asteroids</a>
        
                                 </li>
        
                                 <li class="nav-item">
        
                                   <a style="color: #fff;" class="nav-link" href="#">Weather</a>
        
                                 </li>
        
                               </ul>
        
                            <form class="form-inline my-2 my-lg-0">
        
                                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        
                                <button class="btn btn-info my-2 my-sm-0" type="submit">Search</button>
        
                            </form>
        
                            <ul class="navbar-nav ml-auto">
        
                                <li class="nav-item dropdown" style="margin-right: 75px;">
        
                                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        
                              <img class="nav-profile-img rounded-circle" src="images/astronaut-profile.png">
        
                            </a>
        
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        
                                        <a class="dropdown-item" href="#">Profile</a>
        
                                        <a class="dropdown-item" href="#">Create Post</a>
        
                                        <a class="dropdown-item" href="#">Logout</a>
        
                                    </div>
        
                                </li>
        
                            </ul>
        
                        </div>
        
                    </nav>
        
                    {% block body %}{% endblock %}
        
                    <footer class="footer">
        
                        <div class="container text-center">
        
                            <span class="text-muted">Made with <i class="fa fa-heart" style="color: red;"></i> by the guys and gals at <a href="https://knpuniversity.com">KnpUniversity</a></span>
        
                        </div>
        
                    </footer>
        
                    {% block javascripts %}
        
                        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
        
                        <script>
        
                            $('.dropdown-toggle').dropdown();
        
                        </script>
        
                    {% endblock %}
        
                </body>
        
            </html>

On a technical level, this is basically the same as before: it has the same blocks: title stylesheets, body and javascripts at the bottom. But now, we have a nice HTML layout that's styled with Bootstrap.

If you refresh, it should look better. Woh! No change! Weird! Actually... this is more weird than you might think. Find your terminal and remove the var/cache/dev directory:

rm -rf var/cache/dev/*

What the heck is this? Internally, Symfony caches things in this directory. And... you normally don't need to think about this at all: Symfony is smart enough during development to automatically rebuild this cache whenever necessary. So... why am I manually clearing it? Well... because we copied my file... and because its "last modified" date is older than our original base.html.twig, Twig gets confused and thinks that the template was not updated. Seriously, this is not something to worry about in any other situation.

Referencing CSS Files

And when we refresh... there it is! Ok, it's still pretty ugly. That's because we're missing some CSS files!

In the tutorial/ directory, I've also prepped some css/, fonts/ and images/. All of these files need to be accessed by the user's browser, and that means they must live inside public/. Open that directory and paste them there.

By the way, Symfony has an awesome tool called Webpack Encore that helps process, combine, minify and generally do amazing things with your CSS and JS files. We are going to talk about Webpack Encore... but in a different tutorial. For now, let's get things setup with normal, static files.

The two CSS files we want to include are font-awesome.css and styles.css. And we don't need to do anything complex or special! In base.html.twig, find the stylesheets block and add a link tag.

But wait, why exactly are we adding the link tag inside the stylesheets block? Is that important? Well, technically... it doesn't matter: a link tag can live anywhere in head. But later, we might want to add additional CSS files on specific pages. By putting the link tags inside this block, we'll have more flexibility to do that. Don't worry: we're going to see an example of this with a JavaScript file soon.

So... what path should we use? Since public/ is the document root, it should just be /css/font-awesome.css:

            Copy Code

                            Show All Lines

                        69 lines
            |
            templates/base.html.twig
        
            <!doctype html>
        
            <html lang="en">
        
                <head>
        
                Show Lines

                                                    // ... lines 5 - 8
                            
                    {% block stylesheets %}
        
                Show Lines

                                                    // ... line 10
                            
                        <link rel="stylesheet" href="/css/font-awesome.css">
        
                Show Lines

                                                    // ... line 12
                            
                    {% endblock %}
        
                </head>
        
                Show Lines

                                                    // ... lines 15 - 67
                            
            </html>

Do the same thing for the other file: /css/styles.css:

            Copy Code

                            Show All Lines

                        69 lines
            |
            templates/base.html.twig
        
            <!doctype html>
        
            <html lang="en">
        
                <head>
        
                Show Lines

                                                    // ... lines 5 - 8
                            
                    {% block stylesheets %}
        
                Show Lines

                                                    // ... line 10
                            
                        <link rel="stylesheet" href="/css/font-awesome.css">
        
                        <link rel="stylesheet" href="/css/styles.css">
        
                    {% endblock %}
        
                </head>
        
                Show Lines

                                                    // ... lines 15 - 67
                            
            </html>

It's that simple! Refresh! Still not perfect, but much better!

The Not-So-Mystical asset Function

And now I'm going to slightly complicate things. Go back into PhpStorm's Preferences, search for "Symfony" and find the "Symfony" plugin. Change the "web" directory to public - it was called web in Symfony 3.

This is not required, but it will give us more auto-completion when working with assets. Delete the "font-awesome" path, re-type it, and hit tab to auto-complete:

            Copy Code

                            Show All Lines

                        69 lines
            |
            templates/base.html.twig
        
            <!doctype html>
        
            <html lang="en">
        
                <head>
        
                Show Lines

                                                    // ... lines 5 - 8
                            
                    {% block stylesheets %}
        
                Show Lines

                                                    // ... line 10
                            
                        <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
        
                Show Lines

                                                    // ... line 12
                            
                    {% endblock %}
        
                </head>
        
                Show Lines

                                                    // ... lines 15 - 67
                            
            </html>

Woh! It wrapped the path in a Twig asset() function! Do the same thing below for styles.css:

            Copy Code

                            Show All Lines

                        69 lines
            |
            templates/base.html.twig
        
            <!doctype html>
        
            <html lang="en">
        
                <head>
        
                Show Lines

                                                    // ... lines 5 - 8
                            
                    {% block stylesheets %}
        
                Show Lines

                                                    // ... line 10
                            
                        <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}">
        
                        <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
        
                    {% endblock %}
        
                </head>
        
                Show Lines

                                                    // ... lines 15 - 67
                            
            </html>

Here's the deal: whenever you link to a static asset - CSS, JS or images - you should wrap the path in this asset() function. But... it's not really that important. In fact, right now, it doesn't do anything: it will print the same path as before. But! In the future, the asset() function will give us more flexibility to version our assets or store them on a CDN.

In other words: don't worry about it too much, but do remember to use it!

Installing the asset Component

Actually, the asset() function does do something immediately - it breaks our site! Refresh! Ah!

The asset() function comes from a part of Symfony that we don't have installed yet. Fix that by running:

composer require asset

This installs the symfony/asset component. And as soon as Composer is done... we can refresh, and it works! To prove that the asset() function isn't doing anything magic, you can look at the link tag in the HTML source: it's the same boring /css/styles.css.

There is one other spot where we need to use asset(). In the layout, search for img. Ah, an img tag! Remove the src and re-type astronaut-profile:

            Copy Code

                            Show All Lines

                        69 lines
            |
            templates/base.html.twig
        
            <!doctype html>
        
            <html lang="en">
        
                Show Lines

                                                    // ... lines 3 - 15
                            
                <body>
        
                    <nav class="navbar navbar-expand-lg navbar-dark navbar-bg mb-5">
        
                Show Lines

                                                    // ... lines 18 - 21
                            
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
        
                Show Lines

                                                    // ... lines 23 - 34
                            
                            <ul class="navbar-nav ml-auto">
        
                                <li class="nav-item dropdown" style="margin-right: 75px;">
        
                                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        
                              <img class="nav-profile-img rounded-circle" src="{{ asset('images/astronaut-profile.png') }}">
        
                            </a>
        
                Show Lines

                                                    // ... lines 40 - 44
                            
                                </li>
        
                            </ul>
        
                        </div>
        
                    </nav>
        
                Show Lines

                                                    // ... lines 49 - 66
                            
                </body>
        
            </html>

Perfect! Refresh and enjoy our new avatar on the user menu. There's a lot of hardcoded data, but we'll make this dynamic over time.

Styling the Article Page

The layout is looking great! But the inside of the page... yea... that's still pretty terrible. Back in the tutorial/ directory, there is also an article.html.twig file. Don't copy this entire file - just copy its contents. Close it and open show.html.twig. Paste the new code at the top of the body block:

            Copy Code

                            Show All Lines

                        122 lines
            |
            templates/article/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="container">
        
                <div class="row">
        
                    <div class="col-sm-12">
        
                        <div class="show-article-container p-3 mt-4">
        
                            <div class="row">
        
                                <div class="col-sm-12">
        
                                    <img class="show-article-img" src="{{ asset('images/asteroid.jpeg') }}">
        
                                    <div class="show-article-title-container d-inline-block pl-3 align-middle">
        
                                        <span class="show-article-title ">Why do Asteroids Taste Like Bacon?</span>
        
                                        <br>
        
                                        <span class="align-left article-details"><img class="article-author-img rounded-circle" src="{{ asset('images/alien-profile.png') }}"> Mike Ferengi </span>
        
                                        <span class="pl-2 article-details"> 3 hours ago</span>
        
                                        <span class="pl-2 article-details"> 5 <a href="#" class="fa fa-heart-o like-article"></a> </span>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                            <div class="row">
        
                                <div class="col-sm-12">
        
                                    <div class="article-text">
        
                                        <p>Spicy jalapeno bacon ipsum dolor amet veniam shank in dolore. Ham hock nisi landjaeger cow,
        
                                            lorem proident beef ribs aute enim veniam ut cillum pork chuck picanha. Dolore reprehenderit
        
                                            labore minim pork belly spare ribs cupim short loin in. Elit exercitation eiusmod dolore cow
        
                                            turkey shank eu pork belly meatball non cupim.</p>
        
                                        <p>Laboris beef ribs fatback fugiat eiusmod jowl kielbasa alcatra dolore velit ea ball tip. Pariatur
        
                                            laboris sunt venison, et laborum dolore minim non meatball. Shankle eu flank aliqua shoulder,
        
                                            capicola biltong frankfurter boudin cupim officia. Exercitation fugiat consectetur ham. Adipisicing
        
                                            picanha shank et filet mignon pork belly ut ullamco. Irure velit turducken ground round doner incididunt
        
                                            occaecat lorem meatball prosciutto quis strip steak.</p>
        
                                        <p>Meatball adipisicing ribeye bacon strip steak eu. Consectetur ham hock pork hamburger enim strip steak
        
                                            mollit quis officia meatloaf tri-tip swine. Cow ut reprehenderit, buffalo incididunt in filet mignon
        
                                            strip steak pork belly aliquip capicola officia. Labore deserunt esse chicken lorem shoulder tail consectetur
        
                                            cow est ribeye adipisicing. Pig hamburger pork belly enim. Do porchetta minim capicola irure pancetta chuck
        
                                            fugiat.</p>
        
                                        <p>Sausage tenderloin officia jerky nostrud. Laborum elit pastrami non, pig kevin buffalo minim ex quis. Pork belly
        
                                            pork chop officia anim. Irure tempor leberkas kevin adipisicing cupidatat qui buffalo ham aliqua pork belly
        
                                            exercitation eiusmod. Exercitation incididunt rump laborum, t-bone short ribs buffalo ut shankle pork chop
        
                                            bresaola shoulder burgdoggen fugiat. Adipisicing nostrud chicken consequat beef ribs, quis filet mignon do.
        
                                            Prosciutto capicola mollit shankle aliquip do dolore hamburger brisket turducken eu.</p>
        
                                        <p>Do mollit deserunt prosciutto laborum. Duis sint tongue quis nisi. Capicola qui beef ribs dolore pariatur.
        
                                            Minim strip steak fugiat nisi est, meatloaf pig aute. Swine rump turducken nulla sausage. Reprehenderit pork
        
                                            belly tongue alcatra, shoulder excepteur in beef bresaola duis ham bacon eiusmod. Doner drumstick short loin,
        
                                            adipisicing cow cillum tenderloin.</p>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                            <div class="row">
        
                                <div class="col-sm-12">
        
                                    <p class="share-icons mb-5"><span class="pr-1">Share:</span> <i class="pr-1 fa fa-facebook-square"></i><i class="pr-1 fa fa-twitter-square"></i><i class="pr-1 fa fa-reddit-square"></i><i class="pr-1 fa fa-share-alt-square"></i></p>
        
                                </div>
        
                            </div>
        
                            <div class="row">
        
                                <div class="col-sm-12">
        
                                    <h3><i class="pr-3 fa fa-comment"></i>10 Comments</h3>
        
                                    <hr>
        
                                    <div class="row mb-5">
        
                                        <div class="col-sm-12">
        
                                            <img class="comment-img rounded-circle" src="{{ asset('images/astronaut-profile.png') }}">
        
                                            <div class="comment-container d-inline-block pl-3 align-top">
        
                                                <span class="commenter-name">Amy Oort</span>
        
                                                <div class="form-group">
        
                                                    <textarea class="form-control comment-form" id="articleText" rows="1"></textarea>
        
                                                </div>
        
                                                <button type="submit" class="btn btn-info">Comment</button>
        
                                            </div>
        
                                        </div>
        
                                    </div>
        
                                    <div class="row">
        
                                        <div class="col-sm-12">
        
                                            <img class="comment-img rounded-circle" src="{{ asset('images/alien-profile.png') }}">
        
                                            <div class="comment-container d-inline-block pl-3 align-top">
        
                                                <span class="commenter-name">Mike Ferengi</span>
        
                                                <br>
        
                                                <span class="comment"> Now would this be apple wood smoked bacon? Or traditional bacon - IMHO it makes a difference.</span>
        
                                                <p><a href="#">Reply</a></p>
        
                                            </div>
        
                                        </div>
        
                                    </div>
        
                                </div>
        
                            </div>
        
                        </div>
        
                    </div>
        
                </div>
        
            </div>
        
            <h1>{{ title }}</h1>
        
                Show Lines

                                                    // ... lines 99 - 122

Check it out in your browser. Yep! It looks cool... but all of this info is hardcoded. I mean, that article name is just static text.

Let's take the dynamic code that we have at the bottom and work it into the new HTML. For the title, use {{ title }}:

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/article/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="container">
        
                <div class="row">
        
                    <div class="col-sm-12">
        
                        <div class="show-article-container p-3 mt-4">
        
                            <div class="row">
        
                                <div class="col-sm-12">
        
                Show Lines

                                                    // ... line 13
                            
                                    <div class="show-article-title-container d-inline-block pl-3 align-middle">
        
                                        <span class="show-article-title ">{{ title }}</span>
        
                Show Lines

                                                    // ... lines 16 - 19
                            
                                    </div>
        
                                </div>
        
                            </div>
        
                Show Lines

                                                    // ... lines 23 - 94
                            
                        </div>
        
                    </div>
        
                </div>
        
            </div>
        
            {% endblock %}

Below, it prints the number of comments. Replace that with {{ comments|length }}:

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/article/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="container">
        
                <div class="row">
        
                    <div class="col-sm-12">
        
                        <div class="show-article-container p-3 mt-4">
        
                Show Lines

                                                    // ... lines 11 - 60
                            
                            <div class="row">
        
                                <div class="col-sm-12">
        
                                    <h3><i class="pr-3 fa fa-comment"></i>{{ comments|length }} Comments</h3>
        
                Show Lines

                                                    // ... lines 64 - 92
                            
                                </div>
        
                            </div>
        
                        </div>
        
                    </div>
        
                </div>
        
            </div>
        
            {% endblock %}

Oh, and at the bottom, there is a comment box and one actual comment. Let's find this and... add a loop! For comment in comments on top, and endfor at the bottom. For the actual comment, use {{ comment }}:

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/article/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="container">
        
                <div class="row">
        
                    <div class="col-sm-12">
        
                        <div class="show-article-container p-3 mt-4">
        
                Show Lines

                                                    // ... lines 11 - 60
                            
                            <div class="row">
        
                                <div class="col-sm-12">
        
                Show Lines

                                                    // ... lines 63 - 78
                            
                                    {% for comment in comments %}
        
                                    <div class="row">
        
                                        <div class="col-sm-12">
        
                Show Lines

                                                    // ... line 82
                            
                                            <div class="comment-container d-inline-block pl-3 align-top">
        
                Show Lines

                                                    // ... lines 84 - 85
                            
                                                <span class="comment"> {{ comment }}</span>
        
                Show Lines

                                                    // ... line 87
                            
                                            </div>
        
                                        </div>
        
                                    </div>
        
                                    {% endfor %}
        
                                </div>
        
                            </div>
        
                        </div>
        
                    </div>
        
                </div>
        
            </div>
        
            {% endblock %}

Delete the old code from the bottom... oh, but don't delete the endblock:

            Copy Code

                            Show All Lines

                        101 lines
            |
            templates/article/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="container">
        
                Show Lines

                                                    // ... lines 8 - 97
                            
            </div>
        
            {% endblock %}

Let's try it - refresh! It looks awesome! A bunch of things are still hardcoded, but this is much better.

It's time to make our homepage less ugly and learn about the second job of routing: route generation for linking.

33 Comments

Sort By

Chris Beecroft 5 years ago

I came across your comment(s) as I was tearing my hair out over a similar issue. I ended up going through all my additional ini files (check phpinfo() for a list of yours), and removing the contents of each one (restart server between each edit) until finally it worked.

The cause of my issue was
"zlib.output_compression = On"

I commented this out for now.

1 | Reply |

Roberto 4 years ago edited

Hi! I have a problem removing the cache. I insert the code rm -rf var/cache/dev/* in the console, but it responds rm is not a known command

| Reply |

Roberto Roberto 4 years ago

ok, solved. I was in cmd for windows so I installed bash to run that command. I'm very very noob at this

| Reply |

sadikoff SFCASTS Roberto 4 years ago edited

Hey Roberto

But why are you trying to remove cache with rm -rf var/cache/dev/*?

Cheers!

| Reply |

Mathis W. 4 years ago

Where can i find the tutorial example files?

| Reply |

MolloKhan SFCASTS Mathis W. 4 years ago edited

Hey Mathis W.

Do you mean the course code? If so, there is a "download" button at the top right corner of this page. Click it, and then select "Course Code", you will get a zip file with 2 folders, the start and finish directory.

Cheers!

| Reply |

wuwu 4 years ago

in the video at 6:20 we have src="images/astronaut-profile.png" when you added {{ asset() }} to it it loads the image.
I dont understand it. What's going on ?

In my own project in one of twig files i specified the path images/.../img.jpg" and it worked. I did the same in another twig file and it didn't worked.
It worked with asset function though but i want to drop asset func since it's no longer recommended.

| Reply |

weaverryan SFCASTS wuwu 4 years ago edited

Hey @wuwu!

Excellent question :). Let me clear this up a little bit:

1) First, the asset() function IS still recommended. In fact, i still use it in our Symfony 5 tutorial :). It's just not as commonly-needed anymore, because if you use Webpack Encore, then you have a different function you can use for your CSS and JS. But even in that case, you should still use asset() to point to images.

2) So let's talk about what the asset() function does. Basically... it does two things:

A) If you deploy to a CDN (where your assets are hosted on a different domain), you can add a little bit of configuration and all your assets paths will now point to that domain. If you need this functionality, it's great - and you'll be happy that you used `asset()` everywhere.

B) It detects whether your site is deployed at the root of your domain - e.g. example.com - or a sub-directory - e.g. example.com/sf-app-here. If it is under a sub-directory, it will automatically prefix all your paths with the subdirectory. So, `asset('images/astronaut-profile.png')` will become `/sf-app-here/images/astronaut-profile.png`.

At first look, it probably seems like neither of these are related to your situation. But actually, (B) IS doing something right now. Basically, in "normal" situation (where your site lives at the root of your domain like example.com or localhost:8000), the asset function does this:

`
asset('images/astronaut-profile.png')

BECOMES

/images/astronaut-profile.png
`

Yup. For 99% of the situations, the asset() function is a fancy way of adding a "/" at the beginning of the path :). And THAT is what makes the difference in your situation. Basically, if you put /images/astronaut-profile.png on both templates, it would work in both places (because this is basically equivalent to using the asset() function. But using relative paths - like ../images/img.jpg is never a good idea. Why? Imagine you have a path like that in your layout (so, it's loaded on every page). Look at these examples:

When I go to example.com/login, my browser will look for example.com/images/img.jpg (because it will look at the URL, go up one directory thanks to the "../", then add /images/img.jpg)
When I go to example.com/article/some-article, my browser will look for example.com/article/images/img.pjg (because it will look at the full URL, go up one directory to /article, then add "images/img.jpg").

That's a super long way of saying that putting relative paths in your template is a bad idea - and it's one of the things that asset() helps with :).

Let me know if that makes sense!

Cheers!

| Reply |

Sebastian Józef 4 years ago

Hi!
i cannot delete var/cache/dev, its auautomatically back and my css isn't working.
Help pls

| Reply |

sadikoff SFCASTS Sebastian Józef 4 years ago edited

Hey Sebastian Józef

var/cache/dev/ is automatically generated directory for DEV environment it's always generates when project running. What exactly the issue? What errors do you see on page or browser dev console?

Cheers!

| Reply |

Rob W. 5 years ago edited

there In your videos I noticed that you often scroll the PhpStorm code editor very smoothly in both the X and Y directions simultaneously while the cursor stays put. It reminds me of something like the hand tool in Photoshop for pan scrolling. I was wondering how you accomplish that? Is that a Mac thing? A PhpStorm plugin? A PhpStorm hotkey? Horizontal + Vertical mouse wheels? Thanks in advance!

| Reply |

weaverryan SFCASTS Rob W. 5 years ago edited

Hey Rob W.!

Ha! It's funny the things you take for granted... it didn't even occur to me that I was doing this :p. The answer is... probably boringly simple: it's the two-finger scroll on a touch pad. I don't use an external mouse ever - so that's where that comes from :).

Cheers!

| Reply |

Lars H. 5 years ago

The pictures are not loading for me after using assets.

| Reply |

Victor SFCASTS Lars H. 5 years ago

Hey Tim,

Could you give us a bit more context? What exactly you're doing? Could you show us a line of code of your img tag? Are you sure the path you specify in asset() is correct?

Cheers!

| Reply |

Diego alejandro P. 5 years ago

Hi guys I would like to know if it is mandatory to storage the user data in a public directory. what about security? if for example I have customer data storage different locations how can link that data to the user without put it in the public directory?

To be more clear how can I separate data from the business logic without have to put it in public/? for example a customized video or images?

| Reply |

sadikoff SFCASTS Diego alejandro P. 5 years ago edited

Hey Diego alejandro P.

Check out our cool uploads tutorial https://symfonycasts.com/sc... there are chapters about storing and rendering private files with security, and some cloud stuff

Cheers!

| Reply |

Yann 5 years ago

From the official symfony 4 doc:
Using Assetic to manage web assets in Symfony applications is no longer recommended. Instead, use Webpack Encore, which bridges Symfony apps with modern JavaScript-based tools to manage web assets.

| Reply |

Victor SFCASTS Yann 5 years ago

Hey Yann,

Yeah, better to use Webpack Encore instead of Assetic these days. Thanks for sharing this paragraph! And we have a free course about Webpack Encore here: https://symfonycasts.com/sc...

Cheers!

1 | Reply |

sadikoff SFCASTS 6 years ago

The only thing that left is logs. Try to find something in windows event viewer it's not very easy, but there can be logged php error which cause this fail. It helps me earlier.

| Reply |

Everton Júnior sadikoff 5 years ago

I just the same problem, and the cause was

"zlib.output_compression = On"

I commented it and everything is ok now.

| Reply |

sadikoff SFCASTS Everton Júnior 5 years ago edited

Hey Everton Júnior

Thanks for sharing your solution, hope it will help!

Cheers!

| Reply |

sadikoff SFCASTS 6 years ago

Interesting. I'm not sure but it looks like PHP throws errors in http headers, try to run server with default php.ini without additional extensions. Really don't know how to properly debug this situation, I had something like this some time ago and it was caused by php configuration.

| Reply |

sadikoff SFCASTS 6 years ago edited

@rlazarotto Hi!
Could you please provide your local environment information:
OS, PHP version and additional PHP extensions installed?

| Reply |

Victor SFCASTS 6 years ago edited

Hey Lazarotto!

Thank you for such detailed response, it helped much! Unfortunately, it's pretty weird problem that though I'm not sure about how to solve. I suppose you run this website with built in Symfony web server, i.e. "bin/console server:run", right? If so, you did everything correct: correctly included assets with asset() function, your source code in browser looks perfect, and I see you have all the assets you linked in the public/ directory. But if you run your website in a different way, please, try to use "bin/console server:run" instead.

To debug it further, here're some of my thoughts:

Could you try to open the website using local IP instead of "localhost", i.e. open
"http://127.0.0.1:8000/" in Chrome, does it look the same?
Please, open "http://127.0.0.1:8000/css/style.css" file - do you see its content in the browser? Also, open the Chrome Debug toolbar - do you see any errors in Network / Console / etc. tabs?
The last but not least, I see you don't use PhpStorm, so probably your text editor / IDE use invalid encoding. I'd recommend you to open this project in PhpStorm, and create a new stylesheets (important to create this file in PhpStorm, not in your current text editor), e.g. "public/css/test.css" and include this file in your template like:


Add some basic styles so you can see changes in the browser and open the website. Do you see the same net::ERR_INVALID_HTTP_RESPONSE problem for this test.css file?

I hope it helps to figure out the problem.

Cheers!

| Reply |

Victor SFCASTS 6 years ago

Hey Lazarotto,

Hm what about other browsers? Does it work there? Could you show us how you include the assets? Are you talking about JS, CSS, images? I wonder to see the line how you include them in your template. Btw, could you also debug URLs? What URL causes the net::ERR_INVALID_HTTP_RESPONSE error?

Cheers!

| Reply |

Otto K. 6 years ago

Hi Guys,
Here how I can use assets <img src="/theme/front/images/posts/{{ blog.picture }}') }}">
I have this in for []
Thanks.

| Reply |

Victor SFCASTS Otto K. 6 years ago

Hey Student,

You have a single quote after "{{ blog.picture }}", I suppose that should be removed ;)

Cheers!

| Reply |

Otto K. 6 years ago

Hi all,
Exp. blog.picture value is "sample.jpg", how I can here use assets()
<img src="theme/front/images/posts/{{ blog.picture }}"/>
Thanks.

| Reply |

Victor SFCASTS Otto K. 6 years ago edited

Hey Student!

Good question! Here's how this image will look like with Twig asset() function:


<img src="{{ asset('theme/front/images/posts/' ~ blog.picture) }}"/>

So as you can see, you need to get rid of curly braces inside twig expressions, and that tilda char ("~") is the same as dot in PHP files, i.e. it's just a concatenation operator.

Cheers!

| Reply |

Szklenár Ferenc 6 years ago

Hi! A big thanks for this tutorial i love symfony so much! This is THE framework i was looking for.
But i have a problem in this chapter. I was looking for a solution but not yet solved.
I do exactly the same that you in the tutorial but i have an error message.
I installed Symfony 4.1 website-skeleton and this is the message i get: "An exception has been thrown during the rendering of a template ("Asset manifest file "/Applications/MAMP/htdocs/Github/php-symfony-practice/public/build/manifest.json" does not exist.")."
Any advice?

| Reply |

weaverryan SFCASTS Szklenár Ferenc 6 years ago edited

Hey Szklenár Ferenc!

Ah! I'm so happy to hear that! The further you get into Symfony, the more rewarding it will be :).

So, funny story about that error. I caused it :). We recently made a change to a recipe (I approved it) for one of the core Symfony packages. It had an unintended consequence, and you're seeing it! Basically, the manifest.json file is related to Webpack Encore: a tool in the Symfony world that we're not talking about in this tutorial (but we DO have a tutorial on Encore, and Encore is great!). By default, because website-skeleton installs Encore, Encore requires this file to be present. I think we're going to remove Encore by default (https://github.com/symfony/website-skeleton/pull/31), which will solve this problem. Later, when you install Encore, you will of course go through all the steps needed, which will ultimately create this required manifest.json file.

The fix is this:


composer remove encore

That will remove the package & the configuration files that are causing this error. Later, when you're ready to use Encore, you can just reinstall it, follow the docs and... boom! You're good to go :).

Let me know if this helps!

Cheers!

| Reply |

Jonathan V. 6 years ago

Hi, first thanks for the great tutorial. But where i can get the Demo HTML / CSS Files? I can't find a download link.
Thanks

| Reply |

Victor SFCASTS Jonathan V. 6 years ago

Hey Joni,

Thank *you*! If you're talking about start/ and finish/ directories with the code from this screencast - you can find "Download" button in the top right corner of this page, then see "Course code" link. But this feature is available to our subscribers or course owners only. If you don't have a subscription - you can find the start code in our public repo, see https://github.com/knpunive...

Let me know if I understand you wrong.

Cheers!

| Reply |

Symfony 4

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "sensio/framework-extra-bundle": "^5.1", // v5.1.3
        "symfony/asset": "^4.0", // v4.0.3
        "symfony/console": "^4.0", // v4.0.14
        "symfony/flex": "^1.0", // v1.17.6
        "symfony/framework-bundle": "^4.0", // v4.0.14
        "symfony/lts": "^4@dev", // dev-master
        "symfony/twig-bundle": "^4.0", // v4.0.3
        "symfony/web-server-bundle": "^4.0", // v4.0.3
        "symfony/yaml": "^4.0" // v4.0.14
    },
    "require-dev": {
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.4
        "sensiolabs/security-checker": "^5.0", // v5.0.3
        "symfony/debug-bundle": "^3.3|^4.0", // v4.0.3
        "symfony/dotenv": "^4.0", // v4.0.14
        "symfony/monolog-bundle": "^3.0", // v3.1.2
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.0.3
        "symfony/profiler-pack": "^1.0", // v1.0.3
        "symfony/var-dumper": "^3.3|^4.0" // v4.0.3
    }
}

Previous Chapter

Next Chapter

Assets: CSS & JavaScript

Share this awesome video!

Referencing CSS Files

The Not-So-Mystical asset Function

Installing the asset Component

Styling the Article Page

33 Comments

Delete comment?

What PHP libraries does this tutorial use?

	<!doctype html>
	<html lang="en">

	<head>
	<title>{% block title %}Welcome to the SpaceBar{% endblock %}</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	{% block stylesheets %}
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	{% endblock %}
	</head>

	<body>
	<nav class="navbar navbar-expand-lg navbar-dark navbar-bg mb-5">
	<a style="margin-left: 75px;" class="navbar-brand space-brand" href="#">The Space Bar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item">
	<a style="color: #fff;" class="nav-link" href="#">Local Asteroids</a>
	</li>
	<li class="nav-item">
	<a style="color: #fff;" class="nav-link" href="#">Weather</a>
	</li>
	</ul>
	<form class="form-inline my-2 my-lg-0">
	<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	<button class="btn btn-info my-2 my-sm-0" type="submit">Search</button>
	</form>
	<ul class="navbar-nav ml-auto">
	<li class="nav-item dropdown" style="margin-right: 75px;">
	<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	<img class="nav-profile-img rounded-circle" src="images/astronaut-profile.png">
	</a>
	<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
	<a class="dropdown-item" href="#">Profile</a>
	<a class="dropdown-item" href="#">Create Post</a>
	<a class="dropdown-item" href="#">Logout</a>
	</div>
	</li>
	</ul>
	</div>
	</nav>

	{% block body %}{% endblock %}

	<footer class="footer">
	<div class="container text-center">
	<span class="text-muted">Made with <i class="fa fa-heart" style="color: red;"></i> by the guys and gals at <a href="https://knpuniversity.com">KnpUniversity</a></span>
	</div>
	</footer>


	{% block javascripts %}
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
	<script>
	$('.dropdown-toggle').dropdown();
	</script>
	{% endblock %}
	</body>
	</html>

	<!doctype html>
	<html lang="en">
Show Lines	// ... lines 3 - 15
	<body>
	<nav class="navbar navbar-expand-lg navbar-dark navbar-bg mb-5">
Show Lines	// ... lines 18 - 21
	<div class="collapse navbar-collapse" id="navbarNavDropdown">
Show Lines	// ... lines 23 - 34
	<ul class="navbar-nav ml-auto">
	<li class="nav-item dropdown" style="margin-right: 75px;">
	<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	<img class="nav-profile-img rounded-circle" src="{{ asset('images/astronaut-profile.png') }}">
	</a>
Show Lines	// ... lines 40 - 44
	</li>
	</ul>
	</div>
	</nav>
Show Lines	// ... lines 49 - 66
	</body>
	</html>

Show Lines	// ... lines 1 - 4
	{% block body %}

	<div class="container">
	<div class="row">
	<div class="col-sm-12">
	<div class="show-article-container p-3 mt-4">
	<div class="row">
	<div class="col-sm-12">
	<img class="show-article-img" src="{{ asset('images/asteroid.jpeg') }}">
	<div class="show-article-title-container d-inline-block pl-3 align-middle">
	<span class="show-article-title ">Why do Asteroids Taste Like Bacon?</span>
	<br>
	<span class="align-left article-details"><img class="article-author-img rounded-circle" src="{{ asset('images/alien-profile.png') }}"> Mike Ferengi </span>
	<span class="pl-2 article-details"> 3 hours ago</span>
	<span class="pl-2 article-details"> 5 <a href="#" class="fa fa-heart-o like-article"></a> </span>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-sm-12">
	<div class="article-text">
	<p>Spicy jalapeno bacon ipsum dolor amet veniam shank in dolore. Ham hock nisi landjaeger cow,
	lorem proident beef ribs aute enim veniam ut cillum pork chuck picanha. Dolore reprehenderit
	labore minim pork belly spare ribs cupim short loin in. Elit exercitation eiusmod dolore cow
	turkey shank eu pork belly meatball non cupim.</p>

	<p>Laboris beef ribs fatback fugiat eiusmod jowl kielbasa alcatra dolore velit ea ball tip. Pariatur
	laboris sunt venison, et laborum dolore minim non meatball. Shankle eu flank aliqua shoulder,
	capicola biltong frankfurter boudin cupim officia. Exercitation fugiat consectetur ham. Adipisicing
	picanha shank et filet mignon pork belly ut ullamco. Irure velit turducken ground round doner incididunt
	occaecat lorem meatball prosciutto quis strip steak.</p>

	<p>Meatball adipisicing ribeye bacon strip steak eu. Consectetur ham hock pork hamburger enim strip steak
	mollit quis officia meatloaf tri-tip swine. Cow ut reprehenderit, buffalo incididunt in filet mignon
	strip steak pork belly aliquip capicola officia. Labore deserunt esse chicken lorem shoulder tail consectetur
	cow est ribeye adipisicing. Pig hamburger pork belly enim. Do porchetta minim capicola irure pancetta chuck
	fugiat.</p>

	<p>Sausage tenderloin officia jerky nostrud. Laborum elit pastrami non, pig kevin buffalo minim ex quis. Pork belly
	pork chop officia anim. Irure tempor leberkas kevin adipisicing cupidatat qui buffalo ham aliqua pork belly
	exercitation eiusmod. Exercitation incididunt rump laborum, t-bone short ribs buffalo ut shankle pork chop
	bresaola shoulder burgdoggen fugiat. Adipisicing nostrud chicken consequat beef ribs, quis filet mignon do.
	Prosciutto capicola mollit shankle aliquip do dolore hamburger brisket turducken eu.</p>

	<p>Do mollit deserunt prosciutto laborum. Duis sint tongue quis nisi. Capicola qui beef ribs dolore pariatur.
	Minim strip steak fugiat nisi est, meatloaf pig aute. Swine rump turducken nulla sausage. Reprehenderit pork
	belly tongue alcatra, shoulder excepteur in beef bresaola duis ham bacon eiusmod. Doner drumstick short loin,
	adipisicing cow cillum tenderloin.</p>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-sm-12">
	<p class="share-icons mb-5"><span class="pr-1">Share:</span> <i class="pr-1 fa fa-facebook-square"></i><i class="pr-1 fa fa-twitter-square"></i><i class="pr-1 fa fa-reddit-square"></i><i class="pr-1 fa fa-share-alt-square"></i></p>
	</div>
	</div>
	<div class="row">
	<div class="col-sm-12">
	<h3><i class="pr-3 fa fa-comment"></i>10 Comments</h3>
	<hr>

	<div class="row mb-5">
	<div class="col-sm-12">
	<img class="comment-img rounded-circle" src="{{ asset('images/astronaut-profile.png') }}">
	<div class="comment-container d-inline-block pl-3 align-top">
	<span class="commenter-name">Amy Oort</span>
	<div class="form-group">
	<textarea class="form-control comment-form" id="articleText" rows="1"></textarea>
	</div>
	<button type="submit" class="btn btn-info">Comment</button>
	</div>
	</div>
	</div>

	<div class="row">
	<div class="col-sm-12">
	<img class="comment-img rounded-circle" src="{{ asset('images/alien-profile.png') }}">
	<div class="comment-container d-inline-block pl-3 align-top">
	<span class="commenter-name">Mike Ferengi</span>
	<br>
	<span class="comment"> Now would this be apple wood smoked bacon? Or traditional bacon - IMHO it makes a difference.</span>
	<p><a href="#">Reply</a></p>
	</div>
	</div>
	</div>

	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<h1>{{ title }}</h1>
Show Lines	// ... lines 99 - 122