MIGX галерея внутри MIGX с уникальными путями для фоток

27 марта 2023 MIGX, Полезные фишки

Столько уже сказано про MIGX и все равно находятся вещи, которые должны были уже быть сделаны и описаны и расписаны, но нет.

Сегодня хочу поделиться решением которое позволит делать набор MIGX галерей внутри главного (родительского) MIGX - получится мультигалерея на MIGX. Мы научимся загружать автоматически фотки с привязкой к ID ресурса плюс родительскому MIGX_id, а так же сможем воткнуть свой уникальный путь, который можно будет указать при создании строки галереи и туда спокойненько загрузить наши будущие фотки. Т.е. чтобы у нас фотки лежали так:

myfiles/gallerys/[res_id]/[MIGX_id]/_fotos_
или
myfiles/gallerys/[res_id]/[myPath]/_fotos_

В админке мы это все будем созерцать так:


Это решение пригодится, если для ресурса нужно очень много разных галерей, которые должны быть разделены, по разному выводиться или имеют 1 раздел с фото, второй раздел с документами, третий раздел фотками из «другой галактики» и т.д. И все это обычно занимало бы 3 и более ТВ, теперь можно это сделать в одном ТВ (ну на самом деле 2 ТВ понадобятся). А так же уточню, что каждую галерею вы сможете загружать пакетно, те закинули 10 фоток и они спокойно загрузились куда нужно по канонам MODX. Открыли 2й раздел галереи и загрузили туда другую порцию. Загрузчик будем использовать штатный встроенный в MIGX – он то и позволяет нам автоматом загружать и не париться.

В результате мы получим группы галерей со своими названиями, описаниями, раздельным адресом загрузки и прочими плюшками. Будет очень напоминать пакет gallery, но в самом ТВ ресурса, а по факту можно будет вынести этот ТВ еще на отдельную вкладку, тем самым  отображать ее как взрослую галерею, прям как различные пакеты – галереи типа gallery и другие. Перспектив у этого варианта загрузок много. После прочтения - сами поймете где оно вам надо.

Для тех кто быстро понимает в чем суть скажу, что текущий (временный путь), точнее его окончание в виде MIGX_id или mypath мы будем хранить в текущей сессии. Таким образом мы сможем передать текущий путь в наш источник, который на лету сгенерирует и создаст соответствующую папку для конкретного родительского MIGX_id. По идее 2 менеджера с разными id даже если одновременно будут загружать фотки, то по сессиям получат свои данные временной папки. Это будет происходить в момент, при открытии на редактирование элемента родителя во всплывающем окне. В момент до отрисовки этого окна будет срабатывать рендер поля для description (кстати уникальная технология, которую влепил Бруно с рендером в Html поля description. Мельком скажу, что тут вы сможете рендерить свой кастомный html бонусом. Но мы тут будем по скромнее – всего лишь сниппетом renderPathMedia запихивать в сессию значение поля MIGX_id или нашего mypath. А сниппет migxResourceMediaPathCustom в медиаисточнике  будет проверять есть ли в сессии дополнительный путь и если есть подхватывать его и делать необходимые нам дела. И в конце концов у нас откроется окошко, где фотки отображаются корректно и загружаются куда нужно.

 

А теперь детальная инструкция как это сделать:

  1. Обновляем MIGX до последней версии.
  2. Копируем сниппет migxResourceMediaPath и назваем его другим именем. Я назвал его migxResourceMediaPathCustom.

В нашем скопированном снипете идем на 117 строку и дописываем проверку в сессии:

if ($_SESSION['tmpmigxpath']) {
   $path = $path . $_SESSION['tmpmigxpath'] . '/';
}

Сохраняем.

2.1 Сразу на будущее сделаем еще один сниппет. Создаем его с нуля, я назвал: renderPathMedia, вы можете написать другое название, но запомните его т.к. понадобиться он в 4.3.2. пункте.

Содержимое:

// activeid - текущий MIGX_id
// polepath - Путь измененный, новый из родителя
 
if ($polepath == '') {
    if ($activeid > 0) {
        $_SESSION['tmpmigxpath'] = $activeid;
    } else {
        $_SESSION['tmpmigxpath'] = '';
    }   
} else {
    $_SESSION['tmpmigxpath'] = $polepath;
}
return '';

сохраняем.

2.2. Создаем отдельный медиаисточник для нашего будущего ТВ поля:

Для полей basePath и baseUrl вставляем наш снипет из п.2: (только уберите пробелы между квадратными скобками)

[ [ !migxResourceMediaPathCustom? &pathTpl=`myfiles/gallerys/{id}/` &createFolder=`1` ] ]

 У меня например так:

Сохраняем.

 

  1. Создаем нашу основную галерею с автозагрузкой. В интернете есть описание как что создавать, или можно почитать тут про создание MIGX галереи. Нужно только настроить ТВ на работу с конфигом галереи ТВ и указать в нем источник наш новый, ТВ прикреплять к ресурсу ненужно!

 

  1. Настройка родительского конфига в MIGX.

4.1. Создаем новый конфиг в панели в MIGX.  

4.2. Вкладка Settings: Придумываем конфигу ИМЯ, (я назвал supergalla) а ниже ищем настройку Add Items directly – обязательно ставим галочку add directly. Это важный момент! При создании новой строки сразу же формируется MIGX_id. В последствии когда мы откроем на редактирование эту строку, то получим все в лучшем виде. В противном случае окно открывается сразу и там MIGX_id еще нет и мы не сможем красиво все загрузить тк путь будет не полным. Надеюсь не пропустите этот момент.

4.3. Вкладка Formtabs. Тут вы добавляете необходимые вам поля, например название, описание и прочие необходимые поля для заполнения . И добавляем отдельные поля для работы галереи (названия полей я придумываю свои, вы же можете свое написать):

4.3.1. поле mypath. Заголовок – Мой путь. Это поле нужно, если вы хотите указывать вместо MIGX_id свой уникальный путь в ручную. Это поле можно не создавать, если нет в нем необходимости. Поле лучше сделать в стиле select – и выбирать из заранее предустановленных путей. Тут все зависит от будущей эксплуатации решения. Можно и оставить тип строки (как я) – обычный input. Если его не заполнят и оставлять пустым, то путь будет по умолчанию через MIGX_id. А если заполнено, то mypath в деле.

4.3.2. поле myhidepathtmp. Заголовок – рабочая папка.  Это наше волшебное поле-рендер. Нужно чтобы в момент открытия строки на редактирование в сессию записался наш путь по загрузке фоток. Делаем:

- создаем поле с названием myhidepathtmp.

- Вписываем сниппет из пункта 2.1 в поле Description у меня (пробелы уберите): [ [renderPathMedia?activeid=`[ [+MIGX_id] ]` &polepath=`[ [+mypath] ]`] ]

- И чуть ниже в Description is Code ставим в ДА (yes). – обязательно!

Сохраняем это поле.

4.3.3. Создаем еще одно поле fotos с названием Все фотки. Вот тут укажем ТВ имя с конфигом галереи тк фотки будут именно тут храниться:

- В Input TV - пишем наше ТВ с галереей у меня это gallery

- Во вкладке MEDIASOURCES выбираем источник source frommigx.

Сохраняем.

И еще раз сохраняем и мы оказываемся в исходных табах.

Если есть желание, то можно еще свое что-то настроить, если еще что-то нужно.

Теперь идем в наше Дополнительное поле (ТВ), в котором настраиваем привязку к типу ТВ MIGX и указываем наш конфиг supergalla.

Так же указываем наш новый медиаисточник, который мы создали специально для этого ТВ поля. Указываем еще к какому шаблону привязать, сохраняем.

Теперь можно попробовать Это ТВ в действии:

Для вывода фоток в родителе можно написать небольшой сниппет, если нужно. Как видно на фото для теста я просто вывел их в теге <img>.

Как выводит, думаю вы решите сами, а я, лишь, подготовил php сниппет myFotosRender который можно взять за основу и допилить по вкусу:

$qwe = json_decode($json,1);
$out = '';
if (isset($_POST['resource_id']) && $_POST['resource_id'] > 0) {
    $docid = $_POST['resource_id'];
} else {
    if (empty($docid)) {
        $docid = $modx->resource->get('id');
    }
}
foreach($qwe as $line) {
    if(!empty($line['image'])){
        $out .= "<img src='/uploads/gallery/".$docid."/".$migxid."/".$line['image']."' width='50'>";
    }
}
return $out;

Добавим рендер в наш основной конфиг:

В основном конфиге в закладке Columns можно создать дополнительное поле с обязательно ДРУГИМ названием: fotos-r для рендеринга. Во вкладке Render укажите рендер: this.renderChunk И чуть ниже в поле renderChunk template  впишите вызов: 

[ [!myFotosRender? &json=`[ [+fotos] ]` &docid=`[ [*id] ]` &migxid=`[ [+MIGX_id] ]`] ]

*пример для фоток загруженных по MIGX_id. Сохраняем.

 

Как выводить на сайте это все дело?

Если вы используете парсер MODX, то рекомендую написать свой небольшой сниппет на php, тк извращаться с getImageList не вижу смысла. Логику можно подсмотреть у фенома чуть ниже.

А на феноме делается через 2 foreach с подставлением в ручную основного адреса:

{foreach ($_modx->resource.megagallery | fromJSON) as $item}
    {foreach ($item['fotos'] | fromJSON) as $foto}
    <div style="border:1px solid #444;padding:5px;">
        <img src="myfiles/gallerys/{$_modx->resource.id}/{$item['mypath'] ?: $item['MIGX_id']}/{$foto['image']}" width="20">   
    </div>
    {/foreach}
{/foreach}

В этом примере учитывается и кастомная папка и migx_id.

 

В общем, вы видите, что все оказалось достаточно просто и интересно.

Сюда можно еще добавить MIGXBD, а еще можно путь к картинке формировать заранее в отдельном поле через дополнительно дописанный сниппет, что позволит на фронте не ломать голову с путем к картинке. Я лишь показал что откуда берется, а вам с этим теперь жить. И мне тоже. ))

Успехов Вам и Спасибо за внимание!