Alex Alex - 4 months ago 46
Twig Question

Add div after every 3d element twig loop, modulus

Hi so i have this twig loop, and what i need to to is after every 3rd element to add some html to close div row and open new one.

I tried with various snippets from this website but no luck with any one of them



<div class="row">
{% for date, date_info in dates %}
<div class="col-sm-4">
<div class="event-box">
{% for category in date_info.events %}
{% for event in category %}
<div class="event-header">
{% if event.get_runtime( 'content_img_url' ) is empty %}
{{ event | avatar( [
'post_thumbnail',
'location_avatar',
'category_avatar'
]) | raw }}
{% endif %}
<div class="event-date">
{{ date | month }}
{{ date | day }}
</div>
<div class="event-footer">
<h3>{{ event.get_runtime( 'filtered_title' ) | raw }}</h3>
<div class="event-time">
{{ event | timespan( 'short' ) | raw }}...
</div>
<div class="event-content"> {{ event.get_runtime( 'filtered_content' ) | slice(0,200) | raw }}</div>

<a class="btn btn-success" href="{{ event.get_runtime( 'instance_permalink' ) | e('html_attr') }}">
{{ text_read_more }}
</a>
</div>
</div>
{% endfor %} {# event in category #}
{% endfor %} {# category in date_info.events #}
</div>
</div>
{% endfor %} {# date, date_info in dates #}
</div>

Answer

Got it working with {% if loop.index is divisibleby(3) %}.

Here is my full working code example :

<div class="row">
{% for date, date_info in dates %}
<div class="col-sm-4">
    <div class="event-box">
        {% for category in date_info.events %}
            {% for event in category %}
                <div class="event-header">
                    {% if event.get_runtime( 'content_img_url' ) is empty %}
                        {{ event | avatar( [
                        'post_thumbnail',
                        'location_avatar',
                        'category_avatar'
                        ]) | raw }}
                    {% endif %}
                    <div class="event-date">
                        {{ date | month }}
                        {{ date | day }}
                    </div>
                    <div class="event-footer">
                        <h3>{{ event.get_runtime( 'filtered_title' ) | raw }}</h3>

                        <div class="event-time">
                            {{ event | timespan( 'short' ) | raw }}...
                        </div>
                        <div class="event-content"> {{ event.get_runtime( 'filtered_content' ) | slice(0,200) | raw }}</div>

                        <a class="btn btn-success"
                           href="{{ event.get_runtime( 'instance_permalink' ) | e('html_attr') }}">
                            {{ text_read_more }}
                        </a>
                    </div>
                </div>
            {% endfor %} {# event in category #}
        {% endfor %} {# category in date_info.events #}
    </div>
</div>
{% if loop.index is divisibleby(3) %}
</div>

<div class="row">

{% endif %}

{% endfor %} {# date, date_info in dates #}