[FIXED] how to separate products from loop and put them in to division group by 2 in shopify

Issue

I have an products array {1,2,3,4,5,6,7,8}

I want to put them into div group by 2

I have a structure like this the problem is i got all products in one div I want to separate every two products

<div class="images">
images 1 to 8
</div>

I need structure like

 <div class="images">
images 1 and 2

images 3 and 4 images 5 and 6 images 7 and 8

{% for media in product.media %}
               
      
    <div class="image-block ">       
      

      <a  href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
         class=" product-single__thumbnail--{{ section.id }} even count-{{forloop.index}} "
         data-thumbnail-id="{{ section.id }}-{{ media.id }}">  <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: 'large', scale: 2 }}" alt="{{ thumbnailAlt }}"></a>


    </div>
    
        {% endfor %}

Solution

use logic this into your loop to open and close and HMTL element according to your need.

{% for media in product.media %}
  {% assign data = forloop.index | modulo:2 %}
  {% if data != 0 %}<div class="wrapper">{% endif %}
    inner content goes here
  {% if data == 0 %}</div>{% endif %}
{% endfor %}

Here is the working example of the same code:

Answered By - Onkar

Answer Checked By - Willingham (PHPFixing Volunteer)