Using Twig Templates

1

I’m trying to setup a site using Twig templates and I’m able to render a view with not problem, but I’m not sure how to setup partial views in a template. Something similar to this:

<html>
<head>
</head>
<body>
<div class="header">Main Header</div>
<div class="container">
// twig views here based on the route
</div>
</body>
</html>

Seems like $twig->loadTemplate(‘template.html’) is close to what I’m looking for, but not sure if Slim/Twig uses this as well.

Thanks for any help.

2

Hi,

What is your current configuration at the moment for your Slim app?

3

Here’s what I currently have. It’s working, but again, not sure how to go about providing views within the template with Twig:

$app = new \Slim\App();
$container = $app->getContainer();
$container['view'] = function ($container) {
    $view = new \Slim\Views\Twig('templates/');
    $view->addExtension(new \Slim\Views\TwigExtension(
        $container['router'],
        $container['request']->getUri()
    ));
    return $view;
};

$app->get('/',function($request,$response,$args) {
  return $this->view->render($response, 'template.html');
});

$app->run();
4

just to confirm, are you asking about how to include other templates within each other?

5

Yes. Basically I want a main template file (template.html) and then based on the route, I want to include the page content (about.html) within the template.html file.

6

Ah, so you will want to look at the Twig docs.

A simplified version:

{% extends 'base.html.twig' %}

{% block body %}
<h1>My About Page</h1>

<!-- some stuff -->
{% endblock %}

An old repo, but look at this, it may help?

7

I did try the {% extends %} part, but without the .twig extension and got a multiple body tag error. I will dig into a little deeper. But, yes, this is what I’m after. Thanks!

8

No worries. Any further questions, let me know. :slight_smile:

9

If the

{% extends ...%}

tag confuses you, note that you can use

{% include ... %}

to write templates which are in style/structure equivalent to smarty templates.

I personally use the extends variation, but I’m actually not so sure what the advantage is vs. using a traditional include-based approach.

10

The extends keyword pulls in a template where you can overwrite blocks, whereas the include keyword allows you to pull in partial files for specific content.

For example: about.html.twig extends base.html.twig whereas about.html.twig can include footer.html.twig.

11

Yeah, it’s just a different way of writing your templates. If you’re coming from something like Smarty, using the include template may be a better option to get you started since that’s a type of structure you’re using to working with.

12

I used Smarty for years up until recently, which makes the include my first choice.

Using the {% include ‘about.html’ %} did the trick. I’m sure I overlooked the simplicity over it several times :slight_smile:

Thanks again for the help.

13

So in the end, this is how I have the routing setup. And it works.

Thanks again for the help.

The App

$app->get('/',function($request,$response) {
	$data["page"] = "home.html";
	return $this->view->render($response,'template.html',$data);
});

$app->get('/about',function($request,$response) {
	$data["page"] = "about.html";
	return $this->view->render($response,'template.html',$data);
});

$app->get('/contact',function($request,$response) {
	$data["page"] = "contact.html";
	return $this->view->render($response,'template.html',$data);
});

The HTML

<html>
<head>

<!-- styles/scripts -->

</head>
<body>
<div class="header">
	<h1>Header</h1>
</div>
<hr>
<div class="content">
	{% include page %}
</div>
</body>
</html>
14

Just a last comment: for the sake of clarity, you might want to give your templates a ‘.twig’ extension. From a functional point of view this is (of course) completely irrelevant, but I prefer to be able to tell what file something is by looking at it’s filename/extension.