1

Possibly a bad question title...sorry but wasn't sure how to describe it.

Basically I have a for loop that every 4 items I want to pull in a different item from another loop. This is a series of Q&A's in a staff interview, and each 4th item I want to break the side by side and pull in a full width quote.

Here is the breakdown of the code.

{% set pullQuotes =
  [
    'My biggest source of pride to date is my involvement in the Olympic Park Project: that’s part of my personal legacy.',
    'Frosts is a family environment. We’re successful from within. With our recent management acquisition of Frosts Landscapes, we’ve developed a new atmosphere, new business, and a great environment to work in. '
  ] %}

  <ul class="lg:flex lg:flex-wrap lg:justify-around">
    {% for row in entry.questionsAndAnswers %}
      {#            {% set width = loop.index is divisible by(3) ? 'lg:w-full' : 'lg:w-1/2' %}#}
      <li class="lg:w-1/2 py-6 px-6 max-w-xl">
        <h3 class="font-black text-18 mb-3">{{ row.question }}</h3>
        <div class="italic mb-12">
          {{ row.answer }}
        </div>
      </li>

      {% if loop.index % 4 == 0 and not loop.last %}

        {% for entry in pullQuotes %}
          <li class="w-full flex justify-center mb-12">
            <div>
              {{ svg('@icons/quote.svg', class="w-20 h-20  text-lime-500 flex-shrink-0 fill-current") }}
            </div>
            <blockquote class="pl-3 py-3 max-w-xl text-20 text-semibold text-lime-500 italic">
              {{ entry }}
            </blockquote>
          </li>
        {% endfor %}
      {% endif %}
    {% endfor %}
  </ul>

The problem I have is that the loop of the pullQuotes is being iterated each time after every 4th item. What I want to do is pull the first item from the pull Quotes in position 4 and the second item from pullQuotes in position 8 and so on...

Both of these will be CMS managed and so the number of Q&A's and pullQuotes could vary, so it needs to be flexible.

Anyone able to help me figure this one out?

2

How about this; you get the pull quote index by dividing the loop index by 4 (will always return an int) and then you modulo that index against the length of your quotes array:

{% if loop.index % 4 == 0 and not loop.last %}
      {% set entry = pullQuotes[(loop.index / 4) % (pullQuotes | length) - 1] %}
      <li class="w-full flex justify-center mb-12">
        <div>
          {{ svg('@icons/quote.svg', class="w-20 h-20  text-lime-500 flex-shrink-0 fill-current") }}
        </div>
        <blockquote class="pl-3 py-3 max-w-xl text-20 text-semibold text-lime-500 italic">
          {{ entry }}
        </blockquote>
      </li>
{% endif %}
| improve this answer | |
  • That's nice @Seb, only issue is the pullQuotes are in reverse order with this code. – Terry Upton Nov 14 '19 at 11:15
  • @TerryUpton ah yes because of the 0 indexing, corrected the answer now. – Seb Nov 14 '19 at 11:36
  • 1
    I believe changing the {% set entry = pullQuotes[(loop.index / 4) % (pullQuotes | length) - 1] %} to {% set entry = pullQuotes[(loop.index0 / 4) % (pullQuotes | length) - 1] %} – Terry Upton Nov 14 '19 at 11:37

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.