Certain image in collection to be bigger than the others - shopify

Question

I'm relatively new to coding and had been trying out for the past 3 months.
I am working on shopify, and the problem is I need the fourth image in every collection page to be bigger than the rest.
Current theme: minimal
current code in collection:
<div class="row products">
{% for product in collection.products limit: settings.pagination_limit %}
{% include 'product-loop' with collection.handle %}
{% endfor %}
<div>
I've research and it might be something to do with {% if forloop.index == 4 %} but I still can't seem to work it out, thus I need any of your professional help with this.

Answer 1

What about:
{% for product in collection.products %}
{% if forloop.index == 4 %}
{{ product.featured_image | product_img_url: 'large' | img_tag }}
{% else %}
{{ product.featured_image | product_img_url: 'small' | img_tag }}
{% endif %}
{% endfor %}

Answer 2

With the Minimal Shopify theme, I would suggest doing something like this in collection.liquid:
<div class="row products">
{% for product in collection.products limit: settings.pagination_limit %}
{% if forloop.index == 4 %}
{% assign image_size = 'large' %}
{% else %}
{% assign image_size = 'small' %}
{% endif %}
{% include 'product-loop' with collection.handle with image_size %}
{% endfor %}
</div>
And then change this line in product-loop.liquid:
<img src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
to this:
<img src="{{ product.featured_image | product_img_url: image_size }}" alt="{{ product.title | escape }}" />
The image for the 4th product in a collection will be large, and all other product images small. If however you want every 4th product image to be large, you would put this in collection.liquid instead:
<div class="row products">
{% for product in collection.products limit: settings.pagination_limit %}
{% capture image_size %}{% cycle 'small', 'small', 'small', 'large' %}{% endcapture %}
{% include 'product-loop' with collection.handle with image_size %}
{% endfor %}
</div>