Источник файлов для MsGallery: настройка путей, превью, перегенерация превью + наложение watermark

Настройка источника файлов для MsGallery

Для изменения настроек в источнике файлов, перейдите в верхнем меню во вкладку «Медиа» — «Источники файлов».

Далее щелкните по источнику «MS2 Images» правой кнопкой мыши и выберите «Редактировать источник файлов».

Откроются настройки источника.

Смена путей в источнике

Для basePath и baseUrl поставим новый путь: template/img/products/ (чтобы у нас все изображения хранились в одной директории), после чего сохраняем настройки источника.

Внимание! Не рекомендую делать на полноценных интернет магазинах, которые в сети и индексируются.

Теперь перенесем в эту категорию папку с изображениями и превью товаров. Сделать это можно простым перетаскиванием прямо из дерева админки — вкладка «Файлы».

После переноса папки с одной директории в другую, на сайте вместо изображений будут битые картинки, т.к. путь до картинок хранится в базе данных (а изображения находятся уже по другому пути), если у вас 4 карточки как у меня, то их можно перезалить в карточки. Либо можно зайти в phpMyAdmin и сменить пути там, они в таблицах modx_ms2_products и modx_ms2_product_files.

А еще проще сделать замену таким запросом:

UPDATE `modx_ms2_products` SET `image` = REPLACE(image, 'assets/images', 'template/img' );
UPDATE `modx_ms2_products` SET `thumb` = REPLACE(thumb, 'assets/images', 'template/img' );
UPDATE `modx_ms2_product_files` SET `url` = REPLACE(url, 'assets/images', 'template/img' );

Мини разбор:

UPDATE `Имя таблицы` SET `Имя поля` = REPLACE(Имя поля, 'строка для замены', 'чем заменяем' ) ;

Предварительно сделайте бэкап БД.

Далее очищаем папку с кэшем core — cashe и радуемся.

Настройка оптимальных размеров превью для карточек и каталога

Теперь нам желательно настроить оптимальные размеры превью для карточек и каталога.

Как узнать оптимальные размеры превью

Для тех у кого все изображения разных размеров — вам только на бум так сказать тестировать. А для тех у кого они одного размера +- узнать легко. Алгоритм такой: открываем карточку товара (в браузере гугл хром буду показывать), щелкаем по главному изображению правой кнопкой мыши и выбираем посмотреть код. Откроется консоль, в ней уже наводите мышкой на ссылку изображения и там появится окошко с размерами: размер оригинал и размер который используется во фронтенде.

В категории та же история. В общем выписываем размеры которые на сайте в блокнот (в моем случае их 2 — мини превью для каталога и большое превью для карточки).

Настройка генерации превью

Возвращаемся в настройки источника файлов, нас интересует ключ thumbnails, там сейчас настройки по умолчанию, следующие:

{"small":{"w":120,"h":90,"q":90,"zc":"1","bg":"000000"}, "webp":{"w":120,"h":90,"q":90,"zc":"1","bg":"000000","f":"webp"}}

Исправим их под нужные размеры (у вас размеры свои), получаем примерно такую конфигурацию:

{
"small":{"w":95,"h":60,"q":90,"zc":"1","bg":"000000"}, 
"webps":{"w":95,"h":60,"q":90,"zc":"1","bg":"000000","f":"webp"},
"medium":{"w":306,"h":192,"q":90,"zc":"1","bg":"000000"},
"webpm":{"w":306,"h":192,"q":90,"zc":"1","bg":"000000","f":"webp"}
}

Сохраните, после чего зайдите в какую-нибудь карточку и обновите в ней превью, сохраните.

и посмотрите создались ли они в новой директории.

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

Теперь можно вызывать эти картинки к примеру так:

{$file['small']}

Давайте немного переделаем нашу карточку, впилим новый формат изображений и микроразметку. Для этого создадим новый чанк для вывода галереи к примеру GalleryNew.tpl, со следующим содержимым:

{if $files?}
<picture class="mt-1" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
 <source type="image/webp" srcset="{$files[0]['webpm']}">
 <source type="image/jpeg" srcset="{$files[0]['medium']}">
 <img class="img-fluid" itemprop="url contentUrl" src="{$files[0]['medium']}" alt="{$file['name']}" width="306" height="192">
 <meta content="306" itemprop="width">
 <meta content="192" itemprop="height">
</picture>
{else}
<picture class="mt-1" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
 <source type="image/webp" srcset="/template/img/nologo.webp">
 <source type="image/png" srcset="/template/img/nologo.png">
 <img class="img-fluid" itemprop="url contentUrl" src="/template/img/nologo.png" alt="нет логотипа" width="306" height="192">
 <meta content="306" itemprop="width">
 <meta content="192" itemprop="height">
</picture>
{/if}

Ну и соответственно меняем в нашей карточке вызов (чанк msProductContent.tpl) с

<img class="mt-1 img-fluid" src="{'!msGallery' | snippet : [ 'tpl' => '@FILE chunks/shop/Gallery.tpl' ]}" alt="{$_modx->resource.pagetitle}">

на {'!msGallery' | snippet : [ 'tpl' => '@FILE chunks/shop/GalleryNew.tpl' ]}.
Радуемся, теперь мы угодили поисковым системам: увеличили скорость загрузки страницы и внедрили микро размету. Еже примеры есть ниже.

MsGallery наложение watermark на изображения

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

Принцип наложения watermark в интернет магазинах на minishop2 (со стандартной галереей MsGallery — хотя с нестандартной думаю не особо отличается). Мы можем наложить ватермарк на превью любого размера следовательно — хотите чтобы картинки были с watermark выводите их превью — а не оригиналы, как обычно + к скорости загрузки и можно размеры проставить у изображений под рекомендации Google.

Для этого нам в первую очередь нужно определиться с размерами превью: маленькое изображение — мини превью галереи — fotorama или другой (на него нет смысла что то накладывать), среднее изображение — основное изображение которое видит клиент в карточке (на него скорее всего уже нужно накладывать) и крупное изображение — если его развернуть во весь экран.

Представим, что у нас чисто квадратные изображения, чтобы было проще пропорции высчитывать, тогда скорее всего будут оптимальными следующие размеры (в px): 275х275, 550×550 и 1080х1080.

Следовательно нам нужно перенастроить медиа источник «MS2 Images», внести в настройку thumbnails следующий конфиг:

{
"small":{"w":275,"h":275,"q":90,"zc":"1","bg":"000000"}, 
"medium":{"w":550,"h":550,"q":90,"zc":"1","ar":"x","bg":"000000","fltr":"wmi|/images/logotype-small.png|BR|50"},
"big":{"w":1080,"h":1080,"q":90,"zc":"1","ar":"x","bg":"000000","fltr":"wmi|/images/logotype.png|BR|70"},
"webp":{"w":275,"h":275,"q":90,"zc":"1","bg":"000000","f":"webp"}
}

Если у вас не квадратные, а прямоугольные изображения вам нужно подсчитать размеры под их габариты, например "w":550,"h":350

и заменить путь до watermark относительно корня сайта /images/logotype-small.png — я к примеру на средние изображения накладываю уменьшенную версию логотипа в правый нижний угол, для крупного изображения логотип нормального размера. Цифра 50 или 70 отвечает за степень прозрачности.

Кому нужно больше параметров наложения смотрите документацию.

Медиа источник настроили, теперь нужно внести изменения в чанк который отвечает за вывод галереи, если не меняли, то это tpl.msGallery. Там по умолчанию изображения выводиться так:

<a href="{$file['url']}" target="_blank">
      <img src="{$file['small']}" alt="{$file['description']}" title="{$file['name']}">
</a>

следовательно значения нужно поменять на следующие:

<a href="{$file['big']}" target="_blank">
        <img src="{$file['medium']}" alt="{$file['description']}" title="{$file['name']}">
</a>

После этого идем в какую-нибудь карточку товара, заходим в галерею и обновляем в ней превью «щелчок правой кнопкой мыши» — «обновить превью». Сохраняем и смотрим, если все устраивает запускаем скрипт по обновлению всех превью на сайте (он ниже).

Массовое обновление превью всех товаров minishop2 (MsGallery)

Устанавливаем из основного репозитория modx, дополнение Console. Открываем его и запускаем в нем скрипт:

<?php
$step = 5;
$offset = isset($_SESSION['galgenoffset']) && $_SESSION['galgenoffset'] ? $_SESSION['galgenoffset'] : 0;
$miniShop2 = $modx->getService('minishop2');
$modx->setLogLevel(MODX_LOG_LEVEL_ERROR);
$q = $modx->newQuery('msProductFile', array('parent' => 0));
$total = $modx->getCount('msProductFile', $q);
$q->sortby('product_id', 'ASC');
$q->sortby('rank', 'DESC');
$q->limit($step,$offset);
$resources = $modx->getCollection('msProductFile', $q);
foreach ($resources as $resource) {
    $modx->runProcessor('mgr/gallery/generate', array('id' => $resource->id),
        array('processors_path' => $modx->getOption('core_path').'components/minishop2/processors/'));
}

$_SESSION['galgenoffset'] = $offset + $step;
if ($_SESSION['galgenoffset'] >= $total) {
  $sucsess = 100;
  $_SESSION['Console']['completed'] = true;
  unset($_SESSION['galgenoffset']);
} else {
  $sucsess = round($_SESSION['galgenoffset'] / $total, 2) * 100;
  $_SESSION['Console']['completed'] = false;
}
for ($i=0; $i<=100; $i++) {
    if ($i <= $sucsess) {
        print '=';
    } else {
        print '_';
    }
}
$current = $_SESSION['galgenoffset'] ?
           $_SESSION['galgenoffset'] :
           ($sucsess == 100 ? $total : 0);
print "\n";
print $sucsess.'% ('.$current.')'."\n\n";

Ждем пока скрипт все обработает и радуемся) Протестировано на MODX 2.8.3 и minishop2-2.9.3-pl. Если что то не получилось — опишите проблему в комментариях.