Get support for yiisoft/view-twig

If you need help reviewing implementation, debugging, understanding undocumented features or anything in general with yiisoft/view-twig, you can see the list of people available to help below. Save yourself timme by talking directly to the owner, maintainers and contributors of yiisoft/view-twig. Who is better qualified to help you? You also get the added benefit of providing additional revenue to the projects you use, helping them remain sustainable.

Save yourself timme by talking directly to the owner, maintainers and contributors of yiisoft/view-twig. Who is better qualified to help you? You also get the added benefit of providing additional revenue to the projects you use, helping them remain sustainable.

If you're new to LTH, please see our FAQ for more information on what it is we do.

Support Options

Unfortunately, there are currently no active helpers for this repository on the platform. Until they become available, we reccomend the following actions:

View Open Issues

Take a look to see if anyone else has experienced the same issue as you and if they managed to solve it.

Open an Issue

Make sure to read any relevant guidelines for opening issues on this repo before posting a new issue.

Sponsor directly

Check out the page and see if there are any options to sponsor this project or it's developers directly.

yiisoft/view-twig

View on github

The package is an extension of the Yii View Rendering Library. This extension provides a ViewRender that would allow you to use Twig view template engine.

Requirements

PHP 8.0 or higher.

Installation

The package could be installed with Composer:

composer require yiisoft/view-twig

General usage

In your application, you should specify the configuration for Twig (by default, this is config/packages/yiisoft/view-twig/common.php):

use Psr\Container\ContainerInterface;
use Twig\Environment;
use Twig\Loader\FilesystemLoader;
use Yiisoft\Aliases\Aliases;
use Yiisoft\View\Twig\Extensions\YiiTwigExtension;
   
return [
    Environment::class => static function (ContainerInterface $container): Environment {
        $loader = new FilesystemLoader($container
            ->get(Aliases::class)
            ->get('@views'));

        $twig = new Environment($loader, [
            'cache' => $container
                ->get(Aliases::class)
                ->get('@runtime/cache/twig'),
            'charset' => 'utf-8',
        ]);

        $twig->addExtension(new YiiTwigExtension($container));
        return $twig;
    },
];

And also override the configuration for WebView (by default, this is config/packages/yiisoft/view/web.php):

use Psr\Container\ContainerInterface;
use Psr\EventDispatcher\EventDispatcherInterface;
use Twig\Environment;
use Yiisoft\Aliases\Aliases;
use Yiisoft\View\WebView;
use Yiisoft\View\Twig\ViewRenderer;

/** @var array $params */
   
return [
    //...
    WebView::class => static function (ContainerInterface $container) use ($params): WebView {
        $webView = new WebView(
            $container
                ->get(Aliases::class)
                ->get('@views'),
            $container->get(EventDispatcherInterface::class),
        );

        $webView = $webView
            ->withDefaultExtension('twig')
            ->withRenderers(['twig' => new ViewRenderer($container->get(Environment::class))])
        ;

        $webView->setCommonParameters($params['yiisoft/view']['commonParameters']);
        return $webView;
    },
    //...
];

Template

All variables that were in the regular template are also available in the twig template.

The get(string $id); function allows you to get the definition that was set by the container, this function is available in all view templates and layouts:

{{ get('App\\Widget\\PerformanceMetrics').widget()|raw }}

The default main layout of the application template will look like this:

{% do assetManager.register(['App\\Asset\\AppAsset', 'App\\Asset\\CdnFontAwesomeAsset']) %}
{% do this.addCssFiles(assetManager.getCssFiles()) %}
{% do this.addCssStrings(assetManager.getCssStrings()) %}
{% do this.addJsFiles(assetManager.getJsFiles()) %}
{% do this.addJsStrings(assetManager.getJsStrings()) %}
{% do this.addJsVars(assetManager.getJsVars()) %}
{{ this.beginPage()|raw }}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ this.getTitle() }}</title>
        {{ this.head()|raw }}
    </head>
    <body>
    {{ this.beginBody()|raw }}
        <section class="hero is-fullheight is-light">
            <div class="hero-head has-background-black">
                {{ get('Yiisoft\\Yii\\Bulma\\NavBar').widget()
                    .brandLabel(applicationParameters.getName())
                    .brandImage('/images/yii-logo.jpg')
                    .options({'class': 'is-black', 'data-sticky': '', 'data-sticky-shadow': ''})
                    .itemsOptions({'class': 'navbar-end'})
                    .begin()|raw
                }}
                {{ get('Yiisoft\\Yii\\Bulma\\Nav').widget()
                    .currentPath(urlMatcher.getCurrentUri() != null ? urlMatcher.getCurrentUri().getPath() : '')
                    .items([])|raw
                }}
                {{ get('Yiisoft\\Yii\\Bulma\\NavBar').end()|raw }}
            </div>
            <div class="hero-body is-light">
                <div class="container has-text-centered">
                    {{ content|raw }}
                </div>
            </div>
            <div class="hero-footer has-background-black">
                <div class="columns is-mobile">
                    <div class="column has-text-left has-text-light">
                        <i class="fas fa-copyright fa-inverse is-hidden-mobile"></i>
                        <a class="is-hidden-mobile" href="https://www.yiiframework.com/" target="_blank" rel="noopener">
                            {{ 'now'|date('Y') }} {{ applicationParameters.getName() }}
                        </a>
                        <a class="is-hidden-desktop is-size-6" href="https://www.yiiframework.com/" target="_blank" rel="noopener">
                            {{ applicationParameters.getName() }}
                        </a>
                    </div>
                    <div class="column has-text-centered has-text-light is-hidden-mobile"></div>
                    <div class="column has-text-right has-text-light">
                        <span class="icon">
                            <a href="https://github.com/yiisoft" target="_blank" rel="noopener">
                                <i class="fab fa-github fa-inverse" aria-hidden="true"></i>
                            </a>
                        </span>
                        <span class="icon">
                            <a href="https://join.slack.com/t/yii/shared_invite/enQtMzQ4MDExMDcyNTk2LTc0NDQ2ZTZhNjkzZDgwYjE4YjZlNGQxZjFmZDBjZTU3NjViMDE4ZTMxNDRkZjVlNmM1ZTA1ODVmZGUwY2U3NDA" target="_blank" rel="noopener">
                                <i class="fab fa-slack fa-inverse " aria-hidden="true"></i>
                            </a>
                        </span>
                        <span class="icon">
                            <a href="https://www.facebook.com/groups/yiitalk" target="_blank" rel="noopener">
                                <i class="fab fa-facebook-f fa-inverse" aria-hidden="true"></i>
                            </a>
                        </span>
                        <span class="icon">
                            <a href="https://twitter.com/yiiframework" target="_blank" rel="noopener">
                                <i class="fab fa-twitter fa-inverse" aria-hidden="true"></i>
                            </a>
                        </span>
                        <span class="icon">
                            <a href="https://t.me/yii3ru" target="_blank" rel="noopener">
                                <i class="fab fa-telegram-plane fa-inverse"></i>
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </section>
    {{ this.endBody()|raw }}
    </body>
</html>
{{ this.endPage(true)|raw }}

And the view template of the main page (site/index) will be as follows:

{% do this.setTitle(applicationParameters.getName()) %}

<h1 class="title">Hello!</h1>

<p class="subtitle">Let's start something great with <strong>Yii3</strong>!</p>

<p class="subtitle is-italic">
    <a href="https://github.com/yiisoft/docs/tree/master/guide/en" target="_blank" rel="noopener">
        Don't forget to check the guide.
    </a>
</p>