Все для создания и продвижения сайтов

Верстка, программирование, SEO

Резайзер изображений в 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-хэш исходного изображения
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.