2

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:

enter image description here

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 -->
2

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 %}
1

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" ] }
  • for the second loop and its repeating 'cold-md-4' element u could use batch to keep your code more dry. – HendrikEng Feb 27 '17 at 12:27
  • This wouldn't work because it will throw in a "row" every time it re-loop to show an entry – Justin Dekkers Feb 27 '17 at 12:30
  • and if u would serve the content from a table and change for block to for row? – HendrikEng Feb 27 '17 at 12:39
  • I can't keep doing the {% if loop.index == x %} as I would have to keep editing the code everytime we add something. It just cant work like that. I figured out all I need is odd batches should add 2 entries and even batches should add 3 entries. – Justin Dekkers Feb 27 '17 at 13:25
  • i just realized its not very effective, if u wouldn't change the position of the columns in the third row, u could loop with odd and even. sorry you are right , thought its the right direction. – HendrikEng Feb 27 '17 at 13:29
1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.