Источник файлов для 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 отвечает за степень прозрачности.

Кому нужно больше параметров наложения [mask_link href=»http://phpthumb.sourceforge.net/demo/docs/phpthumb.readme.txt» target=»_blank»]смотрите документацию[/mask_link].

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