image.liquid

{% comment %}theme-check-disable ImgLazyLoading, RemoteAsset{% endcomment %}
{% comment %}
  Renders a responsive image tag with all necessary attributes.

  Accepts:
    - image: {object} Image object (optional)
    - class: {string} Extra classes (optional)
    - lazyload: {boolean} Lazyload the image (optional) (default: false)
    - width: {integer} Maximum image width (optional) (default: image.width)
    - alt: {string} Custom image ALT (optional) (default: image.alt)
    - placeholder: {string} Placeholder name when image is empty (optional) (default: 'hero-apparel-1')

  Usage:
    {% render 'image' with product.featured_image %}
{% endcomment %}

{% liquid
  assign class = 'aspect-auto h-auto w-full object-cover rounded-sm ' | append: class
  assign alt = alt | default: image.alt | escape
  assign width = width | default: image.width | default: 800

  assign lazyload = lazyload | default: false

  assign priority = 'auto'
  assign decoding = 'auto'

  if lazyload
    assign loading = 'lazy'
    assign decoding = 'async'
  else
    assign loading = 'eager'
    assign priority = 'high'
  endif
%}

<picture class="{{ class }}">
  {% if image and image != blank %}
    {{
      image
      | image_url: width: width
      | image_tag:
        alt: alt,
        class: class,
        widths: '100,200,300,400,500,600,700,800,1000,1200,1400,1600,1800',
        loading: loading,
        fetchpriority: priority,
        decoding: decoding
    }}
  {% else %}
    {% liquid
      assign placeholder = placeholder | default: 'hero-apparel-1'
      assign placeholder_image = placeholder | placeholder_svg_tag | base64_encode | prepend: 'data:image/svg+xml;base64,'
    %}
    <img
      class="{{ class }}"
      alt="{{ placeholder }}"
      src="{{ placeholder_image }}"
      width="{{ width }}"
      height="{{ width }}"
      loading="{{ loading }}"
      fetchpriority="{{ priority }}"
      decoding="{{ decoding }}"
    >
  {% endif %}
</picture>