1

I have a parent forloop that cycles through my content blocks and multiple child forloops that cycle through list items. I'm trying to alternate the left and right alignment for my child forloop items and for it to carry through into the sibling child forloops.

How do I define and carry through the previous alignment so the sibling child forloops can start off with the correct alignment class?

This is what I had initally:

{% for block in entry.nt_content.level(1).all() %}

    {% for item in block.nt_panel_one.all() %}
      {% if (loop.index is even) %}
        {% set _rows = 'tw-row-start-1' %}
      {% else %}
        {% set _rows = '' %}
      {% endif %}
    {% endfor %}

    {% for item in block.nt_panel_two.all() %}
      {% if (loop.index is even) %}
        {% set _rows = 'tw-row-start-1' %}
      {% else %}
        {% set _rows = '' %}
      {% endif %}
    {% endfor %}

{% endfor %}

Update

Updated code based on Intermediate variable method showing code and visual representation.

enter image description here

{% for block in entry.nt_content.level(1).all() %}

{% set last_element_is_even = true %}

{% for item in block.nt_panel_one.all() %}
    {% if last_element_is_even %}
        {% set _rows = 'tw-row-start-1' %}
    {% else %}
        {% set _rows = '' %}
    {% endif %}

    {% set last_element_is_even = loop.index is even %}
{% endfor %}


{% for item in block.nt_panel_two.all() %}
    {% if last_element_is_even %}
        {% set _rows = 'tw-row-start-1' %}
    {% else %}
        {% set _rows = '' %}
    {% endif %}

    {% set last_element_is_even = loop.index is even %}
{% endfor %}
{% endfor %}
3

In the second inner loop, you need to add the number of items in the first panel to the current index to get a consistent count.

Might be an off-by-one-error in the following example, make sure to adjust for your desired output …

{% set panel_one_items = block.nt_panel_one.all() %}
{% set panel_two_items = block.nt_panel_two.all() %}
{% for item in panel_one_items %}
    {# … #}
{% endfor %}

{% for item in panel_two_items %}
    {% set is_even = ((panel_one_items|length) + loop.index0) is even %}
    {% … %}
{% endfor %}

As a sidenote: With modern CSS, you probably don't need to determine if the current item is even or odd at all. If you need to switch some styling (like alignment) based on that, you can use the :nth-child selector instead. Your code looks like its for some kind of grid layout with rows and columns? With CSS Grid, you don't need rows at all and get nice layout with proper spacing, alignment and gaps by default.

8
  • In your first example, I get displayed two odds and then an even. Do I need to adjust somehow?
    – Dan Lee
    Jan 13 at 14:22
  • @DanLee Yeah, set last_element_is_even to true initially instead of false. First is one, so first should be odd … fixed in my example code.
    – MoritzLost
    Jan 13 at 14:28
  • Ok now I get one odd and two evens...
    – Dan Lee
    Jan 13 at 14:34
  • See updated code and image showing the resault. Any idea what might be the issue?
    – Dan Lee
    Jan 13 at 14:48
  • @DanLee Ok my bad, first approach doesn't work at all – you need the offset for each iteration in the second loop. I've updated my answer to only include the second approach, this one should work and is a bit more reliable. Keep in mind that code examples are only ever that – never copy them directly, and always try to understand what they're doing. This way, you can spot and correct error like this and aren't relying on a stranger on the internet for business logic :) Also, maybe reconsider the caveat below the line.
    – MoritzLost
    Jan 13 at 15:00

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.