I'm looking to get started with Twig, but having a real headache getting the {% block %} to work at all - I feel there must be something very obvious I am missing.
My index.php loader looks as follows:
<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
require_once( "Twig/Autoloader.inc.php" );
Twig_Autoloader::register();
$twig = new Twig_Environment( new Twig_Loader_Filesystem("templates"));
$vars = array (
"user" => array(
"name" => "Joe Bloggs"
),
"title" => "My website"
);
$tpl = $twig->loadTemplate("index.html");
echo $tpl->render($vars);
?>
A simplified version of the index.html in /templates looks like this:
<!doctype html>
<html>
<body>
Hello World!
{% block navigation %}Test{% endblock %}
</body>
</html>
And the navigation.html in /templates looks something like this:
{% extends "index.html" %}
{% block navigation %}
<!-- Navigation -->
<nav>
Some navigation
</nav>
{% endblock %}
So far as I understood it, this should be a basic working example of the blocks feature. The other aspects of Twig seem to be working just fine for me, and no errors are being reported. Indeed, the page successfully prints "Test".
Should I be explicitly pointing to the navigation.html file somewhere, or does Twig automatically load all the files in the /templates folder?
The error: you're rendering your index template instead of the navigation one.
In the index template, the navigation block contains "Test", so your output is correct. If you render navigation.html, you'll get your html content from index.html and the navigation block from the navigation template (the only thing it overrides).
You always need to render the template you wish to output. One may be extended by many (for example, your layout may be extended by all your actions' templates).
Related
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.
I have a setup a simple twig template which is used to display a simple menu. I have images in here that are static and I would like use the template directory path for the image src. However when I use {{theme.link}} it appears blank. Perhaps I'm referencing something incorrectly. Code below:
<?php
$context['menu'] = new TimberMenu('main-nav');
Timber::render('templates/menu.twig', $context);
?>
and the twig template below:
<ul>
{% for item in menu.get_items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}}
</li>
{% endfor %}
</ul>
<img src="{{theme.link}}/assets/images/test.png" alt="">
I understand that I can pass in the directory to the context but I'm curios as to why the built in function isn't working. Probably something simple. First time looking into twig so still getting used to it. Any help greatly appreciated! Thanks
#verdond2: In order to use the {{theme}} object (and its properties) you need to start with the default Timber context in your PHP file...
<?php
$context = Timber::get_context();
$context['menu'] = new TimberMenu('main-nav');
Timber::render('templates/menu.twig', $context);
?>
I have just setup a apache server and configured twig. I have two template files one called base.html.twig which has the core template elements and dashboard with blocks that correspond to the base.html.twig
dashboard.html.twig
{% extends "base.html.twig" %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
However when I browse to dashboard.html.twig I just see plain html showing all of the code above. Have I misconfigured something?
I am sure it's something simple so I thank you for your help in advance.
You should not directly "browse" to a twig file, it needs to be parsed and rendered by php objects using classes from Twig libraries.
see http://twig.sensiolabs.org/documentation
To use twig you need PHP installed too. Also you would need Twig PHP library to parse twig templates.
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.
I am trying to understand how Twig can load a template through AJAX.
From their website, it is clear how to load a template (http://twig.sensiolabs.org/doc/api.html)
echo $twig->render('index.html', array('the' => 'variables', 'go' => 'here'));
But how would this work for an AJAX call? How would you tell Twig that you want to 'render' something that is only a part of index.html ... and not reload the entire page? I looked at Twig's sole Ajax example (http://twig.sensiolabs.org/doc/recipes.html), but this doesn't explain how Twig knows what part of the page you want to change. Assuming your Ajax call results in page content updates. I just need a simple example of this, something more than what is on Twig's recipe page.
Directly in the template:
{% if app.request.isXmlHttpRequest() %}
// code if ajax request
{% else %}
// code if not ajax request
{% endif %}
There are several ways to accomplish that :
1) Separate your index.html in several files like index.html and content.html.
Then use include function in index.html to include content.html.
Example :
if(isAjaxRequest()) //try to find the right function here
echo $twig->render('content.html', array('the' => 'variables', 'go' => 'here'))
else
echo $twig->render('index.html', array('the' => 'variables', 'go' => 'here'));
Edit :
If you do your ajax request with jQuery for example :
$.get('yoururl', function(data) {
$('#divtoremplace').html(data);
});
2) Use the request.ajax boolean in your index.html
{% if request.ajax == false %}
<p>My header, not reloaded with ajax</p>
{% endif %}
<p>My content, reloaded with ajax</p>
{% if request.ajax == false %}
<p>Other content, not reloaded with ajax</p>
{% endif %}
Not sure about the second one, but this should do the trick accordind to the documentation. The best way is the first solution, separate your code.