stefbowerman / cadaver-2.0

11 stars 0 forks source link

Image responsive needs lazy load class if loading prop !== "eager" #32

Closed stefbowerman closed 4 months ago

stefbowerman commented 5 months ago
{%- comment %}

  Image Responsive
  ------------------------------------------------------------------------------

  Usage:

  {% render 'image-responsive',
             image: { image } - optional
             image_mobile: { image } - optional
             loading: { string } - optional - default: 'eager'
  %}

{% endcomment -%}

{% if image != blank %}
  {%- liquid
    if loading == blank
      assign loading = 'eager'
    endif
  %}

  <picture>
    ...

    {% comment %} image-lazy class causes the image to animate in on load {% endcomment %}
    <img
      src="{{ desktop | image_url: width: 1000 }}"
      alt="{{ desktop.alt | escape }}"
      loading="{{ loading }}"
      width="{{ desktop.width }}"
      height="{{ desktop.height }}"
      class="image-responsive {% if loading != 'eager' %}image-lazy lazyload{% endif %}"
      {% if styles != blank %}
        style="{{ styles }}"
      {% endif %}
    >            
  </picture>
{% endif %}
stefbowerman commented 4 months ago

Closed with b837379