Shopify图片与视频画廊自定义区块故障：图片区块无法显示问题求助

嘿，我明白你遇到的麻烦了——添加视频选项后，原本正常的图片区块在前端看不到，但后台还能正常选择图片，视频区块却能正常工作对吧？我仔细看了你的代码，发现了两个关键问题，改完就能解决啦：

1. 样式选择器错误，导致图片容器无尺寸 #

你的样式部分只给.image-wrap iframe设置了宽高，但这个选择器根本不会作用在图片的.image-wrap容器上（因为图片的div里没有iframe）。没有宽高的空div高度为0，自然看不到背景图。

你需要把样式分别应用到图片容器和视频iframe上：

.gallery .image-wrap,
.gallery iframe {
  display: inline-block;
  width: {{ section.settings.per-row }};
  height: {{ section.settings.height }};
}
.gallery .image-wrap {
  background-size: cover;
  background-position: center; /* 可选，让图片居中显示，避免裁剪变形 */
}

2. Schema里的一个小笔误 #

在“5 per row”的选项中，value值写成了"19.5"，缺少了百分号%，这会导致选择该选项时宽度样式失效，修复成"19.5%"即可：

{
  "value" : "19.5%",
  "label" : "5 per row"
}

修改后的完整代码参考 #

<div class="gallery">
  {% for block in section.blocks %}
    {% if block.type == "image" %}
      <div class="image-wrap" style="background-image: url('{{ block.settings.image | img_url: '500x' }}');">
      </div>
    {% endif %}
    {% if block.type == "video" %}
      {% if block.settings.video_url == blank %}
        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pEa_F0xk_5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      {% else %}
        {% if block.settings.video_url.type == "youtube" %}
          <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{ block.settings.video_url.id }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        {% endif %}
        {% if block.settings.video_url.type == "vimeo" %}
          <iframe src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}"></iframe>
        {% endif %}
      {% endif %}
    {% endif %}
  {% endfor %}
</div>

{% schema %}
{
  "name": "Gallery",
  "settings": [
    {
      "type" : "select",
      "id" : "per-row",
      "label" : "Images per row",
      "options" : [
        {
          "value" : "100%",
          "label" : "1 per row"
        },
        {
          "value" : "49.5%",
          "label" : "2 per row"
        },
        {
          "value" : "32.5%",
          "label" : "3 per row"
        },
        {
          "value" : "24.5%",
          "label" : "4 per row"
        },
        {
          "value" : "19.5%",
          "label" : "5 per row"
        }
      ],
      "default" : "49.5%"
    },
    {
      "type" : "select",
      "id" : "height",
      "label" : "Image Height",
      "options" : [
        {
          "value" : "300px",
          "label" : "300px"
        },
        {
          "value" : "400px",
          "label" : "400px"
        },
        {
          "value" : "500px",
          "label" : "500px"
        }
      ],
      "default" : "500px"
    }
  ],
  "blocks" : [
    {
      "type" : "image",
      "name" : "Image Block",
      "settings" : [
        {
          "type" : "image_picker",
          "id" : "image",
          "label" : "Image"
        }
      ]
    },
    {
      "type" : "video",
      "name" : "Video Block",
      "settings" : [
        {
          "type" : "video_url",
          "id" : "video_url",
          "label" : "Video URL",
          "accept" : ["youtube","vimeo"]
        }
      ]
    }
  ],
  "presets": [
    {
      "name" : "Gallery"
    }
  ]
}
{% endschema %}

{% style %}
.gallery .image-wrap,
.gallery iframe {
  display: inline-block;
  width: {{ section.settings.per-row }};
  height: {{ section.settings.height }};
}
.gallery .image-wrap {
  background-size: cover;
  background-position: center;
}
{% endstyle %}

{% javascript %}
{% endjavascript %}

这样修改后，图片容器会有正确的宽高，背景图就能正常显示，视频区块的样式也能和图片保持一致啦～

内容的提问来源于stack exchange，提问作者Keegan