render-image

Structura

La estructuctura del snippet para renderizar imágenes de forma dinámica y con carga diferida/demorada solo está compuesta por un tag HTML, <img>, sin embargo este tag contiene atributos para funcionar correctamente.

Comprende su estructura:

./snippets/render-image.liquid

{% liquid
  if size contains ' '
    assign size_split = size | split: ' '
  else
    assign size_split = '220 300 600 900' | split: ' '
  endif
  if img
    assign default = img | img_url: '30x'
  endif
%}

<img
  class="{{ class }} lazyload blur-up"
  loading="lazy"
  data-sizes="auto"
  src="{{ default | default: img_src }}"
  data-srcset="
  {%- if img -%}
    {%- for img_size in size_split -%}
      {%- assign sizex = img_size | append: 'x' -%}
      {%- assign sizew = img_size | append: 'w' -%}
      {%- assign imge_url = img | img_url: sizex -%}
      {{ imge_url }} {{ sizew }},
    {%- endfor -%}
  {%- else -%}
    {{ img_src }}
  {%- endif -%}"
  alt="{{ alt | default: 'Image to render' }}"
  width="{{ width | default: '100' }}"
  height="{{ height | default: '100' }}"
/>

Propiedad	Descripción
class	Es una propiedad para añadir clases identificadoras para estilar.
loading	Es una propiedad para indicar los diferente tamaños al momento de cargar en DOM.
data-sizes	Es una propiedad para indicar los diferente tamaños al momento de cargar en DOM.
src	Es una propiedad que selecciona la imagen a cargar en el primer renderizado de la página.
data-srcset	Es una propiedad que contiene información de los recursos a mostrar en la etiqueta, el renderizado depende del tamaño de la pantalla.
alt	Es una propiedad que contiene información descriptiva del recurso.
width	Es una propiedad que indica el ancho default en la carga del recurso.
height	Es una propiedad que indica el alto default en la carga del recurso.

Lazysizes JS

Es una librería de JavaScript, que contiene métodos que facilitan el renderizado dinámico de imágenes en el DOM. Para activar la funcionalidad de lazysizes básicamente debes añadir una clase llamada, lazyload. Además, nuestro snippet usa dos atributos de la librería:

data-sizes: Es un atributo que permite el cálculo automático sobre el tamaño del recurso. Está asignado como auto.
data-srcset: El atributo data-sizes=auto tiene tiene sentido cuando el data-srcset contiene información descriptiva del ancho del recurso para cargar la imágen más apropiada.

Accepts:

class: (String) clases para asignar identificar y estilar
img_src: (String) url del recurso a cargar
alt: (String) descripción del recurso
img: (Object) objecto con información precisa de la imagen ó recurso
size: (String) con los tamaños separado con ‘ ’
width: (String) ancho de imagen
height: (String) alto de imágen

Usage:

{% render "render-image"
  class: "class_image",
  img_src: <img_url>,
  img: <img_object>,
  size: "220 300 400 500",
  alt: "Image alt",
  width: "100",
  height: "100"
%}

Archivos:

scss: /src/scss/components/_blogcard.scss
js: /snippets/card-blog.liquid