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

Question

我正在尝试在 Shopify 中添加一个自定义部分，以允许用户上传 2 张宣传图片。我是新手，但我设法为 1 张图片创建了一个自定义部分，但是当我尝试为同一部分中的两张图片尝试时，上传后图片不会显示在页面上。

我在这里找到了一些线程来让我明白这一点。见以下代码：

{{ 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 }}

Answer 1

您正在尝试使用正确的工具构建已经存在但方法错误的东西。

部分

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

一个部分有两种方法可以实现这一点：

• 使用部分设置
• 使用节块

部分设置和块之间的区别

部分设置是可以通过自定义面板填充的静态字段。静态的意思是你不能在不编写额外代码的情况下动态添加更多内容。

另一方面，块与部分设置相同，但它们可以是动态的，或者您可以添加多个块，而无需为每个新块编写额外的代码。

如果你愿意，你可以在同一个节文件中使用它们，但你需要学习如何正确调用它们。

语法差异

以下是部分设置的样子：

{% schema %}
  {
    "name": "Slideshow",
    "settings": [
      {
        "id": "slide_image",
        "type": "image_picker",
        "label": "Image"
      }
    ]
  }
{% endschema %}

这里是你的称呼：

{{ section.settings.slide_image | img_url: '1024x' | img_tag }}

Section 是主要的 object，然后传递 JSON 对象，因此它变为 section.settings.slide_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_url: 'medium' 这个已弃用。改用数字。例如img_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 %}

Answer 2

{% 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": "multi image",
	"max_blocks": 4,
    "settings": [
		 {
      "type": "header",
      "content": "multi image"
    }  
	],
  "blocks": [
    {
      "type": "select",
      "name": "Add Button",
      "settings": [
        {
          "id": "image",
          "type": "image_picker",
       	  "label": "Add image"
        } 
      ]
    }
  ],
  "presets": [
    {
      "name": "multi image",
      "category": "text" 
    }
  ]
  }