Контент любой веб страницы содержит изображения, требующие подготовки перед выводом на экран. В первую очередь, это необходимо для ускорения её загрузки на любом устройстве (стационарном или мобильном).
Например, публикация на сайте: включает фото с аннотацией на главной странице или в разделе публикаций плюс изображения в тексте.
Если картинка интерактивная, нужна ссылка на экземпляр с большим размером, например 1980 x 1080, открываемый по клику. Дополнительно в теге img через атрибут srcset задаём вариации для обычного экрана и мобильного. Итого – 3 варианта фотографии с разными параметрами обрезки.
Сниппеты 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:
Параметров обрезки изображений масса, можно изменять размеры, пропорции, обрезку углов, степень сжатия(к сожалению, не всегда устраивает PageSpeed Insights), поворачивать на произвольный угол, накладывать надпись из картинки или текст, применять фильтры.
Синтаксис опций практически одинаковый, оба дополнения обрабатывают параметры перед тем, как запустить графическую библиотеку-обработчик.
Поскольку опций много и разные сниппеты обрабатывают их по-разному, в конце публикации есть отладчик параметров pThumb и phpThumbOn, в котором можно задать любые опции и увидеть результат работы сниппета. Исходных картинок 3 – горизонтальная, вертикальная и квадратная. Для отладки наложения «водных знаков» есть ссылка на картинку-надпись и файл шрифта.
Перечень основных параметров phpThumb:
Размеры итогового изображения:
Настройки качества и типа изображения
Оформление изображения
Настройка обрезки картинки
Управление пропорциями
Кадрирование
Фильтры-обработчики
Рассмотрим несколько параметров обрезки, которые используются не столь часто.
Обрезка картинок с разными пропорциями
Параметры wl – максимальная ширина для горизонтального изображения, hp – максимальная высота для вертикального изображения и hs – максимальная высота для квадратного изображения.
Очень удобно применять, когда размеры исходного изображения неизвестны и нужно обрезать картинку по максимальным размерам для просмотра в фотогалерее. То есть оставляем исходные пропорции фото, но уменьшаем ширину и высоту до величин, достаточных для просмотра на стандартном мониторе, горизонтальный размер которого больше вертикального.
Формирование превью страниц из файла PDF
Что будет, если обработать pdf файл сниппетом phpThumbOn?
Сниппет возвращает изображение, сформированное из первой страницы документа.
А если нужна не только первая страница?
Управление качеством импорта из pdf
Примечание: после обновления до MODX Revolution 2.7.0-pl параметр dpi перестал работать, при разных значениях сниппет возвращает файлы одинакового качества и размера. В общем, проблема не особенная, можно управлять через ограничение высоты или ширины и сжатие jpeg.
Исходное изображение 600х400px, 68.6kB
Обрезка с параметрами wl=400&hp=300&hs=300 Результат: 300х267px, 45.1kB
phpThumbOn это улучшеный аналог компонента phpThumbOf, созданный для автоматического ресайза изображений под нужный размер. Для ресайза он использует популярную библиотеку phpThumb, у которой значительно больше возможностей, чем описано в документациях к компоненту. Возможности библиотеки phpThumb.
Документация сниппета phpThumbOn
Файл можно выводить вызывая как сниппет:
или использовать, как модификатор:
Какие параметры можно использовать и что они обозначают — смотрите в статье посвященной phpThumb.
Параметр
Описание
Значение
input
Путь к картинке которую нужно обработать
Возможные значения Строка
Значение по умолчанию (пусто)
Примечание Благодаря этому параметру сниппет может работать как модификатор
Возможные значения Произвольная строка с параметрами отделенными друг от друга символом & (амперсанд), а значение параметра определяется после символа = (равенство)
Значение по умолчанию q=96&src=components/phpthumbon/noimage.jpg
Примечание Значения по умолчанию q и src можно переопределить в системных настройках при помощи параметров phpthumbon.noimage и phpthumbon.quality
Системные настройки
Параметр
Описание
Значение
phpthumbon.images_dir
Папка, которая будет вырезаться из пути в кеш-директории
Возможные значения Имя папки
Значение по умолчанию images
Примечание Относительно директории assets
Возможные значения Целое число больше 0
Значение по умолчанию 96
Примечание Если не задано качество картинки в параметрах при вызове сниппета, то будет использоваться это значение
Возможные значения Имя папки
Значение по умолчанию cache_image
Примечание Относительно папки assets
phpthumbon.ext
Если на сжатие приходит картинка в неизвестном формате, то будет использоваться этот тип
Возможные значения Расширение имени файла
Значение по умолчанию jpeg
Примечание Если на сжатие приходит картинка в неизвестном формате, то будет использоваться этот тип
phpthumbon.noimage
Путь к картинки с изображением «картинка не существует»
Возможные значения Путь к файлу
Значение по умолчанию components/phpthumbon/noimage.jpg
Примечание Если картинка указанная в input окажется не доступной или вообще этот параметр пуст, то на обработку поступит картинка указанная в этом параметре
Возможные значения 0, 1, 2
Значение по умолчанию 0
Примечание 0 — не использовать очереди; 1 — использовать очередь и не сжимать noimage; 2 — использовать очередь и сжимать noimage под нужный размер
phpthumbon.queue_classpath
Путь к файлу с классом QueueThumb
Возможные значения 0, 1, 2
Значение по умолчанию /components/phpthumbon/queue/QueueThumb.class.php
phpthumbon.error_mode
Правила обработки ошибочных картинок
Возможные значения 1, 2
Значение по умолчанию 1
Примечание 1 (по умолчанию) — сжатие noimage с заданными параметрами; 2 — вывод оригинальной картинки без обработки
phpthumbon.noimage_cache
Папка с закешированными noimage файлами
Возможные значения полный путь к любой папке
Значение по умолчанию components/phpthumbon/cache/
Примечание Путь к папке в которой уже хранятся noimage нужных размеров
phpthumbon.total_queue
Число обрабатываемых заданий из очереди за 1 раз
Возможные значения от 1 до 10
Значение по умолчанию 1
Примечание Не более 10. В случае отсутствия значения у этого параметра устанавливается значение по умолчанию — 1
phpthumbon.make_cachename
Сниппет который может подменить дефолтные правила формирования кеш имен картинок
Возможные значения Любое имя существующего сниппета в системе
Значение по умолчанию (пусто)
Примечание Сниппет должен вернуть сериализованный массив со следующими ключами:
phpThumb() использует библиотеку GD для создания миниатюр из изображений (JPEG, PNG, GIF, BMP и т. д.) на лету. Размер вывода настраивается (может быть больше или меньше, чем источник), источником может быть все изображение или только часть исходного изображения.
src — имя файла исходного изображения.
new — создать новую картинку, не миниатюру из существующего изображения. Требует набор параметров «w» и «h». Пример: &new=FF0000|75 — красный background, 75% opacity. Для фона устанавливаются цвета в формате hex. Параметр Opacity опциональный, по умолчанию 100%.
w — максимальная ширина выходной миниатюры в пикселях.
h — максимальная высота выходной миниатюры в пикселях.
wp — максимальная ширина для портретных изображений.
hp — максимальная высота для портретных изображений.
wl — максимальная ширина для пейзажных изображений.
hl — максимальная высота для пейзажных изображений.
ws — максимальная ширина для квадратных изображений.
hs — максимальная высота для квадратных изображений.
f — формат изображения после обработки («webp», «jpeg», «png», or «gif»).
«gam» (Gamma Correction | Гамма-корекция) [ex: &fltr[]=gam| ] где может быть числом от 0.01 до 10 (default 1.0) Должен быть больше 0 (0 не дает эффекта). Тут нет максимума, но числа выше 10 достаточно бесполезны. Отрицательные числа тоже делают кое-что, возможно не совсем желаемый эффект, но тем не менее интересный.
«ds» (DeSaturate | Обесцвечивание) [ex: &fltr[]=ds| ] псевдоним для «sat» кроме значений инвертированных (положительные значения удаляют цвет, отрицательные значения повышают насыщенность)
«gray» (Grayscale | Оттенки серого) [ex: &fltr[]=gray] убирает все цвета с изображения, отображая его состоящим из оттенков серого.
«th» (Threshold | Уровни) [ex: &fltr[]=th| ] делать изображение черно-белым, затем делает все пиксели ярче, чем (в промежутке от 0 до 255) для белого, и все пиксели темнее чем для черного.
«rcd» (Reduce Color Depth | Уменьшить глубину цвета) [ex: &fltr[]=rcd| | ] где это количество цветов (2-256) которое вы хотите получить в итоговом изображении, и это «1» для размытия (deault) or «0» для отсутствия размытия.
«clr» (Colorize | Наложение цвета) [ex: &fltr[]=clr| | ] где числа между 0 и 100 процент раскрашивания, а цвет в шестнадцатеричном формате (hex) в который надо раскрасить.
«sep» (Sepia | Сепия ) [ex: &fltr[]=sep| | ] where число между 0 и 100 означающее силу окраски (default=50), и это цвет в формате hexв который надо окрасить (по умолчанию: A28065). Примечание: это происходит по-разному, когда применяется ImageMagick, в этом случае 80 по умолчанию, и более низкие значения дают более яркие / желтые изображения, а более высокие значения дают более темные / более голубые изображения.
может быть одним из ‘r’, ‘g’, ‘b’, ‘a’ (цветовая схема Red, Green, Blue, Alpha), или ‘*’ для всех RGB каналов (по умолчанию) на основе среднего оттенка серого. ImageMagick методы могут поддерживать несколько каналов (eg «lvl|rg|3») но внутренние методы не могут (они будут использовать первый символ строки в качестве канала)
может быть одним из: 0 = Internal RGB; 1 = Internal Grayscale; 2 = ImageMagick Contrast-Stretch (default) 3 = ImageMagick Normalize (may appear over-saturated)
сколько ярких / темных пикселей будет вырезано в процентах (по умолчанию — 0.1%). Использование параметров по умолчанию (&fltr[]=lvl) похож на Автоконтраст в Adobe Photoshop.
— цветная(ые) полоса(ы) для отображения с зада на перед (один или несколько из «rgba *» для Red Green Blue Alpha и Grayscale соответственно);
— разделенный точками с запятой список hex цветов, используемых для каждой полосы графика (по умолчанию FF0000, 00FF00, 0000FF, 999999, FFFFFF соответственно);
и — край(я) в пикселях (или процент, если 0 | ] где:
— имя файла изображения;
— это «0» (по умолчанию) для наложения изображения поверх эскиза или «1» для наложения эскиза поверх изображения;
«wmi» (WaterMarkImage | Водяной знак из изображения) [ex: &fltr[]=wmi| || | | | ] где:
— имя файла изображения для наложения;
— непрозрачность от 0 (прозрачный) до 100 (непрозрачный) (требуется PHP v4.3.2, в противном случае — 100% непрозрачный);
и — граничное (и промежуточное) поле в пикселях (или процентах, если 0 и представляет максимальную ширину и высоту, на которую изображение водяного знака будет масштабировано, чтобы поместиться внутрь;
— угол поворота наложенного водяного знака.
«wmt» (WaterMarkText | Водяной знак из текста) [ex: &fltr[]=wmt| ||| | | | | || | ] где:
— текст для использования в качестве водяного знака; URLencoded Unicode HTMLentities должен использоваться для символов, кроме chr (127). Например, символ «восьмая нота» (U + 266A) представлен как «♪», а затем кодируется в формате «%26%239834%3B». Любой экземпляр метасимволов будет заменен их вычисленным значением. В настоящее время поддерживается:
^ Fb — размер файла исходного изображения в байтах.
^ Fk — размер файла исходного изображения в килобайтах.
^ Fm — размер файла исходного изображения в мегабайтах.
^ X — ширина исходного изображения в пикселях.
^ Y — высота исходного изображения в пикселях.
^ x — ширина эскиза в пикселях.
^ y — высота миниатюры в пикселях.
— это размер шрифта (1-5 для встроенного шрифта или размер точки для шрифтов TrueType);
— цвет текста в формате hex;
— имя файла TTF-файла (необязательно, если не указан, будет использован встроенный шрифт);
— непрозрачность от 0 (прозрачная) до 100 (непрозрачная) (требуется PHP v4.3.2, в противном случае — 100% непрозрачная);
— это край (и интервал) в процентах;
— цвет фона в формате hex;
— это направление(я), в котором фон расширяется («x» или «y» (или оба, но оба они затеняют все изображение)). Примечание: работает только со шрифтами TTF, а не со встроенными.
«flip» [ex: &fltr[]=flip|x or &fltr[]=flip|y] отражение изображения по оси X или Y.
«ric» [ex: &fltr[]=ric| | ] скругление углов изображения (to transparent for PNG output), где горизонтальный радиус криой, а вертикальный.
«elip» [ex: &fltr[]=elip] похоже на скругление углов но более глубокий.
«mask» [ex: &fltr[]=mask|filename.png|] Значения маски в оттенках серого применяются в качестве альфа-канала к основному изображению. Белый непрозрачный, черный прозрачный, если параметр (инвертировать) не установлен в 1, в этом случае черный непрозрачный и белый прозрачный.
— непрозрачность (0 = прозрачный, 100 = непрозрачный, по умолчанию = 100) (еще не реализовано).
— горизонтальное измерение в пикселях,
— вертикальное измерение в пикселях,
— цвет в формате hex для целевого цвета, который нужно сделать прозрачным;
— минимальное пороговое значение в процентах (все пиксели в пределах % целевого цвета будут прозрачными на 100%, по умолчанию = 5);
— максимальный порог в процентах (все пиксели, превышающие % от целевого цвета, будут непрозрачными на 100%, по умолчанию = 10); пиксели между двумя порогами будут частично прозрачными.
md5s — MD5 хэш исходного изображения — если этот параметр передается вместе с хешем исходного изображения, то исходное изображение не проверяется на наличие или изменение, и используется кэшированный файл (если имеется). Если ‘md5s’ передается как пустая строка, phpThumb.php прекращает работу и выдает правильное MD5 хеш-значение. Этот параметр является однофайловым эквивалентом параметров конфигурации ‘cache_source_filemtime_ignore_ *’.
xto — использовать только миниатюры EXIF: извлекать EXIF миниатюры, и не делать какой-либо дополнительной обработки.
ra — Поворот на угол (Rotate by Angle): угол поворота в градусах
положительный — против часовой стрелки;
отрицательный — по часовой стрелке.
ar — авто поворот (Auto Rotate): установка «x» использует EXIF ориентацию сохранённую камерой. Можно также установить «l» или «L» для пейзажа, или «p» или «P» для портрета. «l» и «P» поворачивают изображение по часовой стрелке, «L» и «p» поворачивают изображение против часовой стрелки.
sfn — номер кадра источника (Source Frame Number): используйте этот номер кадра / страницы для многокадровых / многостраничных исходных изображений (GIF, TIFF и т. д.).
iar — (Ignore Aspect Ratio) — отключить пропорциональное изменение размера и растянуть изображение, чтобы соответствовать «h» & «w» (оба параметра должны быть установлены). (1=on, 0=off) (overrides «far»)
far — принудительное соотношение сторон (Force Aspect Ratio) — изображение будет создано в размере, указанном в «w» и «h» (оба из которых должны быть установлены). Выравнивание: L = слева, R = справа, T = сверху, B = снизу, C = по центру BL, BR, TL, TR используйте соответствующее направление, если изображение является альбомным или портретным.
dpi — точек на дюйм (Dots Per Inch): настройка DPI при импорте из векторного формата изображения, такого как PDF, WMF и т. д.
sia — сохранить как (Save Image As): имя файла задающееся по умолчанию для сохранения сгенерированного изображения. Укажите базовое имя файла, а расширение (например: «.png») будет добавлено автоматически.
maxb — (MAXimum Byte size) — качество итогового изображения автоматически устанавливается так, чтобы миниатюра помещалась в байты «maxb» (качество сжатия настраивается для JPEG, глубина в битах настраивается для PNG и GIF).
down — имя файла для сохранения изображения. Если этот параметр установлен, браузер предложит сохранить это имя файла, прежде чем отобразить изображение.
file — если установлено, миниатюра будет отображаться в это имя файла, а не выводиться и не кэшироваться. (Устаревшее. По умолчанию отключено начиная с v1.6.0, недоступно в v1.7.5 и более поздних версиях. Вместо этого вы должны создать свой собственный объект).
goto — URL-адрес для перенаправления после рендеринга изображения в файл * Должен начинаться с «http: //» * Требуется набор параметров файла (устарело. Отключено по умолчанию начиная с версии 1.6.0, недоступно в версии 1.7.5 и более поздних. Вместо этого следует создать собственный объект).
err — пользовательское имя файла с изображением ошибки вместо того, чтобы показывать сообщения об ошибках (устарело. Отключено по умолчанию начиная с версии 1.6.0, недоступно в версии 1.7.5 и более поздних. Вместо этого следует создать экземпляр собственного объекта).
Оптимизированный сниппет phpThumbOf под MODX Revolution. Схожий синтаксис, но более быстрая работа. Более подробно смотрите в changelog
Сниппет phpthumbon
Данный сниппет можно использовать, как модификатор, например: [[*image:phpthumbon=`w=200&h=200&zc=1`]]
Параметр
Описание
Значение
input
Путь к картинке которую нужно обработать
Возможные значения Строка
Значение по умолчанию (пусто)
Примечание Благодаря этому параметру сниппет может работать как модификатор
options
Параметры для класса phpThumb
Возможные значения Произвольная строка с параметрами отделенными друг от друга символом & (амперсанд), а значение параметра определяется после символа = (равенство)
Значение по умолчанию q=96&src=components/phpthumbon/noimage.jpg
Примечание Значения по умолчанию q и src можно переопределить в системных настройках при помощи параметров phpthumbon.noimage и phpthumbon.quality
Системные настройки
Параметр
Описание
Значение
phpthumbon.images_dir
Папка, которая будет вырезаться из пути в кеш-директории
Возможные значения Имя папки
Значение по умолчанию images
Примечание Относительно директории assets
phpthumbon.quality
Качество картинки по умолчанию
Возможные значения Целое число больше 0
Значение по умолчанию 96
Примечание Если не задано качество картинки в параметрах при вызове сниппета, то будет использоваться это значение
phpthumbon.cache_dir
Имя папки с кешем
Возможные значения Имя папки
Значение по умолчанию cache_image
Примечание Относительно папки assets
phpthumbon.ext
Если на сжатие приходит картинка в неизвестном формате, то будет использоваться этот тип
Возможные значения Расширение имени файла
Значение по умолчанию jpeg
Примечание Если на сжатие приходит картинка в неизвестном формате, то будет использоваться этот тип
phpthumbon.noimage
Путь к картинки с изображением «картинка не существует»
Возможные значения Путь к файлу
Значение по умолчанию components/phpthumbon/noimage.jpg
Примечание Если картинка указанная в input окажется не доступной или вообще этот параметр пуст, то на обработку поступит картинка указанная в этом параметре
phpthumbon.queue
Активация поддержки очередей
Возможные значения 0, 1, 2
Значение по умолчанию 0
Примечание 0 — не использовать очереди; 1 — использовать очередь и не сжимать noimage; 2 — использовать очередь и сжимать noimage под нужный размер
phpthumbon.queue_classpath
Путь к файлу с классом QueueThumb
Возможные значения 0, 1, 2
Значение по умолчанию /components/phpthumbon/queue/QueueThumb.class.php
phpthumbon.error_mode
Правила обработки ошибочных картинок
Возможные значения 1, 2
Значение по умолчанию 1
Примечание 1 (по умолчанию) — сжатие noimage с заданными параметрами; 2 — вывод оригинальной картинки без обработки
phpthumbon.noimage_cache
Папка с закешированными noimage файлами
Возможные значения полный путь к любой папке
Значение по умолчанию components/phpthumbon/cache/
Примечание Путь к папке в которой уже хранятся noimage нужных размеров
phpthumbon.total_queue
Число обрабатываемых заданий из очереди за 1 раз
Возможные значения от 1 до 10
Значение по умолчанию 1
Примечание Не более 10. В случае отсутствия значения у этого параметра устанавливается значение по умолчанию — 1
phpthumbon.make_cachename
Сниппет который может подменить дефолтные правила формирования кеш имен картинок
Возможные значения Любое имя существующего сниппета в системе
