Media

Media filters enable you to render media associated with various store resources, such as products and collections.

img_url


    variable |
    img_url

returns string

Returns the CDN URL for an image.

{{ product.image | img_url }}

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

size


    variable |
    img_url:
    string

returns string

The size parameter allows you to specify the dimensions of the image up to a maximum of 5760 x 5760 px. You can specify only the width, only the height, or both, and you can also use the following named sizes:

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

Specify the pixel density of the image. The valid densities are more than 1.

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

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

media_parse


    string |
    media_parse

returns media object

Returns a media object that parses URL query parameters with the media_parse filter.

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

preview image

With the given media, a preview image is generated by default. You can use it as a poster image.

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