0

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

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}
| improve this answer | |
  • Hi Gavin. Thanks for this, I've tried different variations and still having issues. It's outputting a section every 2 entries but only wrapping 1 entry in the section. I need a section outputted every two entries but with the class 'section--light-grey' after 2 entries. – kala233 Aug 15 '16 at 13:39
  • Hi kala233. Ahah - sorry I wasn't thinking straight with the mod statements. Change the second {if} statement to be {if count % 2 == 0}. Should work then. There will then be an edge case if you have no entries in your list (you will get the closing <div> but no opening one) - if this is likely to happen add && count > 0 to the conditional for the second {if}. Good luck! – JCOGS Design Aug 16 '16 at 9:03

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.