Twig for loop break & continue

Archive
1

Hey all,

I’m working on something difficult. I’ve given a max range of items for a array and want to wrap a div around the result after the max range is passed. So here is my try. In the web i found a plugin where I can add a break into the for loop but GRAV didn’t have this plugin.

PS: Maybe someone has a better solution to do THIS.

MD
—md
modal: true # More button appear and the items are limited to 'maxitems’
maxitems: 2 # Default 2
lazyload: false
jobs:

*TWIG*
---twig
{% if not page.header.modal %}
{% for job in page.header.jobs %}
    <li class="jobs-item">
      <p>{{ job.text }}</p>
      <div class="info">
        <icon data-name="{{ job.icon }}"></icon>
        <ul>
          <li>{{ job.title }}</li> 
          <li>{{ job.area }}, {{ loop.index }}</li>
        </ul>
      </div>
    </li>
{% endfor %}
{% else %}

{% set continue = true %}

{% for job in page.header.jobs %}
  {% if loop.index <= page.header.maxitems  %}
    <li class="jobs-item">
      <p>{{ job.text }}</p>
      <div class="info">
        <icon data-name="{{ job.icon }}"></icon>
        <ul>
          <li>{{ job.title }}</li>
          <li>{{ job.area }}, {{ loop.index }}</li>
        </ul>
      </div>
    </li>
  {% else %}
    {% set continue = true %}
  {% endif %}
{% endfor %}

{% if continue %}
  <div class="md-more">
    {% for job in page.header.jobs %}
      {% if loop.index > page.header.maxitems  %}
        <li class="jobs-item">
          <p>{{ job.text }}</p>
          <div class="info">
            <icon data-name="{{ job.icon }}"></icon>
            <ul>
              <li>{{ job.title }}</li>
              <li>{{ job.area }}, {{ loop.index }}</li>
            </ul>
          </div>
        </li>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

{% endif %}
---
2

You can try

{% set wrapper_added = false %}

{% for job in page.header.jobs %}
  {% if loop.index <= page.header.maxitems  %}
    {{ _self.printJob(job, loop.index) }}
  {% else %}
    {% if not wrapper_added %}
      <div class="md-more">
    {% endif %}
    
    {{ _self.printJob(job, loop.index) }}
  {% endif %}  
{% endfor %}
{% if wrapper_added %}
  </div>
{% endif %}

to avoid a double loop

3

@flaviocopes what does _self.printJob does ? Where should I paste this into it ?

4

@flaviocopes okey I’m sorry its a macro… But there is something else I found, I dont want to wrap the <div class="md-more"> within the loop

5

Found a solution, thanks to @flavioscopes :slight_smile:
—twig
{% macro printJob(job, index) %}

  • {{ job.text }}

    • {{ job.title }}
    • {{ job.area }}, {{ job.place }}
    • {% endmacro %} {% if not page.header.modal %} {% for job in page.header.jobs %} {{ _self.printJob(job, loop.index) }} {% endfor %}

    {% else %}
    {% for job in page.header.jobs %}
    {% if loop.index <= page.header.maxitems %}
    {{ _self.printJob(job, loop.index) }}
    {% endif %}
    {% endfor %}

    {% for job in page.header.jobs %} {% if loop.index > page.header.maxitems %} {{ _self.printJob(job, loop.index) }} {% endif %} {% endfor %}
    {% endif %} ---