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
Related
I have a problem like this
But i can not use {% use %}
for example:
{# file1.twig #}
{% extends "main.twig" %}
{% block content %}content text{% endblock %}
{# main.twig #}
{% block content %}{% endblock %}
{% for widget in widgets %}
{% embed widget %}{% endembed %}
{% endfor %}
{% block js %}{% endblock %}
{# widget1.twig #}
{% block js %}
script1
{% endblock %}
{# widget2.twig #}
{% block js %}
script1
{% endblock %}
I want to be the result:
content text
script1
script2
I have a lot of files like file1.twig and widget1.twig
I can not use all the widgets in the all files.
Also, {{ parent() }} does not work for me
Is there another way?
I have a question regarding adding javascript to child elements. How do you do that?
I have this setup:
base.html.twig:
{% block content %}
{% endblock content %}
{% block script %}
{% endblock script %}
index.html.twig:
{% extends base.html.twig %}
{% include intro.html.twig %}
{% block content %}
<html></html>
{% endblock content %}
{% block script %}
<script></script>
{% endblock script %}
intro.html.twig:
{% block script %}
<script></script>
{% endblock script %}
I want to add more javascript files into the intro.html.twig file, but it doesn't append it to the script block in index.html.twig.
All help appreciated!
UPDATE
I want to send some parameters with intro.html.twig:
{% extends 'intro.html.twig' with {
'title': 'title',
'type': 'test',
} %}
is this possible using extends, or can I only use with with include?
index.html.twig
{% extends intro.html.twig %}
{% block content %}
<html></html>
{% endblock content %}
{% block script %}
{{ parent() }}
<script></script>
{% endblock script %}
intro.html.twig
{% extends base.html.twig %}
{% block script %}
<script></script>
{% endblock script %}
I have a base.html.twig template.html.twig and dashboard.html.twig.
Dashboard extends template which extends base.
Base:
{% block javascripts %}
<script src="1.js"></script>
{% endblock %}
Template:
{% block javascripts %}
{{ parent() }}
<script src="2.js"></script>
{% endblock %}
Dashboard:
{% block javascripts %}
{{ parent() }}
<script src="3.js"></script>
{% endblock %}
This templating setup resulted in redundant script tags where everything is doubled like this
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
Am I missing something? Why is it happening?
Edit1:
base.html.twig:
extends nothing
template.html.twig:
{% extends 'base.html.twig' %}
default/dashboard.html.twig:
{% extends '::template.html.twig' %}
In my opinion your {% extends "file" %} is bad.
The fix :
Template :
{% extends "base_path" %}
{% block javascripts %}
{{ parent() }}
<script src="2.js"></script>
{% endblock %}
Dashboard :
{% extends "template_path" %}
{% block javascripts %}
{{ parent() }}
<script src="3.js"></script>
{% endblock %}
A bit late but since there's no accepted answer yet, I'll give it a go.
I was experiencing the same and this solved it for me, in my case it had to do with the structure of the base template and the current template from where you're trying to extend the base file, in my case, it was, in a similar situation as yours as far I can tell from your code.
Basically the structure in this example is wrong:
base:
{% block notAddedInTemplate %}
{% block javascripts %}
<script src="1.js"></script>
{% endblock javascripts%}
{% endblock notAddedInTemplate %}
Template:
{% extends 'base.html.twig' %}
{% block javascripts %}
{{ parent() }}
<script src="2.js"></script>
{% endblock javascripts%}
And should be:
base:
{% block notAddedInTemplate %}
{% block javascripts %}
<script src="1.js"></script>
{% endblock javascripts%}
{% endblock notAddedInTemplate %}
Template:
{% extends 'base.html.twig' %}
{% block notAddedInTemplate %}
{% block javascripts %}
{{ parent() }}
<script src="2.js"></script>
{% endblock notAddedInTemplate %}
I hope this will help you solve your issue.
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'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'