При загрузке каждого изображения товара на сервере создаются несколько уменьшенных вариантов (эскизов) этого изображения. Эскизы разного размера удобно использовать в разных разделах витрины: в списках, при просмотре категории, на странице товара.
При загрузке изображений эскизы формируются в соответствии с правилами, заданными в разделе бекенда магазина «Настройки → Изображения». В этом разделе всегда содержится несколько стандартных правил формирования эскизов — они используются для показа эскизов изображений товаров в бекенде магазина. Если этих правил недостаточно для витрины вашего магазина, в дополнение к стандартным правилам можно добавить собственные.
Добавление новых правил приведет к тому, что при загрузке изображений на сервере будут создаваться дополнительные эскизы с указанными размерами.
Вместо задания новых правил вы можете включить формирование эскизов дополнительных размеров «на лету». Для этого включите параметр «Разрешить создание эскизов произвольных размеров по требованию». В этом случае эскиз нужного размера, если он отсутствует на сервере, будет автоматически сформирован только при открытии страницы, на которой он отображается. Сформированный «на лету» эскиз сохранится на сервере и будет использоваться в дальнейшей работе интернет-магазина.
Правила формирования эскизов
В 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')}