Загрузка
Vladyslav
Service
Опубликовано: 22 февраля 2021

При загрузке каждого изображения товара на сервере создаются несколько уменьшенных вариантов (эскизов) этого изображения. Эскизы разного размера удобно использовать в разных разделах витрины: в списках, при просмотре категории, на странице товара.

При загрузке изображений эскизы формируются в соответствии с правилами, заданными в разделе бекенда магазина «Настройки → Изображения». В этом разделе всегда содержится несколько стандартных правил формирования эскизов — они используются для показа эскизов изображений товаров в бекенде магазина. Если этих правил недостаточно для витрины вашего магазина, в дополнение к стандартным правилам можно добавить собственные.

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

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

Правила формирования эскизов

В Shop-Script поддерживается несколько типов правил формирования эскизов из исходных (больших) изображений — все они описаны ниже в этой статье.

Вписывание в квадрат по ширине и высоте [200]

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

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

Макс. (ширина, высота) = 200px

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

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

Ограничение по ширине [200x0]

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

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

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

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

{$wa->shop->productImgHtml($product, '200x0')}    
Внимание: при указании формата изображения с несколькими размерами следует использовать латинскую букву x.

Ограничение по высоте [0x200]

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

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

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

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

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

Квадратная обрезка [96x96]

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

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

Квадратная обрезка: размер = 96px

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

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

Прямоугольная обрезка [100x50]

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

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

Прямоугольная обрезка: ширина = 100px, высота = 50px

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

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

Как получить адрес эскиза

Для того чтобы получить в шаблоне только адрес (URL) эскиза нужного размера вместо готового кода для отображения эскиза, следует аналогичным образом использовать хелпер {$wa->shop->productImgUrl($product, $size)}, как показано в примере:

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

Добавить комментарий

Чтобы добавить комментарий, зарегистрируйтесь или войдите