Обрезка изображений в MODX

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

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

Если картинка интерактивная, нужна ссылка на экземпляр с большим размером, например 1980 x 1080, открываемый по клику. Дополнительно в теге img через атрибут srcset задаём вариации для обычного экрана и мобильного (как минимум). Итого – 3 варианта фотографии с разными параметрами обрезки.

Рассмотрим два наиболее популярных дополнения для обработки картинок – phpThumbOn и pThumb.

Первое – обёртка для работы с встроенным обработчиком MODX – phpThumb. Основная функция сниппета – обработка передаваемых параметров обрезки и сжатия и работа с кешем.

Со вторым история посложнее. Это форк, то есть отдельно развиваемая копия, старого компонента phpThumbOf, который также служил в качестве обёртки к встроенному обработчику. В отличие от него, pThumb имеет возможность работы с библиотекой компонента Resizer. В общем, при установке он подтягивает и phpThumbOf, и Resizer.

Установка этих компонентов обычная, из настроек phpThumbOn я установил значение системной настройки phpthumbon.quality 80, а в pThumb включаем Use Resizer (раздел phpthumbof системных настроек).

phpThumbOn устанавливаем из modstore, потому что это компонент отечественный и новейшая версия находится там, pThumb – из modx.com.

Можно включить Use pThumb Cache, тогда базовый путь к сохраняемым фотографиям берётся из параметра pThumb Cache Location и, что бывает удобно, картинки сохраняются по папкам с учётом относительного пути от /assets/. Например, если путь к исходному фото assets/img/seo.jpg, в папке с кешем тоже создается вложенная директория img.

Вызов в синтаксисе Fenom:

{'assets/img/seo.jpg' | phpthumbon : 'w=300&h=200'}

и

{'assets/img/seo.jpg' | pthumb : 'w=300&h=200'}

Параметров обрезки изображений масса, можно изменять размеры, пропорции, обрезку углов, степень сжатия(к сожалению, не всегда устраивает PageSpeed Insights), поворачивать на произвольный угол, накладывать надпись из картинки или текст, применять фильтры.

Синтаксис опций практически одинаковый, оба дополнения обрабатывают параметры перед тем, как запустить графическую библиотеку-обработчик.

Поскольку опций много и разные сниппеты обрабатывают их по-разному, в конце публикации есть отладчик параметров pThumb и phpThumbOn с возможностью тестирования на альбомном, портретном и квадратном изображении, а также образец картинки-надписи для наложения на фото.

Перечень основных параметров phpThumb:

Размеры итогового изображения

w, wp, wl, ws – ширина, в пикселях, по порядку, для: картинок без учёта пропорций, вертикальных (портретных или книжных), горизонтальных (альбомных или пейзажных) и квадратных; h, hp, hl, hs

Настройки качества и типа изображения

f - расширение обработанного файла (jpg, png или gif), q - сжатие JPEG(от 1 до 100), больше число - больше размер файла

Оформление изображения

bg - HEX цвет фона, bc - HEX цвет границы

Настройка обрезки картинки

zc - увеличение с обрезкой, если 0, то изображение вписывается в заданные размеры, а пустые поля заполняются фоновым цветом, 1 или C - фрагмент нужного размера вырезается из центра, возможные значения - T, B, L, R - верх, низ, слева, справа; TL, TR - верх-слева и верх-справа, BL, BR - то же, снизу фото; отменяет опции iar и far

Управление пропорциями

iar - 1 или 0, отключить исходные пропорции картинки (фото будет растянуто до большего размера), отменяет опцию far, которая также имеет два значения 1 и 0 и принудительно включает сохранение пропорций

Кадрирование

sw и sh - ширина и высота кадра, если значение больше 1, то принимается в пикселях, если меньше, то в долях от исходных размеров картинки (напр. 0.5 - 50%); sx и sy - отступ фрагмента от левого и верхнего края изображения соответственно, также в пикселях или десятых долях. Если дополнительно заданы ширина и высота, то итоговая картинка будет уменьшена до этих значений. Например, запись опцийsw=.75&sh=.75&sx=.25&sy=.25&w=150&h=150 задаёт "вырезание" фрагмента размерами 75% от ширины и 75% от высоты из нижнего правого угла с уменьшением максимальных размеров картинки до 150 пикселей

Фильтры-обработчики

Помимо обрезки и сжатия изображения phpThumb позволяет изменить яркость, контрастность, цветность и задать некоторые эффекты. Вызов фильтра: &fltr[]=название|параметр|, параметры приведены в скобках, с возможным диапазоном значений:

  • brit - яркость |от -255 до 255|, cont - контраст |от -255 до 255|, gam - гамма-коррекция |от 0.01 до 10|, sat - насыщенность |минимум -100 - удаление цветности, 0 - не изменяет|, ds - обратный sat,
  • gray - оттенки серого, th - порог |от 0 до 255| - все цвета яркостью меньше порога делает чёрными, больше - белыми, rcd - уменьшение глубины цвета |количество цветов от 2 до 256|сглаживание 0 или 1|, clr - усиление цвета |от 0 до 100 степень усиления|цвет в HEX формате|
  • sep - эффект "сепия", состаренная фотография |от 0 до 100 - величина|цвет, по умолчанию A28065|, usm - контурная резкость |величина от 0 до 255|радиус от 0.0 до 10.0|порог от 0 до 50|
  • размытия – blur - обычное |радиус от 0 до 25|, gblr - по Гауссу, sblr - выборочное
  • smth - сглаживание |значение от -10 до 10|
  • lvl - уровни |канал, значения r, g, b, a или *|метод, значения 0, 1, 2, 3|порог от 0 до 100|, по умолчанию настройки lvl|*|2|0.1| или fltr[]=lvl - даёт автоконтраст
  • wb - баланс белого |цвет, принимаемый за образец или число, задающее величину, по умолчанию, 0.1|
  • hist - накладывает на картинку гистограмму
  • wmi и wmt - наложение водяного знака из картинки или произвольного текста - набор параметров есть в отладчике
  • flip|x| и flip|y| - отражение по горизонтали или вертикали
  • ric - скругление углов, |по оси x, пиксели|по оси y, пиксели|, elip - автоматическое скругление

Рассмотрим несколько параметров обрезки, которые используются не столь часто:

Параметры wl – максимальная ширина для горизонтального изображения, hp – максимальная высота для вертикального изображения и hs – максимальная высота для квадратного изображения.

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

Исходное горизонтальное изображение
Исходное горизонтальное изображение 600 х 400 px
Обрезка с параметрами wl=400&hp=300&hs=300
Обрезка с параметрами wl=400&hp=300&hs=300
Размеры фото 400 х 267 px
Исходное вертикальное изображение
Исходное вертикальное изображение 400 х 600 px
Обрезка с параметрами wl=400&hp=300&hs=300
Обрезка с параметрами wl=400&hp=300&hs=300
Размеры фото 200 х 300 px
Исходное квадратное изображение
Исходное квадратное изображение 600 х 600 px
Обрезка с параметрами wl=400&hp=300&hs=300
Обрезка с параметрами wl=400&hp=300&hs=300
Размеры фото 300 х 300 px
Отладчик параметров обрезки phpThumbOn и pThumb

Строка передается без обработки, поэтому, если не принимает параметры здесь, скорее всего не будет работать на другом сайте. Настройки дополнений приведены выше. Версия php 7.0.
pThumb не поддерживает поворот (параметр ra), не делает множественную надпись из текста, не работает с некоторыми фильтрами.
phpThumbOn не реагирует на положение обрезки (zc=TL, TR, BL, BR и проч.). Дополнено: В новой версии MODX Revolution 2.7.0-pl обновлён встроенный обработчик phpThumb до версии 1.7.15, так что теперь всё работает.
Исходные картинки сжаты в tinypng, поэтому бывает, что обработанная "весит" больше оригинальной.


Исходное изображение 600х400px, 79.1kB

Исходное изображение

Обрезка с параметрами wl=400&hp=300&hs=300
Результат: 300х267px, 45.1kB

Обрезка с параметрами
{"gor":{"width":600,"height":400,"size":79.1},"vert":{"width":400,"height":600,"size":63.3},"squ":{"width":600,"height":600,"size":29.3}}
Привилегия.ру

Метки: modx revolutionинструменты веб разработчика