媒体过滤器

媒体过滤器使您能够渲染与各种店铺资源（例如商品和collection）关联的媒体。

img_url

variable | img_url

returns  string

返回图片的 CDN URL。

{{ product.image | img_url }}

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824.jpeg

img_url 接受 image object、图片 src 字符串，或 file_reference 类型 metafield 的 value：

{{ product.image.src | img_url: '400x' }}

{{ product.metafields.custom.spec_file.value | img_url: '400x' }}

size

variable | img_url: string

returns  string

size 参数允许您指定图片的尺寸，最大可达 5760 x 5760 px。您可以只指定宽度、只指定高度或同时指定两者，也可以使用以下命名尺寸：

Name	Dimensions
pico	16x16 px
icon	32x32 px
thumb	50x50 px
small	100x100 px
compact	160x160 px
medium	240x240 px
large	480x480 px
grande	600x600 px
original	1024x1024 px

{{ product.image | img_url: 'x200' }}

{{ product.image | img_url: '200x' }}

{{ product.image | img_url: '200x200' }}

{{ product.image | img_url: 'medium' }}

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_x200.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_200x.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_200x200.jpeg

//cdn.shoplazza.com/1af35e88f4be62831cdfbbbe86704824_240x240.jpeg

scale

variable | img_url: string, scale: number

returns  string

指定图片的像素密度。有效的密度值大于 1。

{{ product.image | img_url: '200x', scale: 2 }}

//img.staticdj.com/1af35e88f4be62831cdfbbbe86704824_400x.jpeg

media_parse

string | media_parse

returns  media object

返回使用 media_parse filter 解析 URL 查询参数的 media object。

{% assign media = product.image.src | media_parse %}

{{ media.media_type }}

{{ media.sources }}

{
  "product": {
    "image": {
      "src": "//cdn.shoplazza.com/2fc412cf6d4aa67eb560b615aea972a21686877786133.png?media_type=model3d&sources=https:\/\/model3d.shoplazza.com\/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb"
    }
  }
}

model3d

//model3d.shoplazza.com/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb

预览图片

对于给定媒体，默认会生成预览图片，您可以将其用作海报图片。

{% assign media = product.image.src | media_parse %}

{{ media.preview_image }}

{
  "product": {
    "image": {
      "src": "\/\/cdn.shoplazza.com\/2fc412cf6d4aa67eb560b615aea972a21686877786133.png?media_type=model3d&sources=https:\/\/model3d.shoplazza.com\/558f35716f6af953f9bb5d75f6d77e6a1686877787287.glb"
    }
  }
}

//cdn.shoplazza.com/2fc412cf6d4aa67eb560b615aea972a21686877786133.png