It is something pretty simple to be done outside of twig but here I am not even sure it is possible. This is the case:
Have base.html.twig. header.html.twig, home.html.twig.
#home.html.twig
{% extends 'base.html.twig' %}
{% block body %}
<h1>MY HTML</h1>
{% endblock %}
#base.html.twig
....some html here
{% block header%}{% endblock %}
{% block body %}{% endblock %}
....some more html here
#header.html.twig
{% extends 'base.html.twig' %}
{% block header %}
some here things that have to shown on every page through base.html.twig
{% endblock %}
I think it is pretty straight forward scenario but still my header doesn't show anywhere. As I understood from the documentation it is not working because this is how blocks work. It renders the page i am calling from my controller (home.html.twig) and the extended by it (base.html.twig). But wont call the header as well. So! How should I call the header on every page ?
To add the header on all pages just put include see example
{% block header %}
{% include 'header.html.twig' %}
{% endblock %}
I have a twig file that extends base
{% extends "base.twig" %}
{% block content %}
<div> all articles </div>
{% for blog in blog_articles %}
<div><i> {{blog.post_title }}</i></div>
{% endfor %}
{% endblock %}
base.twig has an include for my global js and in my article.twig above i want to be able to add template specific JS that will appear below the global js that is in an include in base.twig
Can this be done?
To answer my own question i did this
in the base.twig
{% include 'globaljs.twig' %}
{% block javascript %}{% endblock %}
Then in the article.twig where i call the javascript block i just add my page scripts. simple
I have a base.html.twig with the basic html.
In the 'base' I have a {% block body %}{% endblock %} and a {% block javascript %}{% endblock %}
I call a 'form.html.twig' file from the Controller and the template extends the base.html.twig.
The 'form' contains the <form> and </form> tags and can contain a random numbers of sub templates/form elements:
'{% block body %}
{% for template in templates %}
{% embed template %}{% endembed %}
{% endfor %}
{% endblock %}'
The 'template' is perhaps a customer.html.twig, confirm.html.twig, vehicle.html.twig etc. etc. and they all have {% block body %} and {% block javascript %} - now for the question:
The content in the template files aren't moved to the blocks body/javascript. How do I get twig/symfony to move the content in the template files to the respective areas in the 'base.html.twig'?
Thank you for your time.
You want to use the use twig tag instead of the embed tag like this
{% use template %}
See more info here:
http://twig.sensiolabs.org/doc/tags/use.html
Currently using Symfony2 and Twig, I'm trying to override block within an included template. Let me explain :
{# base.html.twig #}
{% block content %}{% endblock content %}
<!--Some html Code -->
{% block javascripts %}
<!--Some scripts included like jQuery-->
{% endblock javascripts %}
In a other file:
{# page.html.twig #}
{% extends 'base.html.twig' %}
{% block content %}
{% include 'form.html.twig' %}
{% endblock content %}
And finally:
{# form.html.twig #}
<form method="post" action="something">
</form>
{# I am trying somehow to override the "javascripts" block here,
unfortunately I didn't figured out how to to that
#}
{% block javascripts %}
{{ parent() }}
<!--Some JS here-->
{% endblock javascripts %}
Is there a way to do what I want ?
What you need here is multiple inheritance. But just like php, twig does not have multiple inheritance. And just like php has traits, twig has a palliative for this called use. Remember that twig is compiled to php. I think a block that is used in a use statement ends up compiled in a trait.
First, create your a "trait" with the blocks you want to reuse in different places:
{% block my_form %}
<form method="post" action="something">
</form>
{% endblock %}
{% block form_specific_javascript %}
<!--Some JS here-->
{% endblock}
Then, in your page template, call the "trait", and reuse the blocks:
{# page.html.twig #}
{% extends 'base.html.twig' %}
{% block content %}
{% use 'form.html.twig' %}
{{ block('my_form') }}
{% endblock content %}
{# override the javascript block #}
{% block javascripts %}
{{parent()}}
{{block('form_specific_javascript')}}
{% endblock %}
So as you see, you can't do it all from the form template, you have to do some
wiring in your page template. Still, calling a block is better than copy / pasting
its contents, isn't it ?
Since i was looking for the same answer and actually found the solution.
It lies within TWIG with the embed tag.
Available in twig version 1.8, embed tag allows us to "include" a template, which has its own defined blocks who can then be overriden.
More information here: http://twig.sensiolabs.org/doc/tags/embed.html
You could just simply include form.html.twig within the javascripts block
base.html.twig
{% block content %}
<!--Some html Code -->
{% endblock content %}
{% block javascripts %}
<!--Some scripts included like jQuery-->
{% endblock javascripts %}
page.html.twig
{% extends 'base.html.twig' %}
{% block javascripts %}
{{ parent() }}
{% include 'form.html.twig' %}
{% endblock javascripts %}
form.html.twig
<!--Some JS here-->
I have exactly the same problem. I was looking for solution, but I didn't find any. Unfortunately include, embed and use does not solve this problem. But I figured two possible workarounds.
Option 1 (simpler, but needs more code)
Separate form into two files _form.html.twig and _form_js.html.twig and import them in the appropriate blocks.
Option 2
Invert hierarchy of templates. Extend form directly from base.
# form.html.twig
{% extends 'layouts/base.html.twig' %}
{% block body %}
{{ block('page_header') }}
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
# ...
</script>
{% endblock %}
And then extend form in other templates like new and edit.
# new.twig.html
{% extends 'form.html.twig' %}
{% block page_header %}
# custom content here
{% endblock %}
Using your own files, this is the approach I used and it worked for me:
{# base.html.twig #}
{% block content %}
{% endblock %}
<!--Some html Code -->
{% block javascripts %}
<script>console.log('1st print')</script>
{% endblock %}
In other file:
{# page.html.twig #}
{% extends 'base.html.twig' %}
{% block content %}
<h1>Welcome to page.html.twig.</h1>
<p>Here is a form for you to complete:</p>
{{ block("content", "form.html.twig") }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>console.log('2nd print')</script>
{{ block("formjavascripts", "form.html.twig") }}
{% endblock %}
And finally:
{# form.html.twig #}
{% block content %}
<form method="post" action="something">
</form>
{% endblock %}
{% block formjavascripts %}
<script>console.log('3rd print')</script>
{% endblock %}
Please notice the use of block function, you can find more info here https://twig.symfony.com/doc/3.x/functions/block.html
Also notice I used "formjavascripts" you could have used "javascripts" as well because that is the block name being retrieved from forms.html.twig file.
Note: You could try using Block function again in forms.html.twig and see if you can do a 4th print and call a 4th twig file! (Not sure if this last thing will work though :P)
I want to do this kind of thing so that if a template doesn't exist it just renders the content. The below code won't work though as you can't code it like this.
{% if app.request.attributes.get('twig_parent_template') != "" %}
{% extends app.request.attributes.get('twig_parent_template') %}
{% block title "The Title Here" %}
{% endif %}
{% block content %}
Content here
{% endblock %}
Can I do this kind of thing somehow?
Twig extends has a good documentation on this topic.
Since you need to specify a template to extend, my thoughts go on creating a default template.
#Bundle/Resources/views/yourview.html.twig
{% set extender = app.request.attributes.get('twig_parent_template') ? : 'Bundle::default.html.twig' %}
{% extends extender %}
{% block title "Your title" %}
{% block content %}
Your content
{% endblock %}
#Bundle/Resources/views/default.html.twig
{% block content %}{% endblock %}
#Bundle/Resources/views/parent.html.twig
{% block title %}{% endblock %}
{% block content %}{% endblock %}
Doing such, if app.request.attributes.get('twig_parent_template') is set, it will render the template given in its value.
Otherwise, it will render default.html.twig containing only the content block