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
Updated 10 months ago