How do I add assets using Twig/Assetic and other weird issues with Twig?

Question

(code are at the bottom)

Hello. I am trying to use Twig/Assetic (using app_dev.php here) and I'm getting some problems/weird behaviours.

I'm following this guide to add js files and it's not working for me. I looked at the page source using firebug and no script tags are being added. I am 100% sure there are .js files in the directory.
I tried similar technique with css and it's not showing up too.
I am using the extends feature. My base file (base.html.twig) is one directory up the child template. But it's weird that the that's in the base template is not showing up in the rendered page.
In addition to no. 3, I called my block "body" as a container for the child template. I tried changing this to "content" like seen in this page and it just displays blank. There's no typo so it can't be that. I changed it back to "body" and it works fine. Just weird that it seems to be hardcoded to "body"
Also tried attaching a css file using asset function and it's not working too. I used "php app/console asset:install web --symlink" to create the symlinks. I checked that the css files can be seen via the symlink and the files are there.
that is present in my base template is not showing up on the rendered page.

Any ideas on how to fix my issues?

Thanks a lot

base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>{% block title %}Test Application{% endblock %}</title>
        {% block stylesheets %}
            {% stylesheets '@MyAppMyBundle/Resources/public/css/*' filter='cssrewrite' %}
                <link rel="stylesheet" href="{{ asset_url }}" />
            {% endstylesheets %}
        {% endblock %}
        {% block javascripts %}
            {% stylesheets '@MyAppMyBundle/Resources/public/js/*' %}
                 <script type="text/javascript" src="{{ asset_url }}"></script>
            {% stylesheets %}
        {% endblock %}
    </head>
    <body>
        <div id="content">
            {% block body %}{% endblock %}
        </div>
        <div id="footer">
            <hr>test<hr>
        </div>
    </body>
</html>

details.html.twig

{% extends "base.html.twig" %}

{% block body %}
    {{ form(form) }}
{% endblock %}

attached css using asset function

<link rel="stylesheet" href="{{ asset("bundles/myappmybundle/css/my.css") }}" />

In your example you have stylesheets where it should be javascripts and you have javascripts where is should be endjavascripts — hcoat
Your edit is incorrect. I only bring it up because it would cause issues if you are using it in your real file. — hcoat

2one2 2one2 · Accepted Answer · 2014-10-30T05:10:15

i suggest you to view your page source info so you can check if your sources are really in the web folder or are pointing in another directory, symfony stores all css and javascript files in the web folder and when you do php app/console assetic:dump, symfony will dump all the web resources from the bundle to the web folder.

when you check your java scripts or css, its better to see it from the generated page source to check the urls.

How do I add assets using Twig/Assetic and other weird issues with Twig?

1 Answers