Search code examples
wordpresstwitter-bootstraptwigtimber

How to add button at the end of a loop with twig

UPDATE : I answer to my question with a solution who work. See below.

I created a loop that displays posts. Each two iteration a new row is created.

My loop iterate around this list of posts. The button is not considered in this array. But my problem is that I would like to add a button in the last col.

In the options of my back office I give the possibility to show or not this button. So sometime I don't need to add a last col with this button.

Furthermore I need to add col-md-push-2 on each column on two because I use a Bootstrap grid (even on the column of the button when the button is active in the back office).

enter image description here

I wrote this code who work fine. But I don't know where to add my button.

<div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if buttonIsActive %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
</div>

I don't know where can I add the code for my button. I know that I actually have my button in each row :-(

Example of html I try to generate.

<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5 ">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
        <div class="col-xs-12 col-md-5 col-md-push-2">
            <div class="div-for-my-content">
                Col content
            </div>
        </div>
    </div>
</div>
<div class="group">
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>
        </div>
    </div>
</div>
Solution

  • In order to place the button at the right spot, inside an open row, or open a new row you could check if the count of the items inside posts is even or not. Do note, u'd need to do the test twice, once for even and once for uneven

    <div class="group">
    <div class="row">
        {% for post in posts %}
        <div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
            <div class="div-for-my-content">
                Col content
            </div>
            {% if loop.last and posts|length % 2 != 0 %}
            <div class="div-for-my-button">
                Button
            </div>
            {% endif %}
        </div>
{% if loop.index % 2 == 0 and not loop.last %}
    </div>
</div>
<div class="group">
    <div class="row">
{% endif %}
        {% endfor %}
    </div>
    {% if posts|length % 2 == 0 %}
    <div class="row">
        <div class="col-xs-12 col-md-5">
            <div class="div-for-my-button">
                Button
            </div>        
        </div>
    </div>
    {% endif %}
</div>

    demo