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

Источник файлов для MsGallery: настройка путей, превью, перегенерация превью + наложение watermark MODX Revo
Урок о том как грамотно настроить источник файлов для MsGallery (встроенная галерея minishop2), а также как прегенерировать все превью и при необходимости добавить 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. Если что то не получилось — опишите проблему в комментариях.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на
YooMoney
или
Qiwi
. Либо поделившись статьей ☟
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru