Как настроить эскизы изображений товаров

Эскизы — это уменьшенные копии изображений, которые создаются автоматически при загрузке фото товаров. Они нужны, чтобы на сайте изображения загружались быстро и выглядели красиво в разных разделах: в списках товаров, при просмотре категории, на карточке товара.

Настройка эскизов

Эскизы формируются по правилам, которые задаются в панели управления магазином: Настройки → Изображения.

В этом разделе уже есть готовые правила для отображения картинок в панели управления. Если нужно использовать другие размеры на витрине (например, для слайдера или баннера), добавьте собственные правила.

При добавлении новых правил на сервере будут создаваться дополнительные уменьшенные копии указанных размеров при загрузке каждого изображения.

Создание эскизов «на лету»

Можно не добавлять новые правила, а включить автоматическое создание эскизов нужного размера при первом открытии страницы. Для этого активируйте параметр «Разрешить создание эскизов произвольных размеров по требованию».

В этом случае эскиз нужного размера, если его ещё нет на сервере, будет создан автоматически при открытии страницы. После этого он сохранится на сервере и будет использоваться в дальнейшем без повторного создания.

Типы правил формирования эскизов

В Shop-Script доступны несколько способов обработки изображений.

Вписывание в квадрат

Изображение уменьшается с сохранением пропорций так, чтобы ни ширина, ни высота не превышали указанное значение.

Пример настройки:

• Макс. ширина/высота = 200px

Код для шаблона:

{$wa->shop->productImgHtml($product, '200')}

Ограничение по ширине

Изображение уменьшается с сохранением пропорций так, чтобы ширина не превышала указанное значение. Высота вычисляется автоматически.

Пример настройки:

• Ширина = 200px, высота = авто

Код для шаблона:

{$wa->shop->productImgHtml($product, '200x0')}

При указании нескольких размеров используйте латинскую букву x.

Ограничение по высоте

Изображение уменьшается с сохранением пропорций так, чтобы высота не превышала указанное значение. Ширина вычисляется автоматически.

Пример настройки:

• Ширина = авто, высота = 200px

Код для шаблона:

{$wa->shop->productImgHtml($product, '0x200')}

Квадратная обрезка

Из середины изображения вырезается квадрат максимальной площади и уменьшается до нужного размера. Если изображение уже квадратное, оно просто уменьшается.

Пример настройки:

• Размер = 96px

Код для шаблона:

{$wa->shop->productImgHtml($product, '96x96')}

Прямоугольная обрезка

Из середины изображения вырезается прямоугольник максимальной площади с заданным соотношением сторон. Затем он уменьшается до указанных размеров с сохранением пропорций.

Пример настройки:

• Ширина = 100px, высота = 50px

Код для шаблона:

{$wa->shop->productImgHtml($product, '100x50')}

Получение URL эскиза

Чтобы получить только адрес (URL) эскиза нужного размера, используйте команду:

{$wa->shop->productImgUrl($product, '750x0')}