Loop a new section (outside loop) after every 2 entries

Question

This is a strange one I've never come across over 5 years developing with EE. There may be a simple solution but I'm not seeing it!

Essentially, I need to create a dynamic loop that outputs a different colour background after each 2 entries. To help you understand, I have a full screen width background, inside there is a container with 2 entries. After these two, there is a new full width background with another 2 entries, then after those two, it reverts back to the original colour and so on...

This is my code:

<section class='section section-desktop'>

        <div class="l-wrap">

          <div class="l-grid">
            {exp:channel:entries channel="partners" orderby="date" sort="asc"}{if partner_group == "Construction & Property"}<div class="l-grid__item-half">

            {if partner_logo != ""}<img class="partner-logo partner-logo--large" src="{partner_logo}" alt="{title} logo">{if:else}
            <div class="icon-construction-property content-icon" data-grunticon-embed></div>{/if}
              <p><strong>Company Name:</strong> {title}</p>
              <p><strong>Established:</strong> {partner_established}</p>
              <p><strong>Key business activities:</strong></p>
              {partner_key_business_activities}
              {partner_additional_info}
              {if partner_website_link != ""}<p><a class="btn" href="{partner_website_link}">Visit website</a></p>{/if}
            </div><!--
            -->{/if}{/exp:channel:entries}
          </div>

        </div>

      </section>

All I need to do is add a class of "section--light-grey" to the main section class. Because this is outside the loop, I can't use {switch} or conditional counting.

Any idea how to do this without creating multiple loops with offset parameters? Or can I offset dynamically?

Here is a diagram of what I'm trying to achieve:

---

Entry 1 – Entry 2 (white background section)

---

Entry 3 – Entry 4 (light grey background section)

---

Entry 5 – Entry 6 (white background section)

---

Entry 7 – Entry 8 (light grey background section)

---

etc...

Answer 1

If I follow your question correctly, the output you want is for each pair of entries to be in their own sections, with the sections alternating between white and light grey backgrounds.

I'm not sure about this, because your sample code appears to list all the entries within a single pair of <section> tags.

If your output does split pairs of entries into separate <section> tags, then these need to be within the main loop not outside it.

If the <section> tags are within the loop, then it is easy to generate the output you need with simple EE conditionals. You probably can also lose one {if} nesting by using the search:field="value" parameter in your channel entries tag.

Here is a simple version of this... (not tested).

Hopefully it will give you something to edit / kick against.

{exp:channel:entries channel="partners" orderby="date" sort="asc" search:partner_group="Construction & Property"}
{if count % 2 == 1} {!-- Trigger a Section every two entries --}
<section class='section section-desktop {if count % 4 == 1}section--light-grey{/if}'> {!-- Trigger a grey-section every four entries --}
        <div class="l-wrap">
          <div class="l-grid">
{/if}
                <div class="l-grid__item-half">
                    {if partner_logo != ""}
                        <img class="partner-logo partner-logo--large" src="{partner_logo}" alt="{title} logo">
                    {if:else}
                        <div class="icon-construction-property content-icon" data-grunticon-embed></div>
                    {/if}
                    <p><strong>Company Name:</strong> {title}</p>
                    <p><strong>Established:</strong> {partner_established}</p>
                    <p><strong>Key business activities:</strong></p>
                    {partner_key_business_activities}
                    {partner_additional_info}
                    {if partner_website_link != ""}<p><a class="btn" href="{partner_website_link}">Visit website</a></p>{/if}
                </div>
{if count % 2 == 1} {!-- close the section every two entries --}
          </div>
        </div>
</section>
{/if}
{/exp:channel:entries}