image_url

Фильтр для указания размера изображения.

Фильтр на вход принимает параметр в виде числа.
Например если указать 200, то изображение уменьшится с сохранением пропорций до 200px по длинной стороне. 200x400 = > 100x200.
Минимальный размер 16px.
Максимальный размер 2048px.

У фильтра есть второй не обязательный параметр - format.
Этот параметр принимает 2 значения - 'jpg' или 'webp'.
Параметр format преобразовывает png => jpg или любой формат в webp, что позволяет оптимизировать изображение.

! Если исходное изображение по размеру меньше указанного в фильтре, изображение будет растянуто до указанно значения.

! Применяется к изображениям товара/статьи/категории.

Liquid
        
          

<img src="{{ product.first_image | image_url: 800 }}">

<img src="{{ article.image | image_url: 320, format: 'jpg' }}">

<img src="{{ collection.image | image_url: 600, format: 'webp' }}">

webp_picture_tag

Фильтр создает из объекта изображения тег picture, в который добавляет изображение в формате .webp, а так же тег img с исходным форматом.

Фильтр принимает обязательное значение (размер изображения) в формате числа.

Через запятую можно указать атрибуты для тега img. Если у изображения товара заполнено имя, оно проставиться в атрибут title автоматически. 

Применяется только к изображениям товара/статьи/категории.

Liquid
        
          

{% assign image_title = product.title | escape %}
{{ product.first_image | webp_picture_tag: 600, class: 'product-image', data-index: 1, alt: image_title, title: image_title }}

На выходе получаем =>

<picture>
  <source srcset="https://static-eu.insales.ru/.../600/600/.../product.png@webp" type="image/webp">
  <img src="https://static-eu.insales.ru/.../600/600..product.png" class="product-image" data-index="1" alt="товар" title="товар">
</picture>

---

{{ collection.image | webp_picture_tag: 600 }}

На выходе получаем =>

<picture>
<source srcset="https://static-eu.insales.ru/.../600/600/.../image_original.jpg@webp" type="image/webp">
<img src="https://static-eu.insales.ru/r/.../600/600/.../image_original.jpg">
</picture>

Новости и статьи
Обновления платформы
Документация по API insales
API для написания интеграций
Разработка приложений
Пошаговая документация
Партнерская программа
Станьте партнером InSales