phpThumbOf — это аддон для MODx, основанный на популярном скрипте phpThumb. Он позволяет модифицировать изображения средствами различных графических библиотек «на лету».
Я не буду описывать процесс установки аддона из репозитория. Будем считать, что вы уже скачали его и установили.
Причиной написания поста послужил тот факт, что официальная документация по phpThumbOf просто ужасна. Прочитав ман, я подумал, что единственной функцией, которую можно использовать для модификации изображения при его выводе является зум-кроп (zoom-crop), ибо больше там ничего не сказано. Но позже, попробовав использовать некоторые другие опции phpThumb я выяснил, что они прекрасно работают!
Фильтр Вывода MODx-а позволяет прогнать значение элемента через любой набор фильтров непосредственно перед его выводом на страницу. Синтаксис выглядит следующим образом:
Первым и наиболее правильным способом использования phpThumbOf является именно Фильтра Вывода, который добавляется к TV-параметру типа «изображение».
Просто для полноты рассказа, я покажу, как добавить такой tv-параметр к шаблону.
Для начала, создайте новый tv-параметр и назовите его как сочтёте нужным. Мой вариант:
Далее, в закладке «Тип ввода» выберите «Изображение»:
Все, что нам осталось сделать, это указать способ вывода tv-параметра — ставим SRC.
Для экспериментов выберем какую-нибудь интересную картинку. Я нашёл себе такую:
Теперь, когда мы указали в каком-нибудь ресурсе выбранную нами куртинку в качестве значения созданного нами дополнительного параметра, его можно вывести в контенте ресурса с помощью конструкции:
Как я упоминал в начале статьи, выходной фильтр изменяет элемент до того, как он будет отрисован на странице. Передадим значение нашего tv-параметра выходному фильтру phpThumbOf:
В результате, мы получим новое сгенерированное изображение, основанное на той картинке, что мы выбрали для ресурса, но масштабированное до размеров 120х120 пикселей. Но как Вы могли заметить, у изображения появились белые поля, возникшие из-за нарушения пропорций исходного изображения.
Избежать этого можно очень просто, достаточно не указывать ширину или высоту. Давайте оставим только фиксированную ширину:
Теперь результирующее изображение отмасштабировано только по заданной ширине, высота будет пропорциональной исходному соотношению сторон.
Как Вы можете видеть, возможности ресайза изображений безгранично гибки. Вот ещё один пример с шириной 270 пикселей. Кроме того, вы можете получать на выходе изображения больше оригинального, но это порочная практика ;).
Если мы хотим получить изображение с размерами именно 120 на 120 пикселей, мы можем его обрезать. Для этого, необходимо добавить опцию кропа (zoom-crop)
Теперь мы имеем обрезанную версию нашего изображения с точными размерами и без белых полей.
Теперь, когда вы знаете, как управлять размером изображения, я покажу вам реальную силу phpThumb — фильтры. Я просто приведу несколько примеров фильтров, доступных в phpThumb. Обратите внимание, что все новые фильтры я добавляю в конец предыдущих примеров. При этом, их позиция имеет значение! Фильтры применяются слева направо.
Обратите внимание, что у изображения появились белые углы в тех местах, где изображение «скруглилось». Мы можем побороть эту проблему, преобразовав результирующее изображение в PNG-формат.
Периодически возникает необходимость добавить к изображению рамку. Конечно, это можно сделать средствами CSS. Но иногда возникают моменты, когда CSS бесполезен. Я хочу показать Вам один из таких примеров.
Вращение требует небольшого пояснения. Вы должны указать цвет фона для неграфических области в углах. В этом примере мы используем #006699, вращение -45°.
Если Вы хотите уменьшить количество JPG=артефактов, вы можете увеличить качество изображения (1-100):
Если Вы хотите получить прозрачный фон, просто измените вывод в PNG, как мы делали это раньше:
Данный фильтр позволяет накладывать любые шестнадцатеричные цвета на изображение. Первое значение — процент, второе — цвет в шестнадцатеричном формате.
Если Вы хотите получить двухцветное изображение, необходимо сначала наложить фильтр grayscale для обесцвечивания картинки.
С помощью phpThumb Вы можете накладывать на изображение текстовые и графические водяные знаки. В случае с текстовыми вотермарками Вы можете указать размер, положение, прозрачность и TTF-шрифт.
Вообще, доступных очень много. Рекомендую ознакомиться с документацией.
Вот простой водяной знак на основе стандартного шрифта сервера:
Вот, наверно, и все о чем я хотел рассказать. С бОльшим количеством примеров использования phpThumb вы можете ознакомиться на официальной странице проекта.
P.S.Хотел опубликовать в блог «MODx CMS», но как обычно бывает на хабре, не хватило кармы.
P.S.S. Перенес в «MODx CMS»
Я не буду описывать процесс установки аддона из репозитория. Будем считать, что вы уже скачали его и установили.
Причиной написания поста послужил тот факт, что официальная документация по phpThumbOf просто ужасна. Прочитав ман, я подумал, что единственной функцией, которую можно использовать для модификации изображения при его выводе является зум-кроп (zoom-crop), ибо больше там ничего не сказано. Но позже, попробовав использовать некоторые другие опции phpThumb я выяснил, что они прекрасно работают!
Анатомия phpThumbOf — фильтр вывода
Фильтр Вывода MODx-а позволяет прогнать значение элемента через любой набор фильтров непосредственно перед его выводом на страницу. Синтаксис выглядит следующим образом:
[[element:modifier=`value`]]
Первым и наиболее правильным способом использования phpThumbOf является именно Фильтра Вывода, который добавляется к TV-параметру типа «изображение».
Просто для полноты рассказа, я покажу, как добавить такой tv-параметр к шаблону.
Для начала, создайте новый tv-параметр и назовите его как сочтёте нужным. Мой вариант:
Далее, в закладке «Тип ввода» выберите «Изображение»:
Все, что нам осталось сделать, это указать способ вывода tv-параметра — ставим SRC.
Для экспериментов выберем какую-нибудь интересную картинку. Я нашёл себе такую:
Теперь, когда мы указали в каком-нибудь ресурсе выбранную нами куртинку в качестве значения созданного нами дополнительного параметра, его можно вывести в контенте ресурса с помощью конструкции:
<img src="[[*tvImage]]" />
Как я упоминал в начале статьи, выходной фильтр изменяет элемент до того, как он будет отрисован на странице. Передадим значение нашего tv-параметра выходному фильтру phpThumbOf:
[[*tvImage:phpthumbof=`w=120&h=120`]]
Ремарка: если мы выводим tv-параметр в шаблоне или чанке, то знак звездочка "*" нужно заменить на плюс "+": [[+tvImage:phpthumbof=`w=120&h=120`]]
В результате, мы получим новое сгенерированное изображение, основанное на той картинке, что мы выбрали для ресурса, но масштабированное до размеров 120х120 пикселей. Но как Вы могли заметить, у изображения появились белые поля, возникшие из-за нарушения пропорций исходного изображения.
Избежать этого можно очень просто, достаточно не указывать ширину или высоту. Давайте оставим только фиксированную ширину:
[[+tvImage:phpthumbof=`w=120`]]
Теперь результирующее изображение отмасштабировано только по заданной ширине, высота будет пропорциональной исходному соотношению сторон.
Как Вы можете видеть, возможности ресайза изображений безгранично гибки. Вот ещё один пример с шириной 270 пикселей. Кроме того, вы можете получать на выходе изображения больше оригинального, но это порочная практика ;).
[[*tvImage:phpthumbof=`w=270`]]
Обрезка изображения с точными размерами
Если мы хотим получить изображение с размерами именно 120 на 120 пикселей, мы можем его обрезать. Для этого, необходимо добавить опцию кропа (zoom-crop)
&zc=1.[[*tvImage:phpthumbof=`w=120&h=120&zc=1`]]
Теперь мы имеем обрезанную версию нашего изображения с точными размерами и без белых полей.
Фильтры PhpThumb — веселье только начинается
Теперь, когда вы знаете, как управлять размером изображения, я покажу вам реальную силу phpThumb — фильтры. Я просто приведу несколько примеров фильтров, доступных в phpThumb. Обратите внимание, что все новые фильтры я добавляю в конец предыдущих примеров. При этом, их позиция имеет значение! Фильтры применяются слева направо.
Blur (размытие)
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=blur|10`]]
Grayscale (преобразование палитры в градации серого)
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray`]]
Скругление углов
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=ric|20|20`]]
Обратите внимание, что у изображения появились белые углы в тех местах, где изображение «скруглилось». Мы можем побороть эту проблему, преобразовав результирующее изображение в PNG-формат.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=ric|20|20`]]
Рамка
Периодически возникает необходимость добавить к изображению рамку. Конечно, это можно сделать средствами CSS. Но иногда возникают моменты, когда CSS бесполезен. Я хочу показать Вам один из таких примеров.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=bord|5|0|0|FFFFFF&fltr[]=rot|-15|E4F6FE`]]
Вращение изображения
Вращение требует небольшого пояснения. Вы должны указать цвет фона для неграфических области в углах. В этом примере мы используем #006699, вращение -45°.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699`]]
Если Вы хотите уменьшить количество JPG=артефактов, вы можете увеличить качество изображения (1-100):
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699&q=100`]]
Если Вы хотите получить прозрачный фон, просто измените вывод в PNG, как мы делали это раньше:
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|&f=png`]]
Color Overlay (наложение цвета)
Данный фильтр позволяет накладывать любые шестнадцатеричные цвета на изображение. Первое значение — процент, второе — цвет в шестнадцатеричном формате.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=clr|35|990033`]]
Если Вы хотите получить двухцветное изображение, необходимо сначала наложить фильтр grayscale для обесцвечивания картинки.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=clr|35|990033`]]
Простой текстовый водяной знак
С помощью phpThumb Вы можете накладывать на изображение текстовые и графические водяные знаки. В случае с текстовыми вотермарками Вы можете указать размер, положение, прозрачность и TTF-шрифт.
Вообще, доступных очень много. Рекомендую ознакомиться с документацией.
Вот простой водяной знак на основе стандартного шрифта сервера:
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=wmt|Belafonte Code|3|T|FFFFFF||100|20|0||0|`]]
Финиш
Вот, наверно, и все о чем я хотел рассказать. С бОльшим количеством примеров использования phpThumb вы можете ознакомиться на официальной странице проекта.
P.S.
P.S.S. Перенес в «MODx CMS»
