.dev
Partner Dashboard

Image Url ​

Last updated View as Markdown

You get the URL of an image, resized to the size you give.

liquid
{{ image | image_url: width: number, height: number, crop: string }}

You can pass an image URL, an image object from an image_picker setting, or a product or collection preview image.

Options ​

OptionTypeDescription
widthnumberThe width of the image in pixels. Max 5760.
heightnumberThe height of the image in pixels. Max 5760.
cropstringThe part of the image that is kept when both width and height are set. One of center, top, bottom, left, right.

Without crop, the image is resized to fit inside width and height, and the aspect ratio is kept. An image is never made larger than its original size. Other options are ignored.

When you give no option, you get the URL of the original image.

Example ​

liquid
{{ section.settings.image | image_url: width: 600 }}
{{ section.settings.image | image_url: width: 400, height: 400, crop: 'center' }}

Output

html
https://cdn.youcan.shop/stores/acme/hat.png?width=600
https://cdn.youcan.shop/stores/acme/hat.png?width=400&height=400&crop=center