Skip to content

Картинки. ui-image

Данный компонент служит для вывода изображений в основне лежит элемент <picture>. Умеет подстраивать размер изображение под размер контейнера родителя в случае указания параметра image-size. Имеет поддержку ленивой загрузки.

Пример использования

<img is="ui-image"
    lazy
    :image-size="{% include 'system_image_size', target_url: target %}"
    title= "{{ product.title | escape }}"
    alt= "{{ product.title | escape }}"
    ratio="1:1"
    contain
/>

Параметры

Данный компонент поддерживает следущие параметры * dataFieldValueHandle - Атрибут для взаимодействия с элеметном из редактора сайта. * src - Путь до изображения. В случае использования с параметром image-size, станет дефолтным значение для <img> внутри элемента <picture>. * title - Атрибут title для изображения. * alt - Атрибут title для изображения. * ratio - Пропорции картинки. Значение по умолчанию 1:1. * cover - Устанавливает свойство css object-fit: cover для изображения. * contain - Устанавливает свойство css object-fit: contain для изображения. * rounded - Скругляет углы изображения. * lazy - Игнорирование загрузки изображения до его попадания в области видимости экрана. * image-size - Объект с возможными изображениями. Размер изображения подбирается исходя из рамера контейнера. Пример объекта:

{
  60: {
    webp: "/image.webp",
    jpg: "/image.jpg"
  },
  120: {
    webp: "/image.webp",
    jpg: "/image.jpg"
  },
}

Дополнительно

Для анимации появления картинки при ленивой загрузки можно использовать класс .image-container__image.lazy_show в шаблоне.