How To Render a Twig View - Vanilla Success
<main> <article class="userContent"> <p>There are multiple contexts in Vanilla where you may want to render a twig view.</p><h2 data-id="in-a-gdn_controller">In a <code class="code codeInline" spellcheck="false" tabindex="0">Gdn_Controller</code></h2><p>This is very easy. Follow the rules for naming views as defined in our <a href="https://docs.vanillaforums.com/developer/framework/views/" rel="nofollow noreferrer ugc">views documentation</a>. Then use the file extension <code class="code codeInline" spellcheck="false" tabindex="0">.twig</code> instead of <code class="code codeInline" spellcheck="false" tabindex="0">.php</code> .</p><p>View overrides, lookup, etcetera, all work exactly the same as with a PHP or Smarty view.</p><h2 data-id="in-a-non-controller-class-instance">In a non-controller class instance</h2><p>In contexts where we don't have a controller we may still need to render some HTML. One example of this would be in user content or embeds. These functions may be run in multiple contexts such as an API or Message Queue Job.</p><p>To render items in this case, apply the <code class="code codeInline" spellcheck="false" tabindex="0">TwigRenderTrait</code> to your class, and use the exposed method <code class="code codeInline" spellcheck="false" tabindex="0">->renderTwig($view, $data)</code>.</p><p><strong>Example</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0">class MyClass { use TwigRenderTrait; public function renderSomeHtml(): string { return $this->renderTwig('@my-addon/components/my-component.twig', [ 'param1' => 'Param Value' ]); } } </pre><h2 data-id="in-a-static-context">In a static context</h2><p>Sometimes we have a static or global method that requires rendering some HTML. In these cases it is not possible to use the <code class="code codeInline" spellcheck="false" tabindex="0">renderTwig()</code> method exposed by the twig render trait.</p><p>Instead similar functionality can be achieved by using <code class="code codeInline" spellcheck="false" tabindex="0">TwigStaticRenderer::renderTwigStatic($viewPath, $data)</code> .</p><p><strong>Example</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0">function oldGlobalFunction(): string { return TwigStaticRenderer::renderTwigStatic( '@my-addon/components/my-component.twig', ['param1' => 'Param Value'] ); } </pre><h2 data-id="view-aliases">View Aliases</h2><p>Twig provides some aliases to simplify view paths. The mapping goes from <code class="code codeInline" spellcheck="false" tabindex="0">@addon-key</code> -> the addon's view directory.</p><p><strong>Example</strong></p><p>An addon with the key <code class="code codeInline" spellcheck="false" tabindex="0">my-addon</code> has a view located at <code class="code codeInline" spellcheck="false" tabindex="0">/plugins/my-addon/views/components/my-component.twig</code> . This view may be accessed with the following alias:</p><p><code class="code codeInline" spellcheck="false" tabindex="0">@my-addon/components/my-component.twig</code></p> </article> </main>