Всплывающие изображения товара без белых полос

По умолчанию OpenCart при ресайзе всегда создаёт холст заданного в настройках шаблона размера и «вписывает» в него картинку. Если исходник не квадратный – по краям появляются белые полосы.

На белом фоне (каталог, карточка товара, миниатюры) это не критично. Но всплывающее изображение в карточке товара открывается в лайтбоксе на тёмном фоне и если это изображение с фоном, то белые полосы сразу бросаются в глаза.

Как работает модификатор

Модификатор берёт за основу размеры всплывающего изображения из настроек шаблона (в демо-шаблоне – 800×800) и вместо «вписывания в квадрат»:

• масштабирует картинку по большей стороне до целевого размера;
• вторую сторону пересчитывает пропорционально исходным размерам;
• создаёт холст точно по размеру картинки – без белых полей.

Ничего не обрезается: изображение сохраняется целиком.

Пример
В настройках размер всплывающего изображения товара (Ш x В): 800×800.
Загружаем картинку: 1920×1080.



Для того чтобы кэш не пересекался с обычными ресайзами модификатор добавляет к имени файла суффикс -fit.

Ограничение апскейла

Отдельная проблема – маленькие исходники. Без модификатора загруженная картинка 300×300 при настройке попапа 800×800 будет растянута до 800×800: размыто, с артефактами и «мылом».

Модификатор ограничивает апскейл: если для вписывания в целевой размер картинку нужно увеличить более чем на 20% (×1.2), она не увеличивается, а показывается в исходном размере.



Никакого принудительного апскейла и повторного сжатия – маленькие картинки просто не обрабатываются.

Работа модификатора протестирована на демо-шаблоне ЛайвСтор 3.0.4.5.

Установка
Откройте раздел «Расширения → Установка расширений».
Загрузите архив
Перейдите в раздел «Расширения → Модификаторы».
Обновите модификаторы.

Написать

Ваше Имя:


Ваш отзыв: Внимание: HTML не поддерживается! Используйте обычный текст.

Оценка: Плохо           Хорошо

Введите код, указанный на картинке:

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