Making an entry grid with Batch 2,3 (2 in row then 3 in row)

Question

I'm trying to make a News item grid. I'm looking for a solution to output 2 type of "rows". One that shows 2 entries and the other shows 3 entries. I tried playing around with batches already but can't really manage to get it working alright. Is batch the right filter to use? If not what should I try using?

It should look like this:

Twigless code looks like this:

<!-- Begin row type 1 -->
    <div class="row rowDivider">
        <div class="col-md-4">
            <div class="caseGrid-item">

            </div>
        </div>
        <div class="col-md-8">
            <div class="caseGrid-item big-item">

            </div>
        </div>
    </div>
    <!-- End row type 1 -->
    <!-- Begin row type 2 -->
    <div class="row rowDivider">
        <div class="col-md-4">
            <div class="caseGrid-item">

            </div>
        </div>
        <div class="col-md-4">
            <div class="caseGrid-item">

            </div>
        </div>
        <div class="col-md-4">
            <div class="caseGrid-item">

            </div>
        </div>
    </div>
    <!-- End row type 2 -->
    <!-- Begin row type 1 -->
    <div class="row rowDivider">
        <div class="col-md-8">
            <div class="caseGrid-item big-item">

            </div>
        </div>
        <div class="col-md-4">
            <div class="caseGrid-item">

            </div>
        </div>
    </div>
    <!-- End row type 1 -->

Answer 1

With some help from HendrikEng's answer I figured out something that does work.

I had to make the batch bigger to an amount of 5 making the "row's" bigger. Also I had to set the position of the bigger block which always is the first or second of this batch so I could set this witha variable which changes if a new batch started.

This is the finalcode which works perfect:

{% for entry in craft.entries.section('cases')|batch(5) %}
    <!-- Set position for the bigger block -->
    {% set bigBatchNr = 2 %}
    <!-- Change position for the bigger block if the batch loop is even -->
    {% if loop.index is even %}
        {% set bigBatchNr = 1 %}
    {% endif %}

    <div class="row rowDivider">
        {% for batch in entry %}
            {% if loop.index == bigBatchNr %}
                <div class="col-md-8">
                    <div class="caseGrid-item big-item">

                    </div>
                </div>
            {% else %}
                <div class="col-md-4">
                    <div class="caseGrid-item">

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

Answer 2

I think a way to achieve this, is to use a loop. If the pattern repeats after the third row, you could use odd or even.

there might be a better way,

https://mijingo.com/blog/where-am-i-in-the-twig-loop

UPDATE i tested it, it kinda works but unfortunately it skips the 3rd item like that, as well as there still needs to be a solution for changing the first row layout every second loop

{% for entry in items|batch(3) %}
 <div class="row rowDivider">
   {% if loop.index is odd %}
     {% for batch in entry[0:2]   %}
       {% if loop.index == 1 %}
         <div class="col-md-4">{{batch}}</div>
       {% else %}
         <div class="col-md-8">{{batch}}</div>
       {% endif %}
     {% endfor %}
   {% else %}
     {% for batch in entry %}
         <div class="col-md-4">4 item">{{batch}}</div>
     {% endfor %}
   {% endif %}
</div>
{% endfor %}

playground for testing : http://twig.stapps.io/

json i used :

{ "items": ["1" , "2", "3", "4", "5" , "6", "7", "8","9" , "10", "11", "12" ] }

Answer 3

This is how I re-created Businessweek category page. It's not perfect, but you can start from there:

{% paginate craft.entries.section('news').relatedTo(category).limit(17) as pageInfo, paginatedEntries %}
{% set firstTwo = paginatedEntries|slice(0,2) %}
{% set secondThree = paginatedEntries|slice(3,3) %}
{% set lastFour = paginatedEntries|slice(6,10) %}

<div class="row sub-section-1">
    {# Batch of 2 columns #}
    {% for entry in firstTwo %}
        <div class="col-lg-6">
            <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
            <div class="summary">{{ entry.summary }}</div>
        </div>
    {% endfor %}
</div>
<div class="row sub-section-2">
    {# Batch of 3 columns #}
    {% for entry in secondThree %}
        <div class="col-lg-6">
            <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
            <div class="summary">{{ entry.summary }}</div>
        </div>
    {% endfor %}
</div>
<div class="row sub-section-3">
    {# Rest of entries #}
    {% for entry in lastFour %}
        <article class="col-lg-12">
            <h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
            <div class="summary">{{ entry.summary }}</div>
        </article>
    {% endfor %}
</div>