如何在不使用循环的情况下向Shopify部分添加多个图像？

我想做一个部分，我可以添加3个图像。每个图像的样式都不同，因此必须包装在自己的类和元素中

我已经能够通过使用for循环完成3个图像，例如：

  {% for block in section.blocks %}  
    <div class="image_box"> 
      {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
    </div>
  {% endfor %}

---

这在某种程度上取决于您希望给主题编辑工具的用户提供多少控制，但是如果您不介意向他们公开更多选项，您可以尝试以下方法：

{% schema %}
{
  "name": {
    "en": "Multi-hero"
  },
  "class": "index-section index-section--flush",
  "max_blocks": 3,
  "settings": [
  ],
  "blocks": [
    {
      "type": "image",
      "name": {
        "en": "Image"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        },
        {
          "type": "select",
          "default": "center",
          "id": "image_style",
          "label": {
            "en": "Style"
          },
          "options": [
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "large",
              "label": "Large"
            },
            {
              "value": "huge",
              "label": "Huge"
            }
          ]
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Multi-hero"
      },
      "category": {
        "en": "Image"
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}

然后在输出中使用：

{% for block in section.blocks %}  
    <div class="image_box image_box--{{ block.settings.image_style }}"> 
      {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
    </div>
  {% endfor %}

{%for section.blocks%}
{{block.settings.image | img_url:'150x150'，比例：2 | img_标签：block.settings.image.alt，'logo-bar__image'}
{%endfor%}

或者，如果要更改图像类：

{% for block in section.blocks %}  
    <div class="image_box"> 
      {% assign image_class = 'logo-bar__image image-size--' | append: block.settings.image_style }} %}
      {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, image_class }}
    </div>
  {% endfor %}

{%for section.blocks%}
{%assign image_class='logo-bar_图像大小--'| append:block.settings.image_style}}%}
{{block.settings.image | img_url:'150x150'，比例：2 | img_标记：block.settings.image.alt，image_类}
{%endfor%}

您可以对不同类型的图像使用块类型，而不是依赖于For循环。我使用您的代码创建了3种不同类型的块，即

左图

图像中心

影像权

然后使用case以不同类型的块为目标

{% for block in section.blocks %}  
    {% case block.type %}
        {% when 'image-left' %}
            {{block.type}} - Image Left Markup
        {% when 'image-center' %}
            {{block.type}} - Image Center Markup
        {% when 'image-right' %}
            {{block.type}} - Image Right Markup
    {% endcase %}
{% endfor %}

{% schema %}
{
  "name": {
    "en": "Multi-hero"
  },
  "class": "index-section index-section--flush",
  "max_blocks": 3,
  "settings": [],
  "blocks": [
    {
      "type": "image-left",
      "name": {
        "en": "Image Left"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    },
    {
      "type": "image-center",
      "name": {
        "en": "Image Center"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    },
    {
      "type": "image-right",
      "name": {
        "en": "Image Right"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    }
  ]
}
{% endschema %}

---

谢谢，这很接近，但我想在图像周围添加额外的元素，而不仅仅是不同的类。我最后使用的是forloop索引，例如

{%if-forloop.index==1%}//something{%elsif-forloop.index==2%}等等

{% for block in section.blocks %}  
    {% case block.type %}
        {% when 'image-left' %}
            {{block.type}} - Image Left Markup
        {% when 'image-center' %}
            {{block.type}} - Image Center Markup
        {% when 'image-right' %}
            {{block.type}} - Image Right Markup
    {% endcase %}
{% endfor %}

{% schema %}
{
  "name": {
    "en": "Multi-hero"
  },
  "class": "index-section index-section--flush",
  "max_blocks": 3,
  "settings": [],
  "blocks": [
    {
      "type": "image-left",
      "name": {
        "en": "Image Left"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    },
    {
      "type": "image-center",
      "name": {
        "en": "Image Center"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    },
    {
      "type": "image-right",
      "name": {
        "en": "Image Right"
      },
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": {
            "en": "Image"
          }
        }
      ]
    }
  ]
}
{% endschema %}