Ad

October CMS | Creating A Portfolio With 'show More' But Struggling With Twig

- 1 answer

What I would like to achieve is, when there are more than 6 items, the remaining items go into the 'show more' section automatically.

{% for item in portfolioItems %}
<div class="col-md-4">
    <img src="{{ item.portfolioItemsImage |media }}" alt="">
    <h5>{{item.portfolioItemsTitle}}</h5>
</div>

After 6 items have been displayed above the rest of the items should be shown below.

<!-- HIDDEN -->
<div id="showmore" class="collapse">
    <img src="{{item.portfolioItemsImage|media}}" alt="">
    <h5>{{item.portfolioItemsTitle}}</h5>
</div>
{% endfor %}

<button class="btn btn-primary" data-toggle="collapse" data-target="#showmore">Show More</button>
Ad

Answer

You can either make two loops and use the slicing techniques:

{% for item in portfolioItems[:6] %}
  <div class="col-md-4">
    <img src="{{ item.portfolioItemsImage|media }}" alt="">
    <h5>{{ item.portfolioItemsTitle }}</h5>
  </div>
{% endfor %}

{% for item in portfolioItems[6:] %}
  <!-- HIDDEN -->
  <div id="showmore" class="collapse">
    <img src="{{ item.portfolioItemsImage|media }}" alt="">
    <h5>{{ item.portfolioItemsTitle }}</h5>
  </div>
{% endfor %}

Simple demo here: https://twigfiddle.com/6olcw2


Or you could use the loop variables along with a if/else

{% for item in portfolioItems %}
  {% if loop.index <= 6 %}
    <div class="col-md-4">
      <img src="{{ item.portfolioItemsImage|media }}" alt="">
      <h5>{{ item.portfolioItemsTitle }}</h5>
    </div>
  {% else %}
    <!-- HIDDEN -->
    <div id="showmore" class="collapse">
      <img src="{{ item.portfolioItemsImage|media }}" alt="">
      <h5>{{ item.portfolioItemsTitle }}</h5>
    </div>
  {% endif %}
{% endfor %}

Simple demo here: https://twigfiddle.com/6olcw2/2

Ad
source: stackoverflow.com
Ad