在Shopify中添加自定义多图像部分

在Shopify中添加自定义多图像部分,shopify,liquid,shopify-template,Shopify,Liquid,Shopify Template,我正在尝试在Shopify中添加一个自定义部分,允许用户上传2张促销图片。我是一个新手,但我成功地为一个图像创建了一个自定义部分,但当我尝试在同一部分中的两个图像时,上传后的图像将不会显示在页面上 我在这里找到了一些线索来说明这一点。见下面的代码: {{ section.settings.test_2 | img_url: 'medium' | img_tag }} {{ section.settings.test_3 | img_url: 'medium' | img_tag }} {% s

我正在尝试在Shopify中添加一个自定义部分,允许用户上传2张促销图片。我是一个新手,但我成功地为一个图像创建了一个自定义部分,但当我尝试在同一部分中的两个图像时,上传后的图像将不会显示在页面上

我在这里找到了一些线索来说明这一点。见下面的代码:

{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}

{% schema %}
  {
    "name": "PromoTwo",
    "blocks":[
      {
        "type": "block-1",
        "name": "Block 1",
        "settings": [
          {
            "type": "image_picker",
            "id": "test_2",
            "label": "Promo Image 1"
          }
        ]
      },
      {
        "type": "block-2",
        "name": "Block 2",
        "settings": [
          {
            "type": "image_picker",
            "id": "test_3",
            "label": "Promo Image 2"
          }
        ]
      }
    ],
  "presets": [
    {
      "name": "PromoTwo",
      "category": "Content"
    }
  ]
  }
{% endschema %}
本节的目标是创建一个包含两个并排图像的节,用户可以自己上传这些图像

我怀疑我在这里做错了什么:

{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}

您正试图用正确的工具构建一些已经存在的东西,但方法是错误的

小节 部分的主要思想是为管理员提供一种交互式的方式来更新特定元素的内容

一个部分有两种实现方法:

  • 使用节设置
  • 使用剖面图块
截面设置和块之间的差异 节设置是可以通过“自定义”面板填充的静态字段。静态的,即在不编写额外代码的情况下,无法动态添加更多内容

另一方面,块与节设置相同,但它们可以通过动态方式添加,也可以在不为每个新块编写额外代码的情况下添加多个块

如果愿意,您可以在同一节文件中使用这两种方法,但需要学习如何正确调用它们

语法差异 以下是分区设置的外观:

{% schema %}
  {
    "name": "Slideshow",
    "settings": [
      {
        "id": "slide_image",
        "type": "image_picker",
        "label": "Image"
      }
    ]
  }
{% endschema %}
下面是您如何称呼它的:

{{ section.settings.slide_image | img_url: '1024x' | img_tag }}
Section是主要的
对象
,然后传递JSON对象,因此它成为
Section.settings.slide\u image


以下是块语法的外观:

{% schema %}
  {
    "blocks": [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "id": "slide_image",
            "type": "image_picker",
            "label": "Image"
          }
        ]
      }
    ]
  }
{% endschema %}
以下是正确的称呼:

{% for block in section.blocks %}
  {{ block.settings.slide_image | img_url: '1024x' | img_tag }}
{% endfor %}
你的代码怎么了? 1) 您正在使用分区块,但正在调用分区设置

2) 您正在使用相同的图像字段创建多块类型-这没有意义

3) 不要使用
img\u url:'medium'
此已弃用。用数字代替。例如
img\u url:'1024x'

您的代码应该是什么样子 下面是您的代码的外观:

{% for block in section.blocks %}
  {{ block.settings.promo_image | img_url: '1024x' | img_tag }}
{% endfor %}

{% schema %}
{
    "name": "Promo",
    "blocks": [
      {
        "type": "promo",
        "name": "Puote",
        "settings": [
          {
            "id": "promo_image",
            "type": "image_picker",
            "label": "Promo image"
          }
        ]
      }
    ],
    "presets": [
        {
        "name": "PromoTwo",
        "category": "Content"
        }
    ]
}
{% endschema %}
{%for section.blocks%}
{{block.settings.image | img_url:'150x150',比例:2 | img_标签:block.settings.image.alt,'logo-bar__image'}
{%endfor%}
{%schema%}
{
“名称”:“多图像”,
“最大积木”:4,
“设置”:[
{
“类型”:“标题”,
“内容”:“多图像”
}  
],
“区块”:[
{
“类型”:“选择”,
“名称”:“添加按钮”,
“设置”:[
{
“id”:“图像”,
“类型”:“图像选择器”,
“标签”:“添加图像”
} 
]
}
],
“预设”:[
{
“名称”:“多图像”,
“类别”:“文本”
}
]

}
假设我想在
块.settings.image
中添加一个
,如何实现?类似这样的内容