CODEWITHSUNDEEP
twigyii2
Levi Putna
Levi Putna

Reputation: 3073

Yii2 twig HTML helper functions not working

Problem

I'm using yii2 with the twig templating engine. It seems to be working however I can't seem to use any of the methods of the Html helpers (yii/helpers/Html).

My view is extending a base layout using twig extends. {% extends "@layouts/_base.twig" %}

I am including 'yii/helpers/Html' in the _base.twig file. {{ use('yii/helpers/Html') }}

I'm using {{ html.encode(this.title) }} to render the page title in the header and 

{{ html.submitButton('Send Message', {
   'class': 'button button--cta button--expand',
}) | raw }}

to try and render a button in my view but neither seems to work, I don't get any errors, just nothing rendering.

Question

Have I set this up correctly? What should I have to do to render a button in yii2 twig? Very new to using twig.

Code

index.twig

{% extends "@layouts/_base.twig" %}

{% block layout %}

...

  {% set form = active_form_begin({
    'id' : 'contact-us-form'
  }) %}

...

  <div class="row">
    <div class="medium-8 medium-offset-2 columns">

      {{ form.field(contact_us, 'full_name').textArea([{
        'rows' : 6,
        'placeholder' : 'Let us know if you have any questions...'
      }]).label('Message', {
        'class' : 'label--inline'
      }) | raw }}

      </div>
    </div>
    <div class="row">
      <div class="medium-3 medium-offset-2 columns">

        {{ html.submitButton('Send Message', {
          'class': 'button button--cta button--expand',
        }) | raw }}

      </div>
    </div>

    {{ active_form_end() }}
    </section>
{% endblock %}

_base.twig

{{ use('yii/helpers/Html') }}
{{ use('yii/widgets/ActiveForm') }}
{{ use('yii/web/JqueryAsset') }}

{{ this.beginPage() }}

<!DOCTYPE html>
<html lang="{{app.language}}">

    <head>
        {{ this.head() }}
        <meta charset="{{app.charset}}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
        {{ html.csrfMetaTags() | raw }}
        {{ register_asset_bundle('www/assets/AppAsset') }}
        <title>{{ html.encode(this.title) }}</title>

    </head>

    <body>
    {{ this.beginBody() }}

    {% block header %}
        {% include "@layouts/components/header.twig" %}
    {% endblock %}

    {% block layout %}
    {% endblock %}

    {% block footer %}
        {% include "@layouts/components/footer.twig" %}
    {% endblock %}

    {{ this.endBody() }}
    </body>
</html>
{{ this.endPage() }}

Upvotes: 2

Views: 2281

Answers (2)

cronfy
cronfy

Reputation: 1056

To use \yii/helpers\Html helper in twig templates you need to configure twig extension accordingly. This is covered in documentation, Additional Configuration page.

You need to add 'globals' option inside 'twig' section of configuration (see 'THIS LINE' mark):

For yiisoft/yii2-twig version 2.1.0:

[
    'components' => [
        'view' => [
            'class' => 'yii\web\View',
            'renderers' => [
                'twig' => [
                    'class' => 'yii\twig\ViewRenderer',
                    'cachePath' => '@runtime/Twig/cache',
                    // Array of twig options:
                    'options' => [
                        'auto_reload' => true,
                    ],
 /* *THIS LINE* */  'globals' => ['html' => ['class'=>'\yii\helpers\Html']],
                    'uses' => ['yii\bootstrap'],
                ],
                // ...
            ],
        ],
    ],
]

Then just use it in template as 'html' variable, example:

{{ html.csrfMetaTags() | raw }}

For yiisoft/yii2-twig version 2.0.6 and earlier there was old syntax:

'globals' => ['html' => '\yii\helpers\Html'], // *THIS LINE*

Upvotes: 2

hesselek
hesselek

Reputation: 181

According actual documentation, the correct form must be:

    [
    'components' => [
        'view' => [
            'class' => 'yii\web\View',
            'renderers' => [
                'twig' => [
                    'class' => 'yii\twig\ViewRenderer',
                    'cachePath' => '@runtime/Twig/cache',
                    // Array of twig options:
                    'options' => [
                        'auto_reload' => true,
                    ],
                    'globals' => ['html' => ['class'=>'\yii\helpers\Html']], // *THIS LINE*
                    'uses' => ['yii\bootstrap'],
                ],
                // ...
            ],
        ],
    ],
]

I don't know why, the former "html"=>'\yii\helpers\html' not works in one of my recents projects.

Upvotes: 1

Related Questions