Using forloop with Shopify liquid

Question

I'm trying to accomplish the following, but I can't seem to get the img src to populate correctly with the iteration number using Shopify's liquid language.

  {% for i in (1..11) %}
    <div class="item">
      <img src="{{ 'item-{{i}}.jpg' | asset_url }}" alt="Item {{i}}" />
    </div>
  {% endfor %}

Answer 1

Try this instead, your Liquid is trying to assign a render {{i}} inside another render {{}} which is not correct as they do not nest:

{% for i in (1..11) %}
    <div class="item">
      {% capture src %}item-{{i}}.jpg{% endcapture %}
      <img src="{{ src | asset_url }}" alt="Item {{i}}" />
    </div>
{% endfor %}

This works for me...