Резайзер изображений в MODX Revo: Pthumb
Ресайзер изображений в MODX Revo позволяет уменьшать их до нужного размера и выводить на сайте. Также можно обрезать картинки по вертикали, горизонтали и по центу. Помимо этого, есть ещё много возможностей.
Были протестированы следуйщие компоненты для решения этой задачи:
- Pthumb
- Phpthumbof
- Resizer
- RezImgCrop
Из них всех, по моему мнению, лучше всех работает Pthumb. Он более быстрый и ресайзит без потери качества, также у него много параметров.
Настройка Pthumb
Для начала загрузим его из административной панели сайта (Приложения -> Установщик).
Теперь давайте рассмотрим простой пример использования.
Ресайз
У нас есть вывод простой картинки:
<img src="images/image.jpg" />
Уменьшим её размер до 200х300:
<img src="[[pthumb? &input=`images/image.jpg` &options=`h=200&w=300`]]" />
Она может уменьшиться до размера 200х305 пикселей, так как изображения не будут пропорциональны нашим заданным параметрам.
Но если мы поменяем ширину и высоту местами, то получим 205х300.
Обратите внимание, что акцент идёт на первый заданный параметр
Обрезка
Но все равно эти два варианта нам не подходит, нам нужно получить изображения в точности, как мы указываем. Для этого добавим третий параметр.
<img src="[[pthumb? &input=`images/image.jpg` &options=`h=200&w=300&zc=1`]]" />
Изображения уменьшилось до размера 200х305 и обрезалось от центра.
Обрезать не всегда требуется от центра, рассмотрим все варианты
"T", "B", "L", "R", "TL", "TR", "BL",zc=C - от центра
zc=T - от верхнего края
zc=B - от нижнего края
zc=L - от левого края
zc=R - от правого края
zc=TL - от верхне-левого края
zc=TR - от верхне-правого края
zc=BL - от нижне-левого края
zc=BR - от нижне-правого края
Наложение вводного знака
На каждое изображение можно наложить вводный знак, рассмотрим на примере:
<img src="[[pthumb? &input=`images/photo.jpg` &options=`h=200&w=300&fltr[]=wmi|/assets/images/wm.png|BR|70|5|5|0`]]" />
Теперь разберёмся с параметрами вводного знака:
&fltr[]=wmi|<f>|<a>|<o>|<x>|<y>|<r>
- f - путь до файла;
- a - выравнивание вводного знака (один из: BR, BL, TR, TL, C, R, L, T, B);
- o - прозрачность (от 0 до 100);
- x - горизонтальный отступ (измеряется в пикселях);
- y - вертикальный отступ;
- r - угол поворота вводного знака.
Через Fenom
Через Fenom вызывать лучше так:
{set $image = $_modx->runSnippet('!pthumb', [
'input' => 'images/photo.jpg',
'options' => 'h=300&w=600&zc=C',
])}
<img src="{$image}" />
Основной функционал рассмотрели, остальное в таблице.
Параметры
Опция | Описание | |||
---|---|---|---|---|
w | максимальная ширина изображения | |||
h | максимальная высота изображения | |||
wp | максимальная ширина изображения для вертикальных изображений | |||
hp | максимальная высота изображения для вертикальных изображений | |||
wl | максимальная ширина изображения для горизонтальных изображений | |||
hl | максимальная высота изображения для горизонтальных изображений | |||
ws | максимальная ширина изображения для квадратных изображений | |||
hs | максимальная высота изображения для квадратных изображений | |||
f | выходной формат("jpeg", "png", "gif") | |||
q | степень сжатия (1=худшее, 95=лучшее) | |||
sx | левая сторона исходного прямоугольника (по умолчанию = 0) (значения 0 < sx < 1) | |||
sy | верхняя сторона исходного прямоугольника (по умолчанию = 0)(значения 0 < sy < 1) | |||
sw | ширина исходного прямоугольника (по умолчанию = fullwidth)(значения 0 < sw < 1) | |||
sh | высота исходного прямоугольника (по умолчанию = fullheight)(значения 0 < sh < 1) | |||
zc | автоматически обрезать лишнее по большей стороне так чтобы изображение заполнило заданные размеры (требует "w" и "h", отменяется опциями "iar", "far"). Значение "1" или "C" - обрезать от центра, значения "T", "B", "L", "R", "TL", "TR", "BL", "BR" - сверху/снизу/слева/справа и т.д. | |||
bg | цвет фона (по умолчанию = FFFFFF) | |||
bc | цвет бордюра (по умолчанию = 000000) | |||
md5s | MD5-хэш исходного изображения |
Оставить комментарий