Include then block on a Twig template

Question

None of the previous questions seem to have any information and about a day and a half of random Google searches turns up nothing.

What I am trying to do is this, I have a base.html.twig template and then a folder with several ui elements (slideshows, navigation menus, etc). The idea being I should be able to do this:

page.html.twig contains

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

{% block content %}

  {% include 'OnMyLemonCommonBundle::features.html.twig' %}

  {% block features %}

    <h2>Featured Articles</h2>

    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>

  {% endblock %}

{% endblock %}

features.html.twig contains

<div class="row">
  <div class="large-12 columns">
    <div class="row">

      <div class="large-4 small-6 columns">
        {% block features %}{% endblock %}
      </div>

      <div class="large-4 small-6 columns">
        {% block blogs %}{% endblock %}
      </div>

      <div class="large-4 small-12 columns">
        {% block pictures %}{% endblock %}
      </div>

    </div>
  </div>
</div>

The problem is that this will render as follows:

// Content from top of base.html.twig

<div class="row">
  <div class="large-12 columns">
    <div class="row">

      <div class="large-4 small-6 columns">
      </div>

      <div class="large-4 small-6 columns">
      </div>

      <div class="large-4 small-12 columns">
      </div>

    </div>
  </div>
</div>

<h2>Featured Articles</h2>

<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>

// Content from bottom of base.html.twig

The question is how would I make this output the following:

// Content from top of base.html.twig

<div class="row">
  <div class="large-12 columns">
    <div class="row">

      <div class="large-4 small-6 columns">

        <h2>Featured Articles</h2>

        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>

      </div>

      <div class="large-4 small-6 columns">
      </div>

      <div class="large-4 small-12 columns">
      </div>

    </div>
  </div>
</div>

// Content from bottom of base.html.twig

redbirdo · Accepted Answer · 2013-05-09 19:02:36Z

1

You could accomplish this by having an additional layer of inheritance in your twig files, e.g.:

features-base.html.twig contains:

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

{% block content %}

  {% include 'OnMyLemonCommYonBundle::features.html.twig' %}

{% endblock %}

page.html.twig contains:

{% extends 'OnMyLemonCommonBundle::features-base.html.twig' %}

{% block features %}

  <h2>Featured Articles</h2>

  <li><a href="#">Article 1</a></li>
  <li><a href="#">Article 2</a></li>

{% endblock %}

answered May 9, 2013 at 19:02

redbirdo

4,9571 gold badge33 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxim · Accepted Answer · 2013-05-08 16:55:53Z

0

I don't think this is possible, however you can try to use the following

{% render'bundle:Controller:method' %}

Where you render it like this

<div class="row">
  <div class="large-12 columns">
    <div class="row">

      <div class="large-4 small-6 columns">
          {{ features }}
      </div>

      <div class="large-4 small-6 columns">
      </div>

      <div class="large-4 small-12 columns">
      </div>

    </div>
  </div>
</div>

I hope this is a solution to your problem

answered May 8, 2013 at 16:55

Maxim

3,9567 gold badges46 silver badges66 bronze badges

3 Comments

onmylemon Over a year ago

It does work to a certain extent however we have the problem of the output being escaped as follows <h1>Welcome</h1><hr>

onmylemon Over a year ago

Ok I fixed that by using {% autoescape false %}{% endautoescape %}

Maxim Over a year ago

You can also use the filter |raw, like this {{ featurename|raw }}

Collectives™ on Stack Overflow

Include then block on a Twig template

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related