# 商品媒体

> 在 Shoplazza 主题中展示商品图片、视频与 3D 模型：遍历 product 的媒体属性，配合 media_parse 过滤器封装成可复用 snippet。

商家可以为商品添加媒体，包括图片、3D 模型和视频。

## 资源

* [product object](/docs/theme/references/liquid/objects/product) 的 `media` 属性

## 实现商品媒体

商品媒体通常在[商品页面](/zh-CN/docs/theme/architecture/templates/product)上展示。但您可能也希望在 theme 的其他区域显示商品媒体，因此建议在 [snippet](/zh-CN/docs/theme/architecture/overview#snippets) 中构建媒体展示，以便复用。

要展示商品媒体，您可以遍历 `product` object 的 `images` 属性，并根据 `media_type` 应用相应的 [media\_parse filter](/docs/theme/references/liquid/filters/media#media_parse)。

### 示例

如果您希望在商品页面输出商品媒体，且商品页面内容托管在 `product.liquid` section 中，可以按以下方式操作：

* 创建一个名为 `product_images.liquid` 的 snippet，用于托管图片和媒体展示。
* 在 `product.liquid` section 中引入 `product_images.liquid`。

```liquid title="section/product.liquid"
{% include 'product_images' %}
```

```liquid title="snippets/product_images.liquid"
{% for item in product.images %}
  {% assign media = item.src | media_parse %}

  {% if media.mp4 or media.hls %}
    <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" poster="{{ media.preview_image }}">
      {% if media.hls %}
        <source src="{{ media.hls }}" type="application/x-mpegURL">
      {% endif %}
      {% if media.mp4 %}
        <source src="{{ media.mp4 }}" type="video/mp4">
      {% endif %}
    </video>

  {% elsif media.media_type == 'model3d' %}
    <div data-zoom-idx="{{ forloop.index0 }}">
      <button data-model-src="{{ media.sources }}" data-model-poster="{{ item.src }}">
        <img data-img-zoom="{{item.src}}" src="{{ item.src }}" alt="{{ item.alt | default: product.title | escape }}" data-media="{{ media.sources }}" />
      </button>
    </div>

  {% else %}
    <img data-img="{{ item.src }}" src="{{ shop.default_img }}" data-src="{{ item.src | img_url: '{width}x'}}" data-sizes="auto" alt="{{ item.alt | escape }}">
  {% endif %}
{% endfor %}
```

### 响应式媒体元素

Shoplazza 托管的 3D 模型使用 [Google 的 model viewer](https://modelviewer.dev/) 组件，外部渲染的视频在 `<iframe>` 元素中渲染。这两者默认都不是响应式容器。