Унифицированное отображение разноформатных изображений без обрезки (решено)

Периодически возникает ситуация, когда шаблон ориентирован на горизонтальные изображения

//уменьшение основного изображение без обрезки
{set $image=$image | phpthumbon: 'w=600&h=300&zc=0&q=100'}
//создание фонового изображение с размытием и яркостью
{set $bg_image= $image | phpthumbon: 'w=600&h=300&zc=1&fltr[]=blur|9&fltr[]=blur|9&fltr[]=blur|9 &fltr[]=blur|9&fltr[]=blur|9&fltr[]=blur|9&fltr[]=blur|9&fltr[]=blur|9&fltr[]=blur|9&fltr[]=blur|9&fltr[]=brit|15'}
//создание вотермарка из основного изображения
{set $filter = 'fltr[]=wmi|' ~ $image ~ '|C|100'}
//генерация нового изображения с фоном
{set $image=$bg_image|phpthumbon:$filter}

В комментарии вариант с использованием сниппета

Далее, несколько может не самых удачных примеров для понимания принципа







Не знаю почему, но мне пришлось копипастнуть несколько раз fltr[]=blur|9 именно для хостинга, на локалке достаточно было указать один раз fltr[]=blur|90
SYAN
SYAN
02 марта 2026, 19:23
modx.pro
1 012

Комментарии: 1

SYAN
SYAN
03 марта 2026, 09:49
А теперь все эту красоту оформляем в виде сниппета. Параметры по-умолчанию редактируем в самом сниппете
elements/snippets/bgImage.php
<?php
/**
 * Сниппет bgImage — обработка изображений через phpThumbOn
 *
 * Параметры:
 * - image (обязательный) — путь к исходному изображению
 * - width (опционально) — ширина итогового изображения (по умолчанию 600)
 * - height (опционально) — высота итогового изображения (по умолчанию 300)
 * - quality (опционально) — качество сжатия (по умолчанию 100)
 * - blur_strength (опционально) — сила размытия для фона (по умолчанию 9)
 * - brightness (опционально) — яркость для фона (по умолчанию 15)
 * - watermark_opacity (опционально) — прозрачность водяного знака (по умолчанию 100)
 */

// Получаем параметры
$image = $modx->getOption('image', $scriptProperties, '');
$width = $modx->getOption('width', $scriptProperties, 600);
$height = $modx->getOption('height', $scriptProperties, 300);
$quality = $modx->getOption('quality', $scriptProperties, 100);
$blur = $modx->getOption('blur_strength', $scriptProperties, 9);
$brightness = $modx->getOption('brightness', $scriptProperties, 15);
$watermarkOpacity = $modx->getOption('watermark_opacity', $scriptProperties, 100);

// Проверяем, что изображение передано
if (empty($image)) {
    $modx->log(modX::LOG_LEVEL_ERROR, 'ProcessImage: не передан параметр image');
    return '';
}

// Шаг 1. Уменьшение основного изображения без обрезки
$mainImageParams = "w={$width}&h={$height}&zc=0&q={$quality}&aoe=1";
$processedImage = $modx->runSnippet('phpthumbon', [
    'input' => $image,
    'options' => $mainImageParams
]);

// Шаг 2. Создание фонового изображения с размытием и яркостью
// Применяем 9 фильтров размытия для усиления эффекта
$blurFilters = '';
for ($i = 0; $i < 9; $i++) {
    $blurFilters .= "fltr[]=blur|{$blurStrength}&";
}
$bgImageParams = "w={$width}&h={$height}&zc=1&{$blurFilters}fltr[]=brit|{$brightness}";
$bgImage = $modx->runSnippet('phpthumbon', [
    'input' => $image,
    'options' => $bgImageParams
]);

// Шаг 3. Создание водяного знака из основного изображения
// Используем обработанное основное изображение как водяной знак
$filter = "fltr[]=wmi|{$processedImage}|C|{$watermarkOpacity}";

// Шаг 4. Генерация финального изображения с фоном и водяным знаком
$finalImage = $modx->runSnippet('phpthumbon', [
    'input' => $bgImage,
    'options' => $filter
]);

return $finalImage;
?>

Вывод изображения на странице. Параметры можно опустить или указать под разные задачи

{set $image = $_modx->runSnippet('@FILE snippets/bgImage.php', [
  'image' => $image, 
  'width' => 1200, 
  'height' => 675,
  'brightness' => 5,
  'blurStrength' => 20
])}

<img src="{$image}">
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    1