Multiple blocks in Grav cms twig template - twig

I am making a Grav template from a static html. This is a one-pager, so I am using modular templates and content. The problem is that I have a gallery, and my clicking on an image, a modal pops up. The code for the modals are places outside the container I am using for the image gallery.
Is there a way to have a twig modular template creating output code two different places on the base template? I have tried using multiple blocks in the modular template, but in the final output all code are places inside the image gallery container? My templates have multiple level nesting just to make it a little bit easier:
main
Listing of categories
Listing of images for each category
base.html.twig (simplified):
{% block body %}
{% block modal %}{% endblock %}
{% block content %}{% endblock %}
{% endblock %}
modular.html.twig:
{% extends 'partials/base.html.twig' %}
{% block content %}
{{ page.content }}
{% for module in page.collection() %}
<div id="{{ _self.pageLinkName(module.menu) }}">
{{ module.content }}
</div>
{% endfor %}
{% endblock %}
category-list.html.twig (simplified):
{% block content %}
{% for module in page.collection() %}
{{ module.content }}
{% endfor %}
{% endblock %}
content template (simplified):
{% block modal %}
{{ page.titel }}
{% endblock %}
{% block content %}
{{ page.content }}
{% endblock %}
My problem: rendering the block modal from the content template in the block Modal in the base template. Currently the block modal is rendered in block content.
Any ideas?
Thanks

Related

Twig {% extends %} does not pass variables

I use Kohana with twig and extend a template within a template. Param, which is available in my template is not passed to the extended template. How to pass all or at least that value to the extended template?
{% extends 'customer/main' %}
{% block content %}
Will show the content of my_param:{{ my_param }}
{% endblock content %}
File: customer/main.html
{% extends 'main' %}
{% block middle %}
Will NOT show the content of my_param:{{ my_param }}
{% block content %}{% endblock content %}
{% endblock middle %}

Symfony Twig block generation priority

I have a little problem in twig to render symfony forms,
so, first I will explain the context of it.
In Twig, blocks are defined in a certain order on a template:
{# base.layout.html.twig #}
{% block firstBlock %}
{% endblock firstBlock %}
{% block secondBlock %}
{% endblock secondBlock %}
And when we extends this template we can write this:
{# child.layout.html.twig #}
{% embed "base.layout.html.twig" %}
{% block secondBlock %}
{{ form_widget(form.submit_button) }}
{% endblock secondBlock %}
{% block firstBlock %}
{{ form_widget(form.some_field) }}
{{ form_rest(form) }}
{% endblock firstBlock %}
So the problem is with the form() functions in twig which renders Symfony forms.
I am trying to generate a submit button at the very end of a modal window
but the problem is that form_rest() renders all parts of the form not already rendered.
There is a little fix to avoid form_rest to render form.submit_button, it's to set form.submit_button as an already rendered field with:
{% do form.submit_button .setRendered %}
But with this form.submit_button is never rendered
Of course the finality of all this is to don't remove the form_rest instruction.
So I search something to unset rendered value of form.submit_button after the form_rest instruction or even better a way to choose the order of blocks generation of a template.
Like this:
{% block secondBlock with(1) %}
{{ form_widget(form.submit_button) }}
{% endblock secondBlock %}
{% block firstBlock with(2) %}
{{ form_widget(form.some_field) }}
{{ form_rest(form) }}
{% endblock firstBlock %}
Thank you for your help !
If it is just for a submit button, you can remove it from your form type and write it in html, it is'nt a problem, and it will work.
The problem is that you render first the rest (including the button), and after you try to render the button but it is already rendered...
Of course, your html button must be inside < form > tags.
If you want to keep your submit button from your form type,
1 solution is to move it using some javascript ...
2 solution is to mark it as rendered (as you have done), and write the exact html of your submit button in the place you want.
[edit]
You can also render every field of your form in the first block, render your submit button in the second block, and put form_rest after all these (as all the fields have been rendered, it will not have something to render,
this is a solution also)
If that's just a matter of a submit button that has no logic and no mapping at all, the easiest way is to render your submit button in HTML directly and removing it from your form.
<input type="submit" value="Submit"> {# ¯\_(ツ)_/¯ #}
Another solution is to put your modal in a modal_layout.html.twig, and then use the embed tag that is exactly made for this kind of issues.
modal_layout.html.twig
<div class="modal">
<div class="form">
{% block form_part %}{% endblock %}
</div>
<div class="submit pull-right">
{% block submit_part %}{% endblock %}
</div>
</div>
your_page.html.twig
{% embed 'modal_layout.html.twig' %}
{% block submit_part %}
{{ form_row(form.submit_button) }}
{% endblock %}
{% block form_part %}
{{ form(form) }} {# won't render submit again #}
{% endblock %}
{% endembed %}
But IMO the second solution, even if it appears cleaner, does not worth it for a stupid submit button.
Cheers

Extending twig blocks in a complicated scenario

Let's say I have these twig templates:
base.twig
{# base.twig #}
<html>
<head>
{% include 'head_js.twig' %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
head_js.twig
{# head_js.twig #}
{% block headJS %}
<script src='/js/some-script.js'></script>
{% block headJSExtra %}{% endblock %}
{% endblock %}
page.twig (the one loaded by the controller)
{# page.twig #}
{% extends base.twig %}
{% block content %}
<p>Widget 1</p>
{% include 'widget.twig' with { name: 'foo' } %}
<p>Widget 2</p>
{% include 'widget.twig' with { name: 'bar' } %}
{% endblock %}
widget.twig
{# widget.twig #}
{% if wigetAlreadyIncluded is not defined %}
{% block headJSExtra %}
{{ parent() }}
<script src='/js/widget.js'></script>
{% endblock %}
{% set widgetAlreadyIncluded = true %}
{% endif %}
<p>My name is {{ name }}</p>
This code doesn't work (can't use parent() in widget.twig as it's not extending or using any template), but it should illustrate what I'm trying to achieve. The basic idea is:
In order to work, widget.twig requires a js library to be loaded in as a tag in the .
The widget can be rendered several times in one page.
Other widgets should be able to also add their own tags in the in this fashion, but they shouldn't override previous added tags (they should be appended).
I don't want to add more than once any tag required by any widget found in the page.
Any ideas on how can I achieve this would be greatly appreciated. I've read two SO related questions with no luck at all.
https://stackoverflow.com/a/29132604/4949663
https://stackoverflow.com/a/18160977/4949663
I finally got a good answer in the twig github issue tracker.
https://github.com/twigphp/Twig/issues/2275

How to reuse block in an included template using twig

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 %}

How to include a template that set content into blocks using twig

It's difficult to explain but I have a layout.html.twig template like this:
{% block css '' %}
{% block content '' %}
{% block js %}
<script src="jQuery.js"></script>
{% endblock js %}
I have another template index.html.twig that extends the layout one like this
{% extends 'AcmeBundle::layout.html.twig' %}
{% block content %}
{% include 'AcmeBundle:Module:module_1.html.twig' %}
{% include 'AcmeBundle:Module:module_2.html.twig' %}
{% include 'AcmeBundle:Module:module_3.html.twig' %}
{% endblock content %}
{% block js %}
{{ parent() }}
<script ...></script>
{% endblock js %}
Each included module has some javascript inside but they need to have jQuery loaded to work.
But jQuery is set in the layout.html.twig so it's not working.
How can I include my modules being sure that the script is executed after jQuery is loaded?
Is it possible to access the js block somehow? I had a look to embed but I'm not sure it's what I need.
Any ideas?
Cheers,
Maxime

Resources