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:

NameDimensions
pico16x16 px
icon32x32 px
thumb50x50 px
small100x100 px
compact160x160 px
medium240x240 px
large480x480 px
grande600x600 px
original1024x1024 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