phpThumbOf — это аддон для MODx, основанный на популярном скрипте phpThumb. Он позволяет модифицировать изображения средствами различных графических библиотек «на лету».
Я не буду описывать процесс установки аддона из репозитория. Будем считать, что вы уже скачали его и установили.
Причиной написания поста послужил тот факт, что официальная документация по phpThumbOf просто ужасна. Прочитав ман, я подумал, что единственной функцией, которую можно использовать для модификации изображения при его выводе является зум-кроп (zoom-crop), ибо больше там ничего не сказано. Но позже, попробовав использовать некоторые другие опции phpThumb я выяснил, что они прекрасно работают!
Фильтр Вывода MODx-а позволяет прогнать значение элемента через любой набор фильтров непосредственно перед его выводом на страницу. Синтаксис выглядит следующим образом:
Первым и наиболее правильным способом использования phpThumbOf является именно Фильтра Вывода, который добавляется к TV-параметру типа «изображение».
Просто для полноты рассказа, я покажу, как добавить такой tv-параметр к шаблону.
Для начала, создайте новый tv-параметр и назовите его как сочтёте нужным. Мой вариант:
![01-tv-creation-e1311459747180](http://primebit.ru/wp-content/uploads/2011/10/01-tv-creation-e1311459747180.png)
Далее, в закладке «Тип ввода» выберите «Изображение»:
![02-tv-image-type-e1311460888561](http://primebit.ru/wp-content/uploads/2011/10/02-tv-image-type-e1311460888561.png)
Все, что нам осталось сделать, это указать способ вывода tv-параметра — ставим SRC.
Для экспериментов выберем какую-нибудь интересную картинку. Я нашёл себе такую:
![hot-air-balloons1-e1311471772311](http://primebit.ru/wp-content/uploads/2011/10/hot-air-balloons1-e1311471772311.jpg)
Теперь, когда мы указали в каком-нибудь ресурсе выбранную нами куртинку в качестве значения созданного нами дополнительного параметра, его можно вывести в контенте ресурса с помощью конструкции:
Как я упоминал в начале статьи, выходной фильтр изменяет элемент до того, как он будет отрисован на странице. Передадим значение нашего tv-параметра выходному фильтру phpThumbOf:
В результате, мы получим новое сгенерированное изображение, основанное на той картинке, что мы выбрали для ресурса, но масштабированное до размеров 120х120 пикселей. Но как Вы могли заметить, у изображения появились белые поля, возникшие из-за нарушения пропорций исходного изображения.
![03-balloons-120px-e1311463866227](http://primebit.ru/wp-content/uploads/2011/10/03-balloons-120px-e1311463866227.png)
Избежать этого можно очень просто, достаточно не указывать ширину или высоту. Давайте оставим только фиксированную ширину:
Теперь результирующее изображение отмасштабировано только по заданной ширине, высота будет пропорциональной исходному соотношению сторон.
![05-balloons-width-only-e1311485798599](http://primebit.ru/wp-content/uploads/2011/10/05-balloons-width-only-e1311485798599.png)
Как Вы можете видеть, возможности ресайза изображений безгранично гибки. Вот ещё один пример с шириной 270 пикселей. Кроме того, вы можете получать на выходе изображения больше оригинального, но это порочная практика ;).
![04a-balloons-270px-e1311490516506](http://primebit.ru/wp-content/uploads/2011/10/04a-balloons-270px-e1311490516506.png)
Если мы хотим получить изображение с размерами именно 120 на 120 пикселей, мы можем его обрезать. Для этого, необходимо добавить опцию кропа (zoom-crop)
Теперь мы имеем обрезанную версию нашего изображения с точными размерами и без белых полей.
![04-balloons-120px-cropped-e1311465932732](http://primebit.ru/wp-content/uploads/2011/10/04-balloons-120px-cropped-e1311465932732.png)
Теперь, когда вы знаете, как управлять размером изображения, я покажу вам реальную силу phpThumb — фильтры. Я просто приведу несколько примеров фильтров, доступных в phpThumb. Обратите внимание, что все новые фильтры я добавляю в конец предыдущих примеров. При этом, их позиция имеет значение! Фильтры применяются слева направо.
![06-balloons-blur10-e1311487594392](http://primebit.ru/wp-content/uploads/2011/10/06-balloons-blur10-e1311487594392.png)
![07-balloons-grayscale-e1311487995750](http://primebit.ru/wp-content/uploads/2011/10/07-balloons-grayscale-e1311487995750.png)
![08-balloons-rounded-e1311488375137](http://primebit.ru/wp-content/uploads/2011/10/08-balloons-rounded-e1311488375137.png)
Обратите внимание, что у изображения появились белые углы в тех местах, где изображение «скруглилось». Мы можем побороть эту проблему, преобразовав результирующее изображение в PNG-формат.
![09-balloons-rounded-png-e1311488679910](http://primebit.ru/wp-content/uploads/2011/10/09-balloons-rounded-png-e1311488679910.png)
Периодически возникает необходимость добавить к изображению рамку. Конечно, это можно сделать средствами CSS. Но иногда возникают моменты, когда CSS бесполезен. Я хочу показать Вам один из таких примеров.
![16-balloons-rotate+border-e1311532537823](http://primebit.ru/wp-content/uploads/2011/10/16-balloons-rotate+border-e1311532537823.png)
Вращение требует небольшого пояснения. Вы должны указать цвет фона для неграфических области в углах. В этом примере мы используем #006699, вращение -45°.
![10-balloons-rotate45-e1311489222797](http://primebit.ru/wp-content/uploads/2011/10/10-balloons-rotate45-e1311489222797.png)
Если Вы хотите уменьшить количество JPG=артефактов, вы можете увеличить качество изображения (1-100):
![11-balloons-rotate45-jpg100-e1311489466801](http://primebit.ru/wp-content/uploads/2011/10/11-balloons-rotate45-jpg100-e1311489466801.png)
Если Вы хотите получить прозрачный фон, просто измените вывод в PNG, как мы делали это раньше:
![12-balloons-rotate45-png-e1311489598818](http://primebit.ru/wp-content/uploads/2011/10/12-balloons-rotate45-png-e1311489598818.png)
Данный фильтр позволяет накладывать любые шестнадцатеричные цвета на изображение. Первое значение — процент, второе — цвет в шестнадцатеричном формате.
![13-balloons-colorize-red-e1311489964269](http://primebit.ru/wp-content/uploads/2011/10/13-balloons-colorize-red-e1311489964269.png)
Если Вы хотите получить двухцветное изображение, необходимо сначала наложить фильтр grayscale для обесцвечивания картинки.
![14-balloons-duotone-red-e1311490264861](http://primebit.ru/wp-content/uploads/2011/10/14-balloons-duotone-red-e1311490264861.png)
С помощью phpThumb Вы можете накладывать на изображение текстовые и графические водяные знаки. В случае с текстовыми вотермарками Вы можете указать размер, положение, прозрачность и TTF-шрифт.
Вообще, доступных очень много. Рекомендую ознакомиться с документацией.
Вот простой водяной знак на основе стандартного шрифта сервера:
![15-balloons-watermark-text-e1311528975812](http://primebit.ru/wp-content/uploads/2011/10/15-balloons-watermark-text-e1311528975812.png)
Вот, наверно, и все о чем я хотел рассказать. С бОльшим количеством примеров использования phpThumb вы можете ознакомиться на официальной странице проекта.
P.S.Хотел опубликовать в блог «MODx CMS», но как обычно бывает на хабре, не хватило кармы.
P.S.S. Перенес в «MODx CMS»
Я не буду описывать процесс установки аддона из репозитория. Будем считать, что вы уже скачали его и установили.
Причиной написания поста послужил тот факт, что официальная документация по phpThumbOf просто ужасна. Прочитав ман, я подумал, что единственной функцией, которую можно использовать для модификации изображения при его выводе является зум-кроп (zoom-crop), ибо больше там ничего не сказано. Но позже, попробовав использовать некоторые другие опции phpThumb я выяснил, что они прекрасно работают!
Анатомия phpThumbOf — фильтр вывода
Фильтр Вывода MODx-а позволяет прогнать значение элемента через любой набор фильтров непосредственно перед его выводом на страницу. Синтаксис выглядит следующим образом:
[[element:modifier=`value`]]
Первым и наиболее правильным способом использования phpThumbOf является именно Фильтра Вывода, который добавляется к TV-параметру типа «изображение».
Просто для полноты рассказа, я покажу, как добавить такой tv-параметр к шаблону.
Для начала, создайте новый tv-параметр и назовите его как сочтёте нужным. Мой вариант:
![01-tv-creation-e1311459747180](http://primebit.ru/wp-content/uploads/2011/10/01-tv-creation-e1311459747180.png)
Далее, в закладке «Тип ввода» выберите «Изображение»:
![02-tv-image-type-e1311460888561](http://primebit.ru/wp-content/uploads/2011/10/02-tv-image-type-e1311460888561.png)
Все, что нам осталось сделать, это указать способ вывода tv-параметра — ставим SRC.
Для экспериментов выберем какую-нибудь интересную картинку. Я нашёл себе такую:
![hot-air-balloons1-e1311471772311](http://primebit.ru/wp-content/uploads/2011/10/hot-air-balloons1-e1311471772311.jpg)
Теперь, когда мы указали в каком-нибудь ресурсе выбранную нами куртинку в качестве значения созданного нами дополнительного параметра, его можно вывести в контенте ресурса с помощью конструкции:
<img src="[[*tvImage]]" />
Как я упоминал в начале статьи, выходной фильтр изменяет элемент до того, как он будет отрисован на странице. Передадим значение нашего tv-параметра выходному фильтру phpThumbOf:
[[*tvImage:phpthumbof=`w=120&h=120`]]
Ремарка: если мы выводим tv-параметр в шаблоне или чанке, то знак звездочка "*" нужно заменить на плюс "+": [[+tvImage:phpthumbof=`w=120&h=120`]]
В результате, мы получим новое сгенерированное изображение, основанное на той картинке, что мы выбрали для ресурса, но масштабированное до размеров 120х120 пикселей. Но как Вы могли заметить, у изображения появились белые поля, возникшие из-за нарушения пропорций исходного изображения.
![03-balloons-120px-e1311463866227](http://primebit.ru/wp-content/uploads/2011/10/03-balloons-120px-e1311463866227.png)
Избежать этого можно очень просто, достаточно не указывать ширину или высоту. Давайте оставим только фиксированную ширину:
[[+tvImage:phpthumbof=`w=120`]]
Теперь результирующее изображение отмасштабировано только по заданной ширине, высота будет пропорциональной исходному соотношению сторон.
![05-balloons-width-only-e1311485798599](http://primebit.ru/wp-content/uploads/2011/10/05-balloons-width-only-e1311485798599.png)
Как Вы можете видеть, возможности ресайза изображений безгранично гибки. Вот ещё один пример с шириной 270 пикселей. Кроме того, вы можете получать на выходе изображения больше оригинального, но это порочная практика ;).
[[*tvImage:phpthumbof=`w=270`]]
![04a-balloons-270px-e1311490516506](http://primebit.ru/wp-content/uploads/2011/10/04a-balloons-270px-e1311490516506.png)
Обрезка изображения с точными размерами
Если мы хотим получить изображение с размерами именно 120 на 120 пикселей, мы можем его обрезать. Для этого, необходимо добавить опцию кропа (zoom-crop)
&zc=1.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1`]]
Теперь мы имеем обрезанную версию нашего изображения с точными размерами и без белых полей.
![04-balloons-120px-cropped-e1311465932732](http://primebit.ru/wp-content/uploads/2011/10/04-balloons-120px-cropped-e1311465932732.png)
Фильтры PhpThumb — веселье только начинается
Теперь, когда вы знаете, как управлять размером изображения, я покажу вам реальную силу phpThumb — фильтры. Я просто приведу несколько примеров фильтров, доступных в phpThumb. Обратите внимание, что все новые фильтры я добавляю в конец предыдущих примеров. При этом, их позиция имеет значение! Фильтры применяются слева направо.
Blur (размытие)
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=blur|10`]]
![06-balloons-blur10-e1311487594392](http://primebit.ru/wp-content/uploads/2011/10/06-balloons-blur10-e1311487594392.png)
Grayscale (преобразование палитры в градации серого)
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray`]]
![07-balloons-grayscale-e1311487995750](http://primebit.ru/wp-content/uploads/2011/10/07-balloons-grayscale-e1311487995750.png)
Скругление углов
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=ric|20|20`]]
![08-balloons-rounded-e1311488375137](http://primebit.ru/wp-content/uploads/2011/10/08-balloons-rounded-e1311488375137.png)
Обратите внимание, что у изображения появились белые углы в тех местах, где изображение «скруглилось». Мы можем побороть эту проблему, преобразовав результирующее изображение в PNG-формат.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=ric|20|20`]]
![09-balloons-rounded-png-e1311488679910](http://primebit.ru/wp-content/uploads/2011/10/09-balloons-rounded-png-e1311488679910.png)
Рамка
Периодически возникает необходимость добавить к изображению рамку. Конечно, это можно сделать средствами CSS. Но иногда возникают моменты, когда CSS бесполезен. Я хочу показать Вам один из таких примеров.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=bord|5|0|0|FFFFFF&fltr[]=rot|-15|E4F6FE`]]
![16-balloons-rotate+border-e1311532537823](http://primebit.ru/wp-content/uploads/2011/10/16-balloons-rotate+border-e1311532537823.png)
Вращение изображения
Вращение требует небольшого пояснения. Вы должны указать цвет фона для неграфических области в углах. В этом примере мы используем #006699, вращение -45°.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699`]]
![10-balloons-rotate45-e1311489222797](http://primebit.ru/wp-content/uploads/2011/10/10-balloons-rotate45-e1311489222797.png)
Если Вы хотите уменьшить количество JPG=артефактов, вы можете увеличить качество изображения (1-100):
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699&q=100`]]
![11-balloons-rotate45-jpg100-e1311489466801](http://primebit.ru/wp-content/uploads/2011/10/11-balloons-rotate45-jpg100-e1311489466801.png)
Если Вы хотите получить прозрачный фон, просто измените вывод в PNG, как мы делали это раньше:
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|&f=png`]]
![12-balloons-rotate45-png-e1311489598818](http://primebit.ru/wp-content/uploads/2011/10/12-balloons-rotate45-png-e1311489598818.png)
Color Overlay (наложение цвета)
Данный фильтр позволяет накладывать любые шестнадцатеричные цвета на изображение. Первое значение — процент, второе — цвет в шестнадцатеричном формате.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=clr|35|990033`]]
![13-balloons-colorize-red-e1311489964269](http://primebit.ru/wp-content/uploads/2011/10/13-balloons-colorize-red-e1311489964269.png)
Если Вы хотите получить двухцветное изображение, необходимо сначала наложить фильтр grayscale для обесцвечивания картинки.
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=clr|35|990033`]]
![14-balloons-duotone-red-e1311490264861](http://primebit.ru/wp-content/uploads/2011/10/14-balloons-duotone-red-e1311490264861.png)
Простой текстовый водяной знак
С помощью phpThumb Вы можете накладывать на изображение текстовые и графические водяные знаки. В случае с текстовыми вотермарками Вы можете указать размер, положение, прозрачность и TTF-шрифт.
Вообще, доступных очень много. Рекомендую ознакомиться с документацией.
Вот простой водяной знак на основе стандартного шрифта сервера:
[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=wmt|Belafonte Code|3|T|FFFFFF||100|20|0||0|`]]
![15-balloons-watermark-text-e1311528975812](http://primebit.ru/wp-content/uploads/2011/10/15-balloons-watermark-text-e1311528975812.png)
Финиш
Вот, наверно, и все о чем я хотел рассказать. С бОльшим количеством примеров использования phpThumb вы можете ознакомиться на официальной странице проекта.
P.S.
P.S.S. Перенес в «MODx CMS»