I am trying to override a {% block %} in a file (index.html.twig) that extends the file where the block is used (base.html.twig). But the extending file is including another twig file (feature.twig) where the block that overrides the content in index.html.twig is placed.
Is that possible in any way? Maybe with something else than the include statement?
{# index.html.twig #}
{% extends 'base.html.twig' %}
{{ include('feature.html.twig') }}
{# base.html.twig #}
{% block extraJs %}{% endblock %}
{# feature.html.twig #}
{% block extraJs %}<script>$('...');</script>{% endblock %}
The include-function (or tag) only ever embeds the rendered result. It is not possible to manipulate blocks in the including file.
But in your case this is not necessary. Because index.html.twig extends base.html.twig, you can overwrite the block extraJs like so:
{# index.html.twig #}
{% extends 'base.html.twig' %}
{% block extraJs %}
{{ include('feature.html.twig') }}
{% endblock }
If needed you can extend the original block by using the parent-function. E.g.:
{# index.html.twig #}
{% extends 'base.html.twig' %}
{% block extraJs %}
{{ parent() }} {# `extraJs`-block content from `base.html.twig` #}
{{ include('feature.html.twig') }}
{% endblock }
No it's not possible. include just render template and include the output. You can't override block using it. Here is a issue related to this problem https://github.com/twigphp/Twig/issues/1360
Just as an info,I think you cannot put comments {# index.html.twig #} before the {% extends 'base.html.twig' %} and comments as I understood must be put always in blocks,hope this helps
Related
I am having a problem in my templates. I am trying to add two blocks in the base template,
it works when I include them but when I try to extend the base template it won't work and won't even throw an error.
This shud be the problem ... I will also leave a link to the original answer
MOVE THE INCLUDE BLOCKS INTO THE NAMED BLOCKS
Another situation where an include statement will fail without raising an error is if you are working in a template which extends another, and your include is outside of a named block:
{% extends "my_base.html" %}
{% block content %}
{{ block.super }}
{% include "partials/file1.html" %}
{% endblock %}
{% include "partials/file2.html" %}
In this case file2.html will not be included because it is not in a block, and you will get no warning messages, and will try all sorts of things before you realise what you've done.
Include tags not working
My Django ver: 2.2
For all trying to figure out how to declare multiple blocks, even though base has just one {% block content %},
You can declare block within block
This is my base.html:
{% block content %}
{% endblock %}
This is my home.html:
{% block content %}
{% extends 'base.html' %}
Some common content I want
{% block my_variable_data %}
{% endblock %}
{% endblock %}
My some other page:
{% extends 'home.html' %}
{% block data_content %}
{% endblock %}
I have the following twig templates:
{# layout.twig #}
{% block content %}
THIS IS LAYOUT
{% endblock %}
{# secondary_layout.twig #}
{% extends layout.twig %}
{% block content %}
THIS IS SECONDARY_LAYOUT
{% endblock %}
{# mypage.twig #}
{% extends secondary_layout.twig %}
{% block content %}
{# I WOULD LIKE TO USE layout content block here #}
{% endblock %}
I can call parent() inside the content block in mypage.twig, but how to use a grandparent instead?
There are situations, in which you can achieve this. Unfortunately not in your case. However, it works if only "horizontal re-use" is used (use keyword), but not with inheritance (extends). This for instance applies to form themes.
In my case I defined a form theme which inherits from the bootstrap 3 form theme. The bootstrap theme itself inherits from "form_div_layout". I wanted to override the choice widget and include the grand parent's (form_div_layout) block content, because the bootstrap version of the block didn't fit for me in this single case. So, basically a very similar problem.
This can be solved by inheriting from both, the parent (bootstrap_3_layout) and grand parent layout (form_div_layout), while declaring an alias for the grand parent block to be overridden:
{# my_form_theme.html.twig #}
{% use 'form_div_layout.html.twig' with choice_widget_collapsed as base_choice_widget_collapsed %}
{% use 'bootstrap_3_layout.html.twig' %}
{% block choice_widget_collapsed -%}
{# There is no "grandparent()" function, so instead we can do this: #}
{{- block('base_choice_widget_collapsed') -}}
{%- endblock %}
I'm writing this answer, although it doesn't answer the actual question. But other people will probably also find this question when googling for such a "grandparent"-feature and maybe they'll give up unnecessarily, when they read that it's impossible here.
Ok by writing the problem I got one solution, just modify secondary_layout
{# secondary_layout.twig #}
{% extends layout.twig %}
{% block content %}
{% if use_layout_block %}
{{ parent() }}
{% else %}
THIS IS SECONDARY_LAYOUT
{% endif %}
{% endblock %}
{# mypage.twig #}
{% extends secondary_layout.twig %}
{% block content %}
{% set use_layout_block = true %}
{% endblock %}
It may help someone.
If someone got another solution, feel free to answer.
You can include the block of any template with the function block().
block - Documentation - Twig
block(<block_name>, [template_name])
In your case, the solution could be as follows:
{# mypage.twig #}
{% extends secondary_layout.twig %}
{% block content %}
{{ block('content', 'layout.twig') }}
{% endblock %}
How can I use {{ parent() }} and override one of its children blocks, I found some solution but it looks wrong, here is an example that may be explain the issue:
index.html.twig:
{% block wrapper %}
<h1>title</h1>
{% block one %}<p>Content of block one</p>{% endblock one %}
{% block two %}<p>Content of block one</p>{% endblock two %}
{% endblock wrapper %}
new_index.html.twig:
{% extends 'index.html.twig' %}
{% block wrapper %}
{{ parent() }}
{% block two %}<p>NEW content of block two</p>{% endblock two %}
{% endblock wrapper %}
But I see the content of block two twice (and it looks logical). How can I update the code to fix it?
Wow, solution is simple, just write block two outside the wrapper block, there is no hierarchy for blocks :)
new_index.html.twig:
{% extends 'index.html.twig' %}
{% block wrapper %}
{{ parent() }}
{% endblock wrapper %}
{% block two %}<p>NEW content of block two</p>{% endblock two %}
Is there a way to override blocks defined inside and embed tag inside the parent template in a child template.e.g: I have three templates: a, b and c. a embeds b and c extends a.
{# a.html.twig #}
{% embed b.html.twig %}
{% block content %}
laksjflkj
{% block placeholder %}
I want to override this template in c, it is actually defined here and has nothing to do with b
{% endblock placeholder %}
{% endblock content %}
{% endembed %}
{# b.html.twig #}
{% block content %}
blahblah
{% endblock %}
{# c.html.twig #}
{% extends 'a.html.twig' %}
{% block placeholder %}
let's override the block defined inside a
{% endblock placeholder %}
How do I override the placeholder block inside c.html.twig?
You have to create a new file called d.html.twig, which extends c.html.twig and override your placeholder block like this :
{# d.html.twig #}
{% extends 'c.html.twig' %}
{% block placeholder %}
Overrided !
{% endblock placeholder %}
I have a userDashboard.html.twig template like this:
{% extends "AcmeDemoBundle::base.html.twig" %}
{% block content %}
<h1>Name</h1>
{% endblock %}
{% include "AcmeDemoBundle::statistics.html.twig" %}
The controller call this template(userDashboard).
And a statistics.html.twig where I try to override or extend the content block:
{% extends "AcmeDemoBundle::userDashboard.html.twig" %}
{% block content %}
{{ parent() }}
Something
{% endblock %}
My problem is that I can't do this way. Can somebody recommend a solution?
There's embed which basically lets you include templates while overriding some of their blocks:
{% embed "AcmeDemoBundle::userDashboard.html.twig" %}
{% block content %}
{{ parent() }}
Something
{% endblock %}
{% endembed %}