Adding JS and CSS cleanly from included Twig templates

Question

I'm looking to find out if there's a clean way to add JS and CSS from included templates.

So, for example, if layout.html.twig has:

{% include 'GenericBundle:Generic:page.html.twig' with {'data': data} %}
...
{% block javascript %}

    {% javascripts
        '@GenericBundle/Resources/public/js/app/jquery/jquery.min.js'
        '@GenericBundle/Resources/public/js/lib/bootstrap/bootstrap.min.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

{% endblock %}

And in the generic bundle page I'd like to include some more Javascript but add it to the established Javascript block to keep to HTML and JS best practices.

Is there a clean way to do this? I'm using Symfony2, and could probably cludge together a solution using Singletons and such, but I'd rather a cleaner method if there's one available.

Linkmichiel · Accepted Answer · 2016-04-08 13:39:20Z

21

I know I'm a little late to the party, but with Twig 1.2, you can utilize the use tag and the block function:

GenericBundle:Generic:page.html.twig

{% block javascripts %}
    <script src="..."></script>
{% endblock %}
{% block included_content %}
   Bar
{% endblock %}

layout.html.twig

{% use 'GenericBundle:Generic:page.html.twig' with javascripts as page_javascripts %}

{% block javascript %}

    {% javascripts
        '@GenericBundle/Resources/public/js/app/jquery/jquery.min.js'
        '@GenericBundle/Resources/public/js/lib/bootstrap/bootstrap.min.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    {{ block('page_javascript') }} // Don't forget the 'braces'

{% endblock %}

...
{{ block('included_content') }} // Don't forget the 'braces'

edited Apr 8, 2016 at 13:39

Linkmichiel

2,1304 gold badges23 silver badges27 bronze badges

answered Sep 16, 2013 at 16:06

Daniel Hepper

30.1k10 gold badges78 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vincent Pazeller Over a year ago

You must put quotes in {{ block('page_javascript') }} for this to work, otherwise you get a "Variable ... does not exists..." error message

webDEVILopers Over a year ago

{% include ... with { javascripts: block('javascripts') } %} worked fine for me.

Collectives™ on Stack Overflow

Adding JS and CSS cleanly from included Twig templates

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related