phpThumb в MODX: параметры pThumb и прозрачность PNG

Содержание

Параметры phpThumb
Общие замечания
Примеры использования на примере pThumb
Как я вернул прозрачность PNG в старых MODX
Практика: миниатюры Gallery через pThumb
Устанавливаем pThumb
При необходимости включаем структуру кеша pThumb
Меняем миниатюру Creative
Убираем лишние параметры миниатюры из вызова Gallery
Если используете портфолио FlexStart
Проверяем URL и фактический размер
Если миниатюра не создалась
Следующий шаг

phpThumb — библиотека обработки изображений, созданная Джеймсом Генрихом. В MODX с ней работают дополнения, например pThumb, phpThumbOf и phpThumbOn.

Ниже собраны параметры библиотеки и примеры вызова через pThumb. Базовые параметры могут совпадать у разных дополнений, но их системные настройки, кеш и обработчики не следует считать одинаковыми. В частности, при использовании Resizer в pThumb поддержка фильтров отличается от встроенного phpThumb.

Параметры phpThumb

Название	Описание	Пример
`src`	Путь до файла исходного изображения.
`new`	Создать новую картинку, не миниатюру из существующего изображения. Требует набор параметров «w» и «h».	`&new=FF9505\|80` — оранжевый фон с непрозрачностью 80%». `Opacity` — именно непрозрачность, а не неопределенное «прозрачности или наоборот»..
`w`	Максимальная ширина выходного изображения в пикселях.
`h`	Максимальная высота выходного изображения в пикселях.
`wp`	Максимальная ширина для портретных изображений.
`hp`	Максимальная высота для портретных изображений.
`hl`	Максимальная высота для пейзажных изображений.
`ws`	Максимальная ширина для квадратных изображений.
`hs`	Максимальная высота для квадратных изображений.
`f`	Формат изображения после обработки («webp», «jpeg», «png», или «gif»).
`q`	Сжатие JPEG (качество).	1 = наихудшее 95 = наилучшее 75 = по умолчанию
`sx`	Левая сторона исходного прямоугольника (по умолчанию = 0) (значения 0 < sx < 1 представляют процент).
`sy`	Верхняя сторона исходного прямоугольника (по умолчанию = 0) (значения 0 < sy < 1 представляют процент).
`sw`	Ширина исходного прямоугольника (по умолчанию = fullwidth — полная ширена) (значения 0 < sw < 1 представляют процент)
`sh`	Высота исходного прямоугольника (по умолчанию = fullheight — полная высота) (значения 0 < sh < 1 представляют процент)
`zc`	Масштабирование-обрезка (zoom-crop). Автоматически обрезает больший размер, чтобы изображение заполнило меньший размер (требуются как «w», так и «h», переопределяет «iar», «far»). Установите на «1» или «C», чтобы масштабировать кадрирование по направлению к центру. Или установите на «T», «B», «L», «R», «TL», «TR», «BL», «BR» тяготеть к верхним/левым/нижним/правым направлениям (требуется ImageMagick для значений, отличных от «C» или «1»)	C — обрезает к центру T — обрезает к верху B — обрезает к низу L — обрезает к левой стороне R — обрезает к правой стороне TL — обрезает к верхней левой стороне TR — обрезает к верхней правой стороне BL — обрезает к нижней левой стороне BR — обрезает к нижней правой стороне
`ica`	ImageCropAuto, требуется (PHP 5 >= 5.5.0, PHP 7). Значение может быть от 0 до 4 (IMG_CROP_DEFAULT, IMG_CROP_TRANSPARENT, IMG_CROP_BLACK, IMG_CROP_WHITE, IMG_CROP_SIDES) или может быть «5\|<threshold>\|<bgcolor>», где <threshold> между 0 и 1, а <bgcolor> — цвет фона в шестнадцатеричном формате.
`bg`	Шестнадцатеричный цвет фона (по умолчанию = FFFFFF).
`bc`	Шестнадцатеричный цвет границы (по умолчанию = 000000).
`fltr`	Система фильтрации (доступно в основном только с включенным GD). Вызывается в виде массива с параметрами:
	brit	яркость — `fltr[]=brit\|<value>` — где <value> значение в диапазоне от -255 до 255.
	cont	контрастность — `fltr[]=cont\|<value>` — где <value> значение в диапазоне от -255 до 255.
	gam	гамма-коррекция — `fltr[]=gam\|<value>` — где <value> число от 0.01 до 10 (по умолчанию 1.0).
	sat	насыщенность — `fltr[]=sat\|<value>` — где <value> число в диапазоне от 0 (без изменений) до -100 (полное обесцвечивание = оттенки серого), или это может быть любое положительное число для повышенной насыщенности.
	ds	DeSaturate (обесцвечивание) — `fltr[]=ds\|<value>` — аналогично «sat», но положительные значения обесцвечивают, отрицательные — насыщают цветом.
	gray	оттенки серого — `fltr[]=gray` — убрать цветность.
	th	порог — `fltr[]=th\|<value>` — переводит изображение в оттенки серого, затем все пиксели ярче <value> (диапазон 0-255) делает белыми, все пиксили темнее <value> делает черными.
	rcd	уменьшить глубину цвета — `fltr[]=rcd\|<c>\|<d>` — где <c> количество цветов (2-256) в выходном изображении, а <d> равное «1» сгладить (по умолчанию) или «0» не сглаживать.
	clr	раскрасить — `fltr[]=clr\|<value>\|<color>` — где <value> число между 0 и 100 для количества расцвечивания, <color> — цвет для расцвечивания.
	sep	сепия — `fltr[]=sep\|<value>\|<color>` — где <value> число между 0 и 100 для количества расцвечивания (по умолчанию=50), и <color> цвет, чтобы раскрасить (по умолчанию=A28065). Примечание: это ведет себя по-разному, когда применяется ImageMagick, в этом случае по умолчанию используется значение 80 и ниже. значения дают более яркие/желтые изображения и выше значения дают более темные/синие изображения.
	usm	UnSharpMask (нерезкое маскирование) — `fltr[]=usm\|<a>\|<r>\|<t>` — где <a> это сумма (по умолчанию = 80, диапазон 0-255), <r> это радиус (по умолчанию = 0.5, диапазон 0.0-10.0), <t> это порог (по умолчанию = 3, диапазон 0-50).
	blur	размытие — `fltr[]=blur\|<radius>` — где (0 < <radius> < 25) (по умолчанию = 1).
	gblr	Размытие по Гауссу — `fltr[]=gblr`.
	sblr	Выборочное размытие — `fltr[]=gblr`.
	smth	smooth — `fltr[]=smth\|<value>` — где <value> весовое значение для матрицы (диапазон от -10 до 10, по умолчанию 6).
	lvl	уровни — `fltr[]=lvl\|<channel>\|<method>\|<threshold>` — где <channel> может быть одним из «r», «g», «b», «a» (для Red, Green, Blue, Alpha соответственно), или ‘*’ для всех RGB каналов (по умолчанию) основанных на шкале серого среднего. `<threshold>` — количество самых ярких/самых темных пикселей будет обрезано в процентах (по умолчанию = 0,1%). Использование параметров по умолчанию (&fltr[]=lvl) аналогично авто контрасту в Adobe Photoshop. Методы ImageMagick могут поддерживать несколько каналов (например, «lvl\|rg\|3»), но внутренние методы не могут (они будут использовать первый символ строки канала в качестве канала) `<method>` может быть одним из: 0=внутренний RGB; 1 = внутренняя шкала серого; 2=ImageMagick Contrast-Stretch (по умолчанию) 3=ImageMagick Normalize (может показаться перенасыщенным)
	wb	баланс белого — `fltr[]=wb\|<c>` — где <c> это целевой шестнадцатеричный цвет к балансу белого, этот цвет соответствует «белому» или светло-серому. Фильтр пытается поддерживать яркость, поэтому теоретически можно использовать любой серый цвет. «wb» в настройках по умолчанию уже дает эффект, аналогичный «lvl», обычно нет необходимости использовать «lvl», если уже используется «wb».
	hist	гистограмма — `fltr[]=hist\|<b>\|<c>\|<w>\|<h>\|<a>\|<o>\|<x>\|<y>` — где: <b> — цветная (ые) полоса (ы) для отображения сзади и спереди (одно или несколько значений «rgba *» для Red, Green, Blue, Alpha и Grayscale соответственно). <c> — разделенный точками с запятой список шестнадцатеричных цветов, используемых для каждой полосы графика (по умолчанию FF0000, 00FF00, 0000FF, 999999, FFFFFF соответственно). <w> и <h> — ширина и высота наложенной гистограммы в пикселях или, если <= 1, то процент от ширины / высоты исходного изображения. <a> — выравнивание (такое же, как для «wmi» и «wmt»). <o> — непрозрачность от 0 (прозрачная) до 100 (непрозрачная) (требуется PHP v4.3.2, в противном случае — 100% непрозрачная). <x> и <y> — край края в пикселях (или процент, если 0 <(x \| y) <1).
	over	overlay / underlay накладывает изображение на миниатюру или накладывает миниатюру на другое изображение (например, для создания рамки рисунка) — `fltr[]=over\|<i>\|<u>\|<m>\|<o>` — где: <i> — имя файла изображения. <u> — это «0» (по умолчанию) для наложения изображения поверх эскиза или «1» для наложения эскиза поверх изображения. <m> — это поле может быть в абсолютных пикселях или если <1 представляет собой процент от размера эскиза [должно быть<0,5] (по умолчанию 0 для наложения и 10% для наложения). <o> — непрозрачность (0 = прозрачный, 100 = непрозрачный) (требуется PHP v4.3.2, в противном случае — 100% непрозрачный).
	wmi	водяной знак в виде изображения — `fltr[]=wmi\|<f>\|<a>\|<o>\|<x>\|<y>\|<r>` — где: <f> — накладываемое изображение. <a> — выравнивание, один из BR, BL, TR, TL, C, R, L, T, B, * (=плитка). <o> — прозрачность от 0 (прозрачный) до 100 (непрозрачный). <x> — и <y> отступ от края (и между плиткой) в пикселях (или процентах если 0 < (x\|y) < 1). <r> — угол поворота водяного знака.
	wmt	текстовый водяной знак — `fltr[]=wmt\|<t>\|<s>\|<a>\|<c>\|<f>\|<o>\|<m>\|<n>\|<b>\|<O>\|<x>` — где: <t> — текст используемый в качестве водяного знака. <s> — размер шрифта (1-5 для встроенного шрифта или размер шрифта для шрифтов TrueType). <a> — выравнивание, один из BR, BL, TR, TL, C, R, L, T, B, * (=плитка). <c> — цвет текста. <f> — имя файла TTF (опционально, если не указать будет использоваться встроенный шрифт). <o> — прозрачность от 0 (прозрачный) до 100 (непрозрачный). <m> — отступ от края (и между плиткой) в процентах. <n> — угол. <b> — цвет фона. <O> — прозрачность фона от 0 (прозрачный) до 100 (непрозрачный). <x> — направление распространения фона (либо «x» либо «y», или оба, но так будет закрыто все изображение). <x> — работает только со шрифтами TTF, но не со встроенными.
	flip	сдвиг изображения по оси X или Y — `fltr[]=flip\|x или fltr[]=flip\|y`.
	ric	скруглить углы изображения (для вывода прозрачных изображений PNG) — `fltr[]=ric\|<x>\|<y>` — где: <x> — горизонтальный радиус кривой. <y> — вертикальный радиус.
	elip	похоже на скругление углов, но более эксримальное — `fltr[]=elip`.
	mask	`fltr[]=mask\|filename.png\|<i>` — значения маски в оттенках серого. Применяется в качестве альфа-канала к основному изображению. Белый непрозрачный, черный прозрачный, если параметр <i> (инвертировать) не установлен в 1, в этом случае черный непрозрачный, а белый прозрачный.
	bvl	BeVeL — fltr[]=bvl\|<w>\|<c1>\|<c2> — где: <w> — ширина скоса. <c1> — цвет в формате HEX для верхнего и левого оттенков. <c2> — цвет в формате HEX для нижнего и правого оттенков.
	bord	граница — `fltr[]=bord\|<w>\|<rx>\|<ry>\|<c>` — где: <w> — ширина границы в пикселях. <rx> и <ry> — горизонтальные и вертикальные радиусы для закругленных углов. <c> — цвет границы.
	fram	рамка наподобие «bord», но более настраиваемая — `fltr[]=fram\|<w1>\|<w2>\|<c1>\|<c2>\|<c3>` — где: <w1> — ширина основной границы. <w2> — ширина каждой стороны скосной части. <c1> — цвет в формате HEX главной границы. <c2> — цвет подсветки границы. <c3> — цвет тени границы.
	drop	тень — `fltr[]=drop\|<d>\|<w>\|<clr>\|<a>\|<o>` — где: <d> — расстояние от изображения до тени. <w> — ширина затенения тени (еще не реализовано). <clr> — цвет тени в формате HEX. <a> — угол тени (по умолчанию = 225). <o> — непрозрачность (0 = прозрачный, 100 = непрозрачный, по умолчанию = 100) (еще не реализовано)
	crop	обрезка изображения — `fltr[]=crop\|<l>\|<r>\|<t>\|<b>` — где: <l> — количество пикселей для обрезки с левой стороны измененного изображения. <r> — количество пикселей для обрезки с правой стороны измененного изображения. <t> — количество пикселей для обрезки с верхней стороны измененного изображения. <b> — количество пикселей для обрезки с нижней стороны измененного изображения.
	rot	поворот — `fltr[]=rot\|<a>\|<b>` — где: <a> — угол поворота в градусах. <b> — цвет фона. Подобно «ra», но применяется после обработки других фильтров, поэтому вы можете вращать другие фильтры.
	size	изменение размера — `fltr[]=size\|<x>\|<y>\|<s>` — где: <x> — горизонтальный размер в пикселях. <y> — вертикальный размер в пикселях. <s> растянуть (если = 1) или изменить размер пропорционально (0, по умолчанию) <x> и <y> будут интерпретироваться как процент от текущего размера изображения если (0 < X < 1) Не используйте этот фильтр без необходимости. Только в случаях, когда к другим фильтрам необходимо применить абсолютное позиционирование на основе исходного изображения и полученное изображение должно быть изменено после применения других фильтров. Этот фильтр является менее эффективным, чем стандартные процедуры изменения размера.
`md5s`	MD5-хэш исходного изображения
`xto`	EXIF Thumbnail Only — извлечение только EXIF эскиз и не делать никакой дополнительной обработки. `ra` = Повернуть на угол: угол поворота в градусах положительный = против часовой стрелки, отрицательный = по часовой стрелке.
`ar`	Автоповорот: установите «x», чтобы использовать ориентацию EXIF сохраняется камерой. Также можно установить на «l» или «L» для пейзажа или «p» или «P» для портрета. «л» и «P» вращают изображение по часовой стрелке, «L» и «p» поверните изображение против часовой стрелки.
`sfn`	Номер исходного кадра — используйте этот номер кадра/страницы для многокадровые/многостраничные исходные изображения (GIF, TIFF и т. д.).
`aoe`	Разрешить увеличение вывода — переопределяет настройку для $CONFIG[‘output_allow_enlarging’] (1=вкл., 0=выкл.) («far» и «iar» переопределяют это и разрешают вывод больше, чем ввод)
`iar`	Игнорировать соотношение сторон — отключить пропорциональное изменение размера и растяните изображение, чтобы оно соответствовало «h» и «w» (оба должны быть установлено). (1=вкл., 0=выкл.)
`far`	Force Aspect Ratio — изображение будет создано в размере задается «w» и «h» (оба должны быть установлены). Выравнивание: L=слева,R=справа,T=сверху,B=снизу,C=центру. BL,BR,TL,TR используйте соответствующее направление, если изображение пейзажное или портретное.
`dpi`	количество точек на дюйм — ввод значения DPI при импорте из формат векторного изображения, такой как PDF, WMF и т.д.
`sia`	Сохранить изображение как — имя файла по умолчанию для сохранения. изображение как. Укажите базовое имя файла, расширение (например: «.png») будет автоматически добавлен.
`maxb`	МАКСИМАЛЬНЫЙ размер байта — качество вывода автоматически устанавливается на уместить миниатюру в байты «maxb» (сжатие настраивается качество для JPEG, настраивается битовая глубина для PNG и GIF)
`down`	Имя файла для сохранения изображения. Если это установлено браузер предложит сохранить это имя файла, а не чем отображать изображение

Общие замечания

* Всегда используйте локальное имя файла изображения, где это возможно, а не полный URL-адрес http://, потому что производительность намного лучше, меньше (или вообще без) использование временных файлов, и проверка последнего изменения кэшированных файлов не работает для
удаленные файлы. Например:
хорошо: phpThumb.php?src=/images/nicepic.jpg
плохо: phpThumb.php?src=/home/httpd/example/images/nicepic.jpg
хуже: phpThumb.php?src=http://example.com/images/nicepic.jpg

* Миниатюры будут масштабироваться пропорционально, чтобы поместиться в коробку размером не более (ширина * высота) пикселей (если не установлено «iar»)

* Кэширование эскизов для URL-адресов или источников базы данных требует абсолютное имя каталога для $config_cache_directory. Миниатюры кэшированных физических файлов будут воссозданы, если исходный файл изменяется, но удаленные файлы/файлы базы данных не может (время модификации не всегда доступно)

* Обрезка изображений может быть указана с любым точным пикселем значения для параметров sx/sy/sw/sh, или если они установлены до значения >0 и <1, то они интерпретируются как процент ширины/высоты исходного изображения. Например, чтобы обрезать 25% со всех сторон, вы должны указать параметры: phpThumb.php?src=pic.jpg&sx=.25&sy=.25&sw=.5&sh=.5

* У phpThumb() могут быть проблемы с доступом к временным файлам на серверах где включен безопасный режим, особенно при доступе файл через HTTP, или когда несвязанная версия GD используется. Указание «config_temp_directory» может помочь

* Для правильного разрешения имен файлов в стиле /~user/ требуется apache_lookup_uri(), который отсутствует или не работает Apache2, или если PHP не установлен как модуль Apache. phpThumb() пытается обойти это, если это недоступен, но может потребоваться указать полное имя файла для «src», если у вас возникнут проблемы.

* phpThumb() работает лучше и быстрее, когда доступен ImageMagick.
Большинство функций будут работать только с GD2, но
скорость намного выше с ImageMagick и намного больше
изображения могут быть обработаны с помощью ImageMagick, чем GD.

* Для работы большинства (если не всех) фильтров требуется GD v2.x. Но со многими фильтрами может справиться ImageMagick.
вместо GD.

* Фильтры, обрабатываемые ImageMagick или GD:
— brit;cont;ds;sat;grey;clr;sep;gam;neg;th;rcd;flip;edge;emb;lvl;размытие;gblr;usm;wb;
* Фильтры, обрабатываемые только ImageMagick:
— пока нет
* Фильтры обрабатываются только GD + PHP5:
— sblr;среднее;что-то;
* Фильтры, обрабатываемые только GD2:
— bvl;wmi;wmt;over;hist;frame;drop;mask;elip;ric;bord;

Примеры использования на примере pThumb

Данный сниппет можно использовать, как модификатор. К примеру у нас есть дополнительное поле image и мы хотим его вывести в ресурсе определенного размера, например 550x400px (обрезать), получаем:

[[*image:pthumb=`w=550&h=400&zc=1`]]

Если вы используете fenom то вывод будет таким: {$_modx->resource.image | pthumb : "w=550&h=400&zc=1"}

А если выводить сниппетами типа pdoPage на других ресурсах, то выводы будут выглядеть так:

[[+image:pthumb=`w=550&h=400&zc=1`]] или [[+tv.image:pthumb=`w=550&h=400&zc=1`]]

И на fenom так: {$image | pthumb : "w=550&h=400&zc=1"} или так {$tv.image | pthumb : "w=550&h=400&zc=1"}

Как я вернул прозрачность PNG в старых MODX

На MODX 2.5.8 — 2.6.1 у меня PNG-иконки после обработки получали черную или белую подложку. Тогда помогла правка файла core/model/phpthumb/phpthumb.class.php: в блоке с проверкой ImageMagickSwitchAvailable('density') я закомментировал строку:

// $commandline .= ' -flatten';

Сейчас с этой проблемой не сталкиваюсь. Сохраняю решение для тех, кто поддерживает старые проекты. Это не рекомендация менять ядро современных версий: там такая правка мной не проверялась.

Практика: миниатюры Gallery через pThumb

В уроке Gallery мы подключили портфолио Creative и дополнительный вариант с фильтрами для FlexStart. Теперь изменим способ подготовки миниатюр: вместо URL обработчика Gallery в src будет выводиться адрес готового файла кеша pThumb.

Альбомы, названия, описания и метки остаются в Gallery. Не переносим изображения в другую систему и не меняем оформление карточек.

Штатный адрес Gallery с connector.php не является ошибкой. Он обращается к обработчику миниатюр. Здесь рассматриваем другой способ обработки и хранения результата, а не обязательное исправление неисправной галереи.

Устанавливаем pThumb

Откройте установщик дополнений MODX, найдите pThumb у официального поставщика, проверьте совместимость выбранного выпуска и установите пакет.

Если pThumb уже установлен, повторять установку не нужно. Проверьте, что в системе доступен сниппет pthumb.

Не путайте библиотеку phpThumb, встроенную в MODX, и дополнение pThumb. Для приведенных ниже вызовов требуется именно дополнение.

Если на работающем сайте уже используется phpThumbOf, сначала сохраните файлы и базу и изучите порядок замены для выбранного выпуска pThumb. Эти пакеты используют общие имена и настройки, поэтому удалять один из них вслепую не следует.

При необходимости включаем структуру кеша pThumb

pThumb может возвращать URL готового файла и при обычном варианте кеширования. Дополнительный режим pThumb Cache нужен, если хотите использовать структуру с подкаталогами и более короткими хешами.

Откройте системные настройки MODX и выберите пространство имен phpthumbof. Несмотря на название пакета pThumb, его настройки находятся в этом пространстве имен.

Для нашей учебной установки, где оригиналы Gallery находятся в assets/gallery/, можно использовать:

Настройка	Значение	Назначение
`pthumb.ptcache_location`	`assets/image-cache`	Каталог создаваемых файлов кеша относительно корня MODX.
`pthumb.ptcache_images_basedir`	`assets/gallery`	Базовый каталог оригиналов, который исключается из формируемой структуры пути кеша.
`pthumb.use_ptcache`	Да	Включение этого варианта кеширования.

Если ваши оригиналы находятся в другом каталоге, не копируйте assets/gallery автоматически. Сначала проверьте фактический путь изображения. Эта настройка не переносит оригиналы и не меняет настройки хранения Gallery.

Сохраните настройки. У PHP должна быть возможность создавать файлы в выбранном каталоге кеша. Не назначайте всему сайту права 777.

Переключение режима кеширования не переносит старые миниатюры в новый каталог. Новые варианты будут создаваться по мере обращения; существующие файлы другого режима могут оставаться на диске.

Меняем миниатюру Creative

Откройте чанк creative.gallery.item, созданный в уроке Gallery. Найдите тег изображения:

<img class="img-fluid"
     src="[[+thumbnail]]"
     alt="[[+description:default=`[[+name]]`:htmlent]]" />

Замените его:

<img class="img-fluid"
     src="[[+image_absolute:pthumb=`w=650&h=350&zc=1&q=90`:htmlent]]"
     alt="[[+description:default=`[[+name]]`:htmlent]]">

Сохраните чанк.

В обработку передаем image_absolute — адрес исходного изображения Gallery. Не используем thumbnail: иначе входом станет адрес уже подготовленной миниатюры или ее обработчика.

Параметры нового изображения:

w=650 — ширина.
h=350 — высота.
zc=1 — заполнение заданных пропорций с обрезкой.
q=90 — качество JPEG.

Для проверки точного размера используйте исходное изображение, которое не меньше нужного результата. Поведение увеличения маленьких оригиналов зависит от параметров и обработчика.

Ссылку карточки href="[[+image_absolute]]" оставляем без изменений. По нажатию по-прежнему открывается оригинал, а pThumb обрабатывает только изображение для сетки.

Убираем лишние параметры миниатюры из вызова Gallery

Теперь размер этого img определяется строкой параметров pThumb. Настройки thumbWidth, thumbHeight, thumbZoomCrop и thumbQuality в вызове Gallery больше не управляют его src.

Если чанк больше нигде не использует thumbnail, вызов в creative.gallery можно сократить:

[[!Gallery?
    &album=`Creative Portfolio`
    &thumbTpl=`creative.gallery.item`
    &sort=`rank`
    &dir=`ASC`
    &limit=`0`
    &useCss=`0`
]]

Общие контейнеры портфолио не меняем. Удаляем только параметры, которые больше не используются для отображаемой миниатюры.

Если используете портфолио FlexStart

В чанке flex.gallery.item меняется только тег изображения:

<img class="img-fluid"
     src="[[+image_absolute:pthumb=`w=800&h=600&zc=1&q=90`:htmlent]]"
     alt="[[+description:default=`[[+name]]`:htmlent]]">

Классы фильтрации, метки, ссылки GLightbox и остальную разметку оставляем прежними. Из соответствующего вызова Gallery также можно убрать неиспользуемые thumbWidth, thumbHeight, thumbZoomCrop и thumbQuality.

Обработку изображений не нужно связывать с переключением категорий: фильтры продолжают работать с уже выведенными карточками.

Что меняется в варианте Gallery на Fenom

Если используете Fenom-вариант из предыдущего урока, он вызывает Gallery с тем же обычным чанком изображения. После изменения creative.gallery.item или flex.gallery.item новая обработка применяется и к этому варианту.

В примере Creative можно оставить такой вызов:

{set $cards = $_modx->runSnippet('Gallery', [
    'album' => 'Creative Portfolio',
    'thumbTpl' => 'creative.gallery.item',
    'sort' => 'rank',
    'dir' => 'ASC',
    'limit' => 0,
    'useCss' => 0
])}

Остальную разметку с выводом {$cards} оставьте прежней. Для FlexStart используются его альбом и чанк.

Не нужно вставлять Fenom в обычный thumbTpl Gallery: в этой реализации сам чанк использует стандартные плейсхолдеры, а Fenom управляет вызовом сниппета.

Проверяем URL и фактический размер

Откройте страницу портфолио и обновите ее. При необходимости очистите кеш ресурса, чтобы увидеть измененную разметку.

В инструментах разработчика найдите img одной карточки.
Проверьте его src: он должен указывать на готовый файл миниатюры, а не на connector.php Gallery.
Откройте этот адрес отдельно.
Проверьте фактические размеры файла: для первого примера ожидаем 650 × 350 при достаточно большом оригинале.
Нажмите на карточку и убедитесь, что просмотрщик по-прежнему открывает оригинал.

Не прописывайте полученный адрес кеша вручную в чанке. Он формируется pThumb из исходного файла и параметров обработки.

Само наличие изображения на странице еще не подтверждает успешное создание миниатюры. При некоторых ошибках pThumb возвращает входной адрес, поэтому важно проверить и URL, и фактические размеры.

Если миниатюра не создалась

Проверьте, установлен ли pThumb и доступен ли сниппет pthumb.
Убедитесь, что в обработку передается оригинал, а не URL connector.php.
Откройте исходное изображение отдельно и проверьте его путь.
Посмотрите журнал ошибок MODX и PHP.
Проверьте возможность записи в каталог кеша и свободное место.
Если ресурс берет старую разметку, отдельно проверьте кеш страницы.

На установках в подкаталоге и проектах с контекстами особенно внимательно проверяйте базовые пути и URL. Не добавляйте домен или каталог повторно только ради попытки исправить адрес.

У миниатюр есть собственный файловый кеш. Его очистка и очистка кеша страниц MODX — не одно и то же. Не удаляйте оригиналы Gallery и не включайте массовое удаление миниатюр ради одной проблемной картинки.

Если заменяете оригинал файлом с тем же именем, проверьте настройку phpthumbof.check_mod_time и обновление результата. При ее включении pThumb проверяет время изменения локального исходника.

Следующий шаг

Теперь портфолио получает изображения из Gallery, а миниатюры для сетки подготавливаются через pThumb и выводятся как готовые файлы кеша.

Дальше подключим контактную форму через FormIt: настроим поля, проверку данных и обработку отправки. После работающей обычной формы добавим отправку без перезагрузки страницы.