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

如何解决如何在不使用循环的情况下将多个图像添加到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"
          }
        }
      ]
    }
  ],"presets": [
    {
      "name": {
        "en": "Multi-hero"
      },"category": {
        "en": "Image"
      },"blocks": [
        {
          "type": "image"
        },{
          "type": "image"
        },{
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}

解决方法

这取决于您要为主题编辑工具的用户提供多少控制，但是如果您不介意向他们提供更多选项，则可以尝试以下操作：

{% 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 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',image_class }}
    </div>
  {% endfor %}

,

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

1. 左图
2. 图像中心
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"
  },"settings": [],"blocks": [
    {
      "type": "image-left","name": {
        "en": "Image Left"
      },"label": {
            "en": "Image"
          }
        }
      ]
    },{
      "type": "image-center","name": {
        "en": "Image Center"
      },{
      "type": "image-right","name": {
        "en": "Image Right"
      },"label": {
            "en": "Image"
          }
        }
      ]
    }
  ]
}
{% endschema %}