Shopify image component

component.image.liquid

{%- comment -%}
  Expected behaviour:
    Renders picture element

  About:
    Render a responsive image

  Accepts:
    - img: {Object} image

  OPTIONAL:
    - width: {Integer} (Default: 1920) The maximum size this image should render in, this can optimise the site speed.
    - eager: {Boolean} (Default: false) In case you would like to disable the lazy loading
    - preload: {Boolean} (Default: true) In case you would like to disable the preloading
    - class: {String} Class to add to the picture element

  Usage:
    {%- render 'component.image',
      img: s.image,
      width: 2560,
      placeholder: true,
      class: 'w-full'
    -%}
{%- endcomment -%}

{%- liquid
  assign width = width | default: 1940 | plus: 1

  assign fallback_widths = '390, 512, 768, 1280, 1440, 1920, 2140, 2560'

  assign img = img | default: fallback_img

  if aspect_ratio
    assign height = width | times: aspect_ratio
  endif

  assign width_string = width | append: 'px'

  assign sizes = '(max-width: [width]) 100vw, [width]' | replace: '[width]', width_string

  capture loading
    if eager == true
      echo 'eager'
    else
      echo 'lazy'
    endif
  endcapture

  echo img | image_url: width: width, height: height | image_tag: loading: loading, preload: preload, class: class, sizes: sizes, alt: img.alt, widths: fallback_widths
-%}