Not sure what's wrong but I can't include javascript and/or stylesheet files. Using Symfony3
{% block javascripts %}
{% javascripts
'#AppBundle/assets/js/jquery.js'
'#AppBundle/assets/bootstrap/js/bootstrap.min.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
getting this error:
Variable " asset_url" does not exist in security/login.html.twig at line 32
Overall, the code should probably look like this:
{% block javascripts %}
{% javascripts
'#AppBundle/assets/js/jquery.js'
'#AppBundle/assets/bootstrap/js/bootstrap.min.js'
output='js/compiled/app.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
If it doesn't work then make sure that path to these files is correct.
Related
I'm using libraries like amcharts that have many js files.
I put amcharts in web/js/amcharts as suggested julesbou and then
{% block javascripts %}
{{ parent() }}
{% javascripts '/js/amcharts/amcharts.js' %}
<script src="{{ asset_url }}" type="text/javascript"> </script>
{% endjavascripts %}
{% endblock %}
But I get [exception] 500 | Internal Server Error | RuntimeException
[message] The source file "/amcharts/amcharts.js" does not exist.
Edit
To include a file under web try removing the forward slash from your path i.e.
{% javascripts 'js/amcharts/amcharts.js' %}
^ remove / here
Suppose you have put your javascripts sources named xyz.js in 'js/' folder is source then you will have to fetch this javascripts via your "app/resources/base.html" file loke this :
{% block javascripts %}
<script src="{{ asset('js/xyz.js') }}" type="text/javascript"> </script>
{% endblock %}
and when in remaining twig file you extends base.html.twig like below :
{% extends '::base.html.twig' %}
{% block display %}
{% endblockdisplay %}
it automatically fetch your javascripts . Even if you want to modify the javascripts code for that particular child twig then you will have to write like as :
{% extends '::base.html.twig' %}
{% block display %}
// Your display content here
{% endblockdisplay %}
{% block javascripts %}
{{ parent() }}
// Your changing code here
{% endblockjavascripts %}
I just started using Twig instead of PHP templates and I've seen that people sometimes use
{% block javascripts %}
{% endblock %}
and sometimes
{% javascripts %}
{% endjavascripts %}
are these two equivalent? which one should I use?
{% javascripts %}
{% endjavascripts %}
is related to assetic library
{% block javascripts %}
{% endblock %}
is just a random block named javascripts
more here :
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
Here is my code:
{% block js %}
{% javascripts filter='?yui_js' output='js/m/myfiles.js'
'#MyBundle/Resources/public/js/m/one.js'
'#MyBundle/Resources/public/js/m/two.js'
'#MyBundle/Resources/public/js/m/three.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
I would like to be able to change my output value based on variable.
something like this:
{% set myOutput = 'js/m/myfiles_v2.js'%}
{% block js %}
{% javascripts filter='?yui_js' output=myOutput
'#MyBundle/Resources/public/js/m/one.js'
'#MyBundle/Resources/public/js/m/two.js'
'#MyBundle/Resources/public/js/m/three.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
But when I do that i get "Unexpected token "name" of value "myOutput" ("string" expected). Is there a way around this?
I think you need to create own assetic filter which will extends yui_js filter and overwrite function to create name.
Assetic filter is a service implements FilterInterface.
Here is sample definition of you filter as service:
<service id="my.if.filter" class="MyBundle\FilterClass">
<tag name="assetic.filter" alias="my_alias" />
<argument></argument>
<argument>....</argument>
</service>
Here is a tutorial:
http://richardmiller.co.uk/2011/05/24/symfony2-make-your-own-assetic-filter/
I'm using MopaBootstrapBundle in Symfony 2.1.3 with Twig templates.
This bundle has base.html.twig template which contains scripts block:
{% block foot_script %}
{# To only use a subset or add more js overwrite and copy paste this block
To speed up page loads save a copy of jQuery in your project and override this block to include the correct path
Otherwise the regeneration is done on every load in dev more with use_controller: true
#}
{% javascripts
'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-transition.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-modal.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-dropdown.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-scrollspy.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-tab.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-tooltip.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-popover.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-alert.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-button.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-collapse.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-carousel.js'
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-typeahead.js'
'#MopaBootstrapBundle/Resources/public/js/mopabootstrap-collection.js'
'#MopaBootstrapBundle/Resources/public/js/mopabootstrap-subnav.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock foot_script %}
I'm extending it in my template using:
{% extends 'MopaBootstrapBundle::base.html.twig' %}
{% block foot_script %}{% endblock foot_script %}
But it still tries to load Bundle's base.html.twig template and I get:
An exception has been thrown during the compilation of a template
("Unable to find file
"#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-transition.js".")
in "MopaBootstrapBundle::base.html.twig".
What I've found out is, that if you extend it like this:
{% extends 'MopaBootstrapBundle::base.html.twig' %}
{% block foot_script %}
{% javascripts
'#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-typeahead.js'
'#MopaBootstrapBundle/Resources/public/js/mopabootstrap-collection.js'
'#MopaBootstrapBundle/Resources/public/js/mopabootstrap-subnav.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock foot_script %}
Note the typeahead.js
I get:
An exception has been thrown during the compilation of a template
("Unable to find file
"#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-typeahead.js".")
in "MopaBootstrapBundle::base.html.twig".
If I remove just one line:
{% extends 'MopaBootstrapBundle::base.html.twig' %}
{% block foot_script %}
{% javascripts
'#MopaBootstrapBundle/Resources/public/js/mopabootstrap-collection.js'
'#MopaBootstrapBundle/Resources/public/js/mopabootstrap-subnav.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock foot_script %}
I get:
An exception has been thrown during the compilation of a template
("Unable to find file
"#MopaBootstrapBundle/Resources/bootstrap/js/bootstrap-transition.js".")
in "MopaBootstrapBundle::base.html.twig".
It still tries to load all the scripst from base template.
Any suggestions how to override *foot_script* block to make it empty and not to load these JS files?
What you want is to embed the MopaBootstrapBundle::base.html.twig instead of extending it. You should use Twig's embed tag:
{% embed 'MopaBootstrapBundle::base.html.twig' %}
{% block foot_script %}{% endblock foot_script %}
{% endembed %}
From Twig's documentation:
The embed tag combines the behaviour of include and extends. It allows you to include another template's contents, just like include does. But it also allows you to override any block defined inside the included template, like when extending a template.
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.
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'