Контент любой веб страницы содержит изображения, требующие подготовки перед выводом на экран. В первую очередь, это необходимо для ускорения её загрузки на любом устройстве (стационарном или мобильном).
Например, публикация на сайте: включает фото с аннотацией на главной странице или в разделе публикаций плюс изображения в тексте.
Если картинка интерактивная, нужна ссылка на экземпляр с большим размером, например 1980 x 1080, открываемый по клику. Дополнительно в теге img через атрибут srcset задаём вариации для обычного экрана и мобильного. Итого – 3 варианта фотографии с разными параметрами обрезки.
Часто используемые возможности встроенной библиотеки phpThumb:- Уменьшение изображения до заданных размеров. Если пропорции итоговой картинки отличаются от исходной, можно задать положение вырезаемого фрагмента.
- Преобразование формата файла. Применяется, в основном, для уменьшения его размера в плане занимаемого на диске места. При сохранении файла png в jpeg, прозрачность заменяется заданным фоновым цветом. В формате webp прозрачность картинки сохраняется.
- Наложение водяного знака (watermark). Можно накладывать как другую картинку, так и произвольный текст.
- Стилизация изображения – преобразование в чёрно-белую гамму, эффект "сепия", автоконтраст, размытие и т.д.
Сниппеты phpThumbOn и pThumb
Рассмотрим два наиболее популярных дополнения для обработки картинок – 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, в котором можно задать любые опции и увидеть результат работы сниппета. Исходных картинок 3 – горизонтальная, вертикальная и квадратная. Для отладки наложения "водных знаков" есть ссылка на картинку-надпись и файл шрифта.
Перейти в отладчикПеречень основных параметров phpThumb:
Размеры итогового изображения:
w, wp, wl, ws – ширина
или:
h, hp, hl, hs - высота, в пикселях, по порядку, для:
картинок без учёта пропорций, вертикальных (портретных или книжных), горизонтальных (альбомных или пейзажных) и квадратных
Настройки качества и типа изображения
f - расширение обработанного файла (jpg, png, gif или webp),
q - сжатие JPEG(от 1 до 100), больше число - больше размер файла
Оформление изображения
bg - HEX цвет фона, bc - HEX цвет границы
Настройка обрезки картинки
zc - масштабирование с обрезкой,
если 0, то изображение вписывается в заданные размеры, а пустые поля заполняются фоновым цветом,
1 или C - фрагмент нужного размера вырезается из центра,
возможные значения - T, B, L, R - верх, низ, слева, справа; TL, TR - верх-слева и верх-справа, BL, BR - то же, снизу фото;
указание zc, отличного от нуля, отменяет опции 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 - наложение водяного знака (watermark) из картинки или произвольного текста с выбором шрифта - набор параметров есть в отладчике
- flip|x| и flip|y| - отражение по горизонтали или вертикали
- ric - скругление углов, |по оси x, пиксели|по оси y, пиксели|, elip - автоматическое скругление
Рассмотрим несколько параметров обрезки, которые используются не столь часто.
Обрезка картинок с разными пропорциями
Параметры wl – максимальная ширина для горизонтального изображения, hp – максимальная высота для вертикального изображения и hs – максимальная высота для квадратного изображения.
Очень удобно применять, когда размеры исходного изображения неизвестны и нужно обрезать картинку по максимальным размерам для просмотра в фотогалерее. То есть оставляем исходные пропорции фото, но уменьшаем ширину и высоту до величин, достаточных для просмотра на стандартном мониторе, горизонтальный размер которого больше вертикального.
Размеры фото 400 х 267 px
Размеры фото 200 х 300 px
Размеры фото 300 х 300 px
Формирование превью страниц из файла PDF
Что будет, если обработать pdf файл сниппетом phpThumbOn?
Вызов сниппета:{'phpthumbon' | snippet : [
'input' => 'assets/img/testing/acrobat_reference.pdf',
'options' => 'h=400&zc=1'
]}Сниппет возвращает изображение, сформированное из первой страницы документа.
Размеры фото 309 х 400 px
А если нужна не только первая страница?
Задействуем опцию sfn - номер фрагмента в источнике:{'phpthumbon' | snippet : [
'input' => 'assets/img/testing/acrobat_reference.pdf',
'options' => 'h=400&zc=1&sfn=3'
]}
Размеры фото 309 х 400 px
Управление качеством импорта из pdf
Параметр dpi - число точек на дюйм:{'phpthumbon' | snippet : [
'input' => 'assets/img/testing/acrobat_reference.pdf',
'options' => 'h=400&zc=1&sfn=3&dpi=20'
]}Примечание: после обновления до MODX Revolution 2.7.0-pl параметр dpi перестал работать, при разных значениях сниппет возвращает файлы одинакового качества и размера.
В общем, проблема не особенная, можно управлять через ограничение высоты или ширины и сжатие jpeg.
Размеры фото 309 х 400 px
Исходное изображение 600х400px, 68.6kB
Обрезка с параметрами wl=400&hp=300&hs=300
Результат: 300х267px, 45.1kB
