Symfony2: How to enable assets in combination with Twig inheritance?

Question

I am currently developing a web application using Symfony 2.1.0.

I read the chapter of the Templating book, and I'm trying to incorporate assets into my web pages (right now, this is just one style sheet).

I use the three-level inheritance system that is mentioned in the book, and my application structure currently looks like this:

• applications / resources / opinions /
  • base.html.twig: A base template containing a title, style sheets, and body blocks.
• SRC / My / PageBundle / Resources / Views
  • layout.html.twig: layout template (extension of the base template), adding the main stylesheet to the stylesheet block and overwriting the body block, including navigation.html.twig and defining the content block
  • layout-admin.html.twig: the same as above, but including navigation-admin.html.twig
  • SRC / My / PageBundle / Resources / Opinions / Main
    • standard templates that extend the layout template and overwrite its content block
  • SRC / My / PageBundle / Resources / Views / Administration
    • administration templates. Same as above, but extension of administration layout template.
• CSS / My / PageBundle / Resources / State / CSS
  • main.css: main stylesheet

As you can see, I put the stylesheet in my package. I do not know if this is good practice or not.

Now, the thing is, in layout.html I added the following:

{% block stylesheets %} {{ parent() }} <link rel="stylesheet" type="text/css" href="{{ asset('css/main.css)' }}" /> {% endblock %} 

But asset('css/main.css') just refers to /css/main.css , whereas ./app/console assets:install installs assets in web/bundles/mypagebundle/ . I don’t like the fact that in this way the name of my package will be publicly available (which may make users suspect that I am using Symfony, and I like to maintain the inside of my web page, well, the inside). Is it possible to change the directory in which assets:install will install the assets? It seems tedious to me to manually set assets in web /.

I also think about using Assetic for asset management, as I personally like the ability to automatically minimize my scripts / style sheets and store them all together in one file. However, I heard that this is not possible if you include style sheets at different levels, i.e. It will not work with a three-level inheritance system. Can I get around this? Also, will using Assetic allow me to hide the name of my package from the public?

Answer 1

Using assetic will concern all your problems.

I heard that this is not possible if you include stylesheets at different levels, i.e. will not work with a three-level inheritance system

You can, but it will generate a css file for each level (exactly the same as with active ()).

Example:

location:

 {% block stylesheets %} {{ parent() }} {% stylesheets 'main.css' %} <link rel="stylesheet" type="text/css" href="{{ asset_url }}" /> {% endstylesheets %} {% endblock %} 

sub-template:

 {% block stylesheets %} {{ parent() }} {% stylesheets 'sub.css' %} <link rel="stylesheet" type="text/css" href="{{ asset_url }}" /> {% endstylesheets %} {% endblock %} 

result:

 <link rel="stylesheet" type="text/css" href="..." /> <link rel="stylesheet" type="text/css" href="..." /> 

Alternatively, the subpattern can completely override the style sheet block, so only one style sheet is created (but it is less dry):

 {% block stylesheets %} {% stylesheets 'main.css' 'sub.css' %} <link rel="stylesheet" type="text/css" href="{{ asset_url }}" /> {% endstylesheets %} {% endblock %} 

Result (during production / without debugging):

 <link rel="stylesheet" type="text/css" href="..." />