Posted: December 15, 2015

Эскизы изображений товаров

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

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

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

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

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

В 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')}
Was this article helpful? Yes No

Комментарии (0)

    Add comment

    To add a comment please sign up or login

    Услуги

    Контакты

    Дорогие друзья!

    К сожалению, Ваш браузер не поддерживает современные технологии используемые на нашем сайте.

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

    Internet Explorer

    от Microsoft

    Chrome

    от Google

    Safari

    от Apple

    Opera

    от Opera Software

    Firefox

    от Mozilla

    Вверх