layout.twig
<main class="main">
{% block content %}{% endblock content %}
</main>
{% block footer %}{% endblock %}
page.twig
{% extends 'layout.twig' %}
{% block content %}
{#abc#}
{% block footer %}
{#123#}
{% endblock footer %}
{% endblock content %}
When I do this. Footer block renders twice. Once after content block and once the place it should be
NOTE: I simplifed the templates to make them more readable. The problem I see is I cannot use block inside another block. if I use it renders twice.
I have to use footer inside block content. I don't want to include extends and content in every page. Because it is same. I use something like below.
$tm['p'] = "{% extends '" . $layout . "' %}{% block content %}";
$tm['p'] .= $page;
$tm['p'] .= "{% endblock content %}";
$load = new \Twig_Loader_Array($tm);
$tw = new \Twig_Environment($load);
print $tw->render("p", $dat);
I think it's because you're nesting a previously define block insinde another previously defined one when overriding one. A block is usually used to define placement for output elements, so it's kind of wrong that you're placing footer inside content and where it should be actually means after content block, where you defined it in layout.twig, that's the right place according to your template files. If you need to override footer, you should simply do this outside of content block inpage.twig like this:.
{% extends 'layout.twig' %}
{% block footer %}
{#123#}
{% endblock footer %}
{% block content %}
{#abc#}
{% endblock content %}
Please note, the order of overridden blocks in page.twig is not important because you already made the decision about this in layout.twig.
Looking at your example, I think you want to place footer inside <main></main> not the content block. If so, you might need to modify layout.twig. Some changes like the following:
layout.twig
<main class="main">
{% block content %}{% endblock content %}
{% block footer %}{% endblock footer %}
</main>
Templates are useful when you want to design page layout and elements' placements, and later only change their content not their placements. So you should design your layout.twig according to your needs, and if you need an alternate layout, feel free to create an additional one. For example if you need two layouts, one with footer inside the content and one with footer outside the content.
And about not repeating extends and blocks (content as you pointed) in every page: In my opinion it is not a good idea to remove the extends tag from top of the page. It is good for reference, to know which page template is extending which layout. And what you are doing is writing template source code as PHP strings. This is not a good practice. I suggest you consider saving your templates in separate files like you did with layout.twig and page.twig and put all fixed content inside them. And if you find yourself repeating some code very often, then you might want to rethink about your templates structure because on of the main advantages of templates hierarchy is to avoid writing common code by reusing it.
Related
I've been beating my head against this for a while, because while it's "easy" to do in raw PHP, the result is not extendable due to PHP's lack of decent built-in templating syntax. So I installed Twig assuming it would have a built-in explode function for iterating amongst blocks. But there seems to be no way of dividing content into an arbitrary number of subsections.
I considered using {% embed %}, but the document is to be styled according to which sections appear in the parent template. And in what order (which is variable; this is for a form with a lot of business logic in it.)
I've built the form in PHP and gotten it to work as a "very pretty" static page with easily an arbitrary number of subsections, all working and interactive regardless of which are displayed (based on e.g. user privileges), but templatizing it is the challenge.
The static (twigless) version relies on me exporting the parsed content to an array which can then be wrapped with the appropriately-styled div's for each visible section. This works, but requires me to use included html and object buffering which looks awful and would not be easy to maintain:
$content = include("form_content_html.php"); // return an object-buffered array
// I was including the escaped values here using if isset($data) and echo short tags.
foreach ($content as $section) { /* do something; */ }
$template = include("form_template_subsection.php");
$formview->addSubsectionTemplate($template);
echo $formview->addSubsection($content,$i++,$type);
// fill section of $type with $content[$i] if isset
echo $formview->addSubsection($content,$i++,$sometype);
// $types have different css class for certain effects
// etc. not the best approach.
(I need to escape all user / db content before binding it to the form values, but since the form fields are highly customized I separated them into their own content layer so that's the only layer that has content that needs to be escaped at present.)
So forget that, now I'm using Twig. (note: not Symfony2, as the project is on a shared webhost.)
I don't think there's a way of {%extend%}ing the parent template such that some of the child template blocks are "dropped into" the named parent template containers, with the rest ignored; which is what I'm looking for since that way I can put all the logic into the top level (which sections of the form to make visible, etc.) and pass in the values first.
Note that the style of the form sections is dictated by the structure of the parent template, not by the child content. E.g. section 1 may display content 1 and call css on content 2 in section 2; or section 1 and 2 with the same css may display different content.
If I split up the form into 15 content-only subtemplates, and then conditionally included them in the parent file, it would work. But that would seem to defeat the purpose of using a template engine? Although I suppose Twig makes it much easier to work with included files containing html snippets in this way, so let me know if that is a preferred solution.
Should I divide the content node up into numbered {% block1 %}, {% block2 %} etc. subsections and then renderBlock in my PHP view class?
If Twig had a {% section %}...{% section %} syntax allowing you to split up the template into chunks and then parse each chunk as an array of block elements... well, I half-expected that, and wish I could add one myself.
Is this a possible solution? From the Twig documentation:
Horizontal reuse is a way to achieve the same goal as multiple
inheritance, but without the associated complexity:
{% extends "base.html" %}
{% use "blocks.html" %}
{% block title %}{% endblock %}
{% block content %}{% endblock %}
The use statement tells Twig to import the blocks defined in
blocks.html into the current template (it's like macros, but for
blocks):
{# blocks.html #}
{% block sidebar %}{% endblock %}
Note: The use tag only imports a template if it does not
extend another template, if it does not define macros, and if the body
is empty. But it can use other templates.
Well, that's a bit thoroughly less than unclear.
(Does "it" refer to the imported template being able to use other templates, or does "it" mean a template can use more than one template, or both? and if the body is empty, does that mean the body of the imported block tag? If so then perhaps it is not a solution.)
Would it be possible to do something like this:
{# form_template.html #}
{% extends "form_content.html" %}
{% block section1 %}
<div class="{{ style1 }}"><div class="{{ style2 }}">etc.
{{ parent() }}
</div></div>{% endblock %}
Or this?
...
{# form.html #}
{% use "form_content.html" %}
{% for sections as i %}
{% block wrapper_elements %}{% block section{{i.name}} %}{% endblock %}
{% endblock %}
{% endfor %}
{# form_content.html #}
{% use "form_fields.html" %}
{% block section1 %}{% if field1 %}
Actual content here: {% block field1 %}{% endblock %} And here
{% else %} {% endif %}
{% endblock %}
{% block section2 %}More actual content here{% block section2 %}
But if so, how to iterate over the sections prior to calling each one in form.html?
I've found the solution, I think:
(From the Twig documentation)
The set tag can also be used to 'capture' chunks of text:
{% set foo %}
<div id="pagination">
...
</div>
{% endset %}
Ergo, set can be used to iterate over anonymous consecutive blocks:
{% set i=0, out=[] %}{# declare top scope #}
{% block initialize_content %}{# use once #}
{% set i=0, out=[] %}{# prevent dupes #}
{% set foo %}
<div id="pagination">...</div>
{% endset %}{% set out=out|merge({ i: foo}) %}{% set i=i+1 %}{% set foo %}
{{ escape_variables_here }} ... more html
{% endset %}{% set out=out|merge({ i: foo}) %}{% set i=i+1 %}{% set foo %}
{{ variables_all_scoped_to_same_context }} ... more html
{# so dividers can be moved "up and down" if necessary ... #}
{% endset %}{% set out=out|merge({ i: foo}) %}{% set i=i+1 %}{% set foo %}
{# ... like this. ^^a tag/macro could probably define this #}
{% endset %}{% set out=out|merge({ i: foo}) %}
{# or loop over i = 0..n or i = loop.index0 #}
{% endblock initialize_content %} {# end setter #}
{% block content %}
{% if key is defined and out.key is defined %}{{ out.key |raw }}{% endif %}
{# output top-scoped var (outputs nothing if setter not called) #}
{# the setter doesn't have to be in its own block, but that allows
the variables in the content to be redefined in setter's scope. #}
{% endblock %}
(cf. Setting element of array from Twig )
I'm using UserFrosting and so far I've been able to import all of the default elements into the home page. However, I've now added a second page but nothing happened when I copied the following code from the home page:
{% include 'common/components/head.html' %}
<rest of code>
{% include 'common/components/main-nav.html' %}
<rest of code>
{% include 'common/components/footer.html' %}
{% include 'common/components/jumbotron-links.html' %}
I then used the following php code:
<?php include("../userfrosting/templates/common/components/head.html"); ?>
Which seems to work but the page only shows this code found within the head.html file:
{% for item in includeCSS(page_group|default("common")) %} {% endfor %} {% for item in includeJSTop(page_group|default("common")) %} {% endfor %}
Which obviously is not very useful!
When I keep the home and page2.php file in the same folder (in localhost/userfrosting/templates/common) then I receive Error 404. When I move the file to the default UserFrosting home page directory (which the home.html file isn't actually in) in localhost/public, I get only the above code.
It seems like I'm missing something quite basic here but would appreciate some help. Thanks.
You are confusing PHP files and template files. UserFrosting uses a front controller pattern along with the Twig templating engine. So, you do not need a separate PHP file for each page. Instead, you should create a new template file for your page:
userfrosting/templates/common/page2.html
{% include 'common/components/head.html' %}
// DO NOT use PHP here - just Twig! See the Twig documentation: http://twig.sensiolabs.org/doc/templates.html
{% include 'common/components/main-nav.html' %}
// More Twig
{% include 'common/components/jumbotron-links.html' %}
{% include 'common/components/footer.html' %}
Then you need to link up a URL with this template. That is done in the controller, public/index.php, for example like this:
// Miscellaneous pages
$app->get('/page2/?', function () use ($app) {
$app->render('common/page2.html', [
'page' => [
'author' => $app->site->author,
'title' => "Page Deuce",
'description' => "This is the second page, aight?",
'alerts' => $app->alerts->getAndClearMessages()
]
]);
});
I highly recommend going through the tutorial on adding a new page: https://learn.userfrosting.com/building-pages
You can also learn more about MVC, Slim, and Twig here: https://learn.userfrosting.com/basics/overview
Feel free to join in chat if you are still having trouble.
Learning sympony2 and I have hit a wall and have tried numerous solution but nothing seems to work, I keep getting the
Unable to find template "ScoreBoardViewerBundle.Viewer.scoreboard_keeper.html.twig" in
ScoreBoardViewerBundle:Viewer:view.html.twig at line 15.
Here is my twig snipped:
{% if score_keeper=='sk' %}
{% include 'ScoreBoardViewerBundle.Viewer.scoreboard_keeper.html.twig' with {'score_keeper' : score_keeper} %}
{% else %}
{% include 'ScoreBoardViewerBundle.Viewer.scoreboard.html.twig' %}
{% endif %}
Initially I had only the file name, like I seen on examples from this twig site: Twig site but that produced the same error. The twig files are found in the same directory.
What am I doing wrong? Also I get the same issue regardless which file I try to include. I did have some typos but they should be fixed.
Here is the Controller I was using and it was able to open both views correctly, I just noted some twig in each file was redundant so hence the changes
public function viewAction($score_keeper)
{
//returns scoreboard view for score keeper
// if($score_keeper=="sk"){
// return $this->render('ScoreBoardViewerBundle:Viewer:keeper.html.twig',array('score_keeper' => $score_keeper));
// }
//returns scorboard view for all others
return $this->render('ScoreBoardViewerBundle:Viewer:view.html.twig',array('score_keeper' => $score_keeper));
}
You have a typo in your {% include %} statements. You are supposed to use : instead of . to separate blocks in template name.
Try this:
{% if score_keeper=='sk' %}
{% include 'ScoreBoardViewerBundle:Viewer:scoreboard_keeper.html.twig' with {'score_keeper' : score_keeper} %}
{% else %}
{% include 'ScoreBoardViewerBundle:Viewer:scoreboard.html.twig' %}
{% endif %}
First, let me start with the code I'm attempting to use:
{% if modal == true %}
{% block header %}{% endblock %}
{% block footer %}{% endblock %}
{% endif %}
What I'm trying to accomplish is to not show my header and footer blocks ONLY if the variable called modal is true. I also have this below the if statement:
{% block content %}
{{ dump(modal) }}
{% endblock %}
What happens here is that my override for emptying the header and footer blocks always runs regardless of if the value of modal is true or otherwise. So, I run this with modal passed in as false and the result is that the header and footer still don't show. The output of the dump command accurately shows true or false, but the condition always seems to evaluate to true in the if statement.
Can blocks not be wrapped in a conditional statement, or is there something additional I need to do to make this work?
Thanks for any help you can offer.
Define
{% block footer %}Some standard content{% endblock %}
in parent twig template.
Then in template where you want to decide if display content of footer you can do:
{% block footer %}
{% if not modal == true %}
{{ parent() }}
{% endif %}
{% endblock %}
If the modal is true - footer will be empty, if not - in footer will be printed "Some standard content"
Blocks don't care about any logic around it, as said in the documentation:
A block provides a way to change how a certain part of a template is rendered but it does not interfere in any way with the logic around it.
You should put that logic inside the block, not on the outerside, as you can see on the last example in that article.
I want to achieve the following thing:
I have a basic template for all of my pages, named "_page_base.twig". It contains the header and footer.
Then I have a Template for different areas of the page: "topic.twig", "section.twig" and "article.twig" - each of them extending the "_page_base.twig", thats working well so far.
Now I want to write my articles. I would love to save them as .twig file as well, since I can edit the complete markup in my editor and just upload it.
Since I can't say that my article files just extend "article.twig" (multiple inheritance is not possible) I could tell the "article.twig" that it should use blocks from my different article-content twigfiles.
The problem is: "use" statements have to be hardcoded!
My current solution is to add {% use "[PLACEHOLDER]" %} into the "article.twig" and then loading the template into a string, replacing the placeholder to the correct article-content.twig and then passing the whole thing to the template engine. What a mess.
Have you guys any idea for a better solution?
You can try with include tag. Since this tag accepts a dynamic name template to include, you just only need to define a variable which contains the name of article twig template.
{# on article.twig#}
{% set articles = ['someArticle.twig', ...] %}
{% for article in articles %}
{% include article %}
{% endfor %}
{# on someArticle.twig #}
... Article text ...
In the case of you need to customize some content inside of someArticle.twig you could stage the next level: embed tag. You should define a block tag inside of someArticle.twig, this block will be the placeholder to the custom values.
{# on article.twig#}
{% set articles=['someArticle.twig', ...] %}
{% for article in articles %}
{% embed article %}
{% block inside_text_article %}
... custom text ...
{% endblock %}
{% endembed %}
{% endfor %}
{# on someArticle.twig #}
... article text ...
{% block inside_text_article %}default values{% endblock %}
... article text ...
https://github.com/fabpot/Twig/issues/17 - no dynamic namespaces
LiipThemeBundle might be a solution:
http://symfony2bundles.org/liip/LiipThemeBundle
Unless I am not understanding the question, displaying a single article only requires that it also extends __page_base.twig.
In the case that you would need to display multiple articles, you could have a template dedicated to showing a list of articles which would also extend __page_base.twig and pass the article list to this template.