How do I group matrix blocks into batches of 4?

Question

I am building a site which uses one content type as its primary holder for content. This is to make content editing easier on the content editor.

All URL's are primarily accessing this one content type, 'events'.

Within 'events' I have a matrix field 'authors'. Authors contains 1 block (also 'authors') with 4 fields, Name, Image, Bio and URL.

I am able to output the matrix blocks fine, but I am not familiar with a way to call all event entries without running them through a for loop first. Doing so causes my row/col layout to break but without batching them into groups of 4, my column layout also breaks.

I have attempted all solutions shown on stackexchange but none of them are suited for this scenario (calling all entries from a section) and my attempts at rewriting it to fit my solution has failed. Any help would be greatly appreciated.

{% for event in events %} {# loop through all events #}
    {% if event.startDate|date('Y') == now|date('Y') %} {#check to see if the event's start date is happening this year #}
        {% for row in event.authors|batch(4) %} {# use batch to create rows #}
            <div class="row">
                {% for block in row %}
                    {% switch block.type %}
                        {% case "author" %}
                            <div class="col-md-3 author"> 
                                {% set image = block.image.first() %}
                                    {% if image|length %}
                                        <img src="{{ image.getUrl('authorThumb') }}">
                                     {% endif %}
                                <p class="name">{{ block.authorName }}</p>
                                {% if block.twitterHandle|length %}
                                <p class="subtitle"><a href="http://twitter.com/{{ block.twitterHandle }}" target="_blank">@{{ block.twitterHandle }}</a></p>
                                {% endif %}
                                 <small>{{ event.startDate|date('m/d/y') }} @ {{ event.startDate|date('g:ia') }} </small>
                                 <hr>
                                 <p class="bio">{{ block.bio }}</p>
                            </div>
                    {% endswitch %}
                {% endfor %}
            </div>
        {% endfor %}
    {% endif %}
{% endfor %}

This is as close as I've gotten, but unfortunately this just creates rows for each entry as opposed to every 4 blocks.

Answer 1

You could use your own variable to count the matrix blocks in your loop. The code could look like this:

{% set rows = 0 %}

<div class="row">
    {% for event in events %} {# loop through all events #}
        {% if event.startDate|date('Y') == now|date('Y') %} {#check to see if the event's start date is happening this year #}
            {% for row in event.authors %}
                    {% for block in row %}
                        {% switch block.type %}
                            {% case "author" %}

                                {% if rows == 4 %}
                                    </div>
                                    <div class="row">
                                    {% set rows = 0 %}
                                {% endif %}


                                <div class="col-md-3 author"> 
                                    {% set image = block.image.first() %}
                                        {% if image|length %}
                                            <img src="{{ image.getUrl('authorThumb') }}">
                                         {% endif %}
                                    <p class="name">{{ block.authorName }}</p>
                                    {% if block.twitterHandle|length %}
                                    <p class="subtitle"><a href="http://twitter.com/{{ block.twitterHandle }}" target="_blank">@{{ block.twitterHandle }}</a></p>
                                    {% endif %}
                                     <small>{{ event.startDate|date('m/d/y') }} @ {{ event.startDate|date('g:ia') }} </small>
                                     <hr>
                                     <p class="bio">{{ block.bio }}</p>
                                </div>

                               {% set rows = rows + 1 %}

                        {% endswitch %}
                    {% endfor %}
            {% endfor %}
        {% endif %}
    {% endfor %}
</div>

It's important to set the variable outside the for loop, otherwise it does not work.