Skip to main

Responsive Images

src/filters/images.js


responsive images

imgSuffix()

Add img suffix for responsiveness

Params:

  • imgSrc {string}
  • suffix {string | number}

Example:

<img srcset="{{ src | imgSuffix('320') }} 320w" />

imgSize()

Resize image height/width attributes to match output

Params:

  • width {number}
  • height {number}

Example:

{% set size = img.width | imgSize(img.height) %}
<img src="..." width="{{ size.width }}" height="{{ size.height }}" />

See Also: