Сниппеты всех ЧАНКОВ

 

 

Схема полной посадки Галереи

 

Посадка Галлереи на MODX

 

Go в КОНЕЦ

 


 

 

Далее,

 

 

Посадка - Темной ЦИФРОВОЙ ПОЛОСЫ

 

 

 

 

на MODX с помощью

 

 

Создадим КАТЕГОРИЮ:

 

Элементы -> Категории

 

 

 

Теперь создадим новое дополнительное поле для ТЕМНОЙ ЦИФРОВОЙ ПОЛОСЫ: Это будет поле MIGX - которое будет содержать параметры  Item-мов.

 

Создадим дополнительное поле:

 

 

Заполним поля:

 

 

 

 

И Опять берем  migx-sample:

 

 

Правильная редакция 1-й части кода:

 

 

Продолжаем заполнять "Дополнительное поле"

 

 

Правильная редакция такая:

 

    ЗДЕСЬ ВСЕ ПРАВИЛЬНО   

 

 

 

 

 

Назовем кнопочку По понятнее))

 

 

 

И заполняем поля:

 

 

 

   Обратим внимание!  

 

Что через MIGX - мы выводим дополнительные поля для страницы - НО НЕ РЕСУРСЫ!

Если нам нужно вывести РЕСУРСЫ - то их нужно выводить не через MIGX, а через простое дерево ресурсов. В том случае, если у нас на каждый ресурс - должна быть внутренняя страница, что бы у нас не было не задействованный URL.

 

 

 

И дозаполним все остальные блоки ЦИФР:

 

 

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

 

Идем в соответствующий чанк:

 

 

 

 

Рабочий код из (ikon-media):

 

 

 

 

 

 

 

Создадим чанк:

 

 

 

И вставим код в чанк:

 

 

Вставляем код и заполняем поля чанка:

 

 

И так выглядит ГЛАВНЫЙ ЧАНК - нашей

   ТЕМНОЙ ПОЛОСЫ БЕГУЩИХ ЦИФР   

 

 

ГОТОВО - обновляем - и проверяем вывод чанка:

 

 

Чуть поправим недочеты:

 

 

А в основном чанке:

 

 

 

Теперь наполним информацией уже все элементы:

 

 

 

Сразу кладу полный код уже с холдерами:

 

 

 

 

 

Коды холдеров:

 

 

 

 

 

 

 

 

 

 

 

Готово!

 

Обновим сайт на MODX - и увидим вывод ПОЛОСЫ с БЕГУЩИМИ ЦИФРАМИ:

 

(в уроке была проблема с пробелом между 250 и 000 - но я сделал все сразу правильно - указал цифру 250000 - без пробела - поскольку пробел мы делаем java-скриптом)

 

 

И побалуемся) Проверим как могли бы выводиться больше рядов ЦИФР:

 

 

 

И все отлично выводится))

 

 

 

 

   Отлично, Полосу с Бегущими цифрами посадили.   

 

 

 

далее,

 

 

Посадка Фото-Галлереи на MODX

 

 

Обратим внимание, что у нас 2 пункта списка уже повторяются с теми что мы уже вывели в    < header >

 

Вот как мы выкрутимся:

 

 

 

GO в ЧАНК    header  

из него мы можем скопировать уже ранее сделанный вывод:

 

 

Переходим в ЧАНК   s-gallery-profile:

 

И вставляем код вывода в место пунктов списка:

 

 

 

 

 

Финальный код вывода:

 

 

 

Теперь сделаем вывод ЗАГОЛОВКА:

 

 

и текст заодно выведем:

 

 

Создадим  ДОПОЛНИТЕЛЬНОЕ ПОЛЕ ДЛЯ ЗАГОЛОВКА:

 

 

 

 

И сразу создадим ДОПОЛНИТЕЛЬНОЕ ПОЛЕ  для текста:

 

 

 

  Не вывода - а ВВОДА (Я ИСПРАВИЛ) - А ТО НЕ ПОЯВЛЯЛСЯ РЕДАКТОР для ввода текста

 

И теперь идем в НАШИ ПОЛЯ:

 

  Тут скрин - еще без РЕДАКТОРА ТЕКСТА (но смысл ясен) 

 

Наполним их:

 

 

 

Теперь давайте их выведем:  С помощью   [Pdofield]

 

- что бы данный вывод можно было бы свободно применять и на ДРУГИХ  СТРАНИЦАХ (а не только на главной)

 

 

 

 

 

 

Сохраним и наблюдаем ВЫВОД Заголовка + Текста:

 

 

Давайте исправим:

 

 

   Отлично - теперь вывод Заголовка + Текста так как нужно!  

 

 

 

 Тут мы перескакивали и теперь сосредоточимся на Галерее:

 

 

  Теперь займемся посадкой самой ГАЛЛЕРЕИ: 

 

Делаем Аналогично как мы делали с Выводом изображений СЕРТИФИКАТОВ: (Инструкция для сертификатов - ниже этой записи)

Т.е Отладили работу вывода картинок (Независимых) на Gulp!

 

 

 

   А вот теперь ПРИМЕНИМ наши обновленные коды (HTML + common.js) уже в Админке MODX!   

 

 

 

Затем, откроем ЧАНК    s-gallary-profile:  

 

 

И на всякий случай заменим копированием файлы сценариев: (Как и для СЕРТИФИКАТОВ)

 

 

    Отлично! Проверяем! Работает!   

 

 

Возможно тут "Перескок" в инструкции, но я продолжу логику посадки, и заменим наши "ЖЕСТКИЕ ССЫЛКИ к картинкам"

на    [ placeholder ]  

Это уже готовый плейсхолдер:

 

 

ПО сути ВСЕ! Полностью посадили Галерею на MODX.

( Причем инструкции по созданию вложенного чанка и дополнительного поля - у нас получились ниже )

 

Смотрим схему:

 

 

 

 

 

 

 

И прям во время  редактирования чанка: создаем  категорию:  для Галереи:

 

 

 

И уже можем выбрать эту категорию при создании нашего ПОД-ЧАНКА    galleryItem    :  (Завершаем создание чанка)

 

 

Готово! Это под-чанк     galleryItem   

 

Но мы еще его отредактируем:

 

 

Отредактируем его так:

 

 

 

 

 

И далее создадим   "Дополнительное поле"   с именем

tvname=gallary

 

 

 

заполним поля:

 

 

И параметры ввода:

 

 

и  заголовки Таблицы:

 

 

 

И не забываем последнюю вкладку:

 

 

Теперь собственно  создадим (galleryImage) - Дополнительное поле, которое мы упомянули в КОДЕ    "Вкладки формы" - Дополнительного поля     gallery 

но которого физически еще не существует:

 

 

Создаем:

 

 

 

 

 

   Остальнольное НИЧЕГО НЕ ТРОГАЕМ! Сохраняем!  

 

Если мы обновим страницу - то Фото-в Галерее быть не должно!

Галерею будем сейчас наполнять:

 

   Для этого пойдем в Редактирование главной страницы:  

 

 

 

И далее прокопируем Элементы галереи:

 

 

И если мы уже внесли изменения в код ( HTML + Common.js )

по отлаженной технологии  Gulp (инструкции выше) -

то ПОЛНАЯ ПОСАДКА Галереи у нас ЗАВЕРШЕНА и РАБОТАЕТ! 

 

 

И рабочая ГАЛЕРЕЯ на MODX:

 

 

 

  Теперь давайте также сделаем вывод для СЕРТИФИКАТОВ: 

 

 

С начала мы все отладили на   Gulp 

 

И все заработало без прямых ссылок на Изображения сертификатов - и работает уже с помощью   common.js 

 

Так это выглядит для Gulp:

 

 

Прекрасно, теперь - что бы внедрить такую же возможность для посаженного на MODX сайта, делаем следующее:

 

   Заменяем старые файлы Движка  - новыми из Gulp:  

 

 

затем, GO в ЧАНК      s-gallery-profile   

Нам необходимо ИСПРАВИТЬ HTML-код для Сертификатов:

 

 

 

 

И теперь доделаем полную посадку СЕРТИФИКАТОВ:

 

GO в ЧАНК    s-gallery-profile  

 

Делаем так:

 

 

 

Создадим вложенный чанк:    certificateItem   

 

 

Заходим в него и настраиваем:

 

 

 

Собственно создаем Дополнительное поле :

   [[+certificateImage]]  

с Русскоязычной подписью "Сертификат" (Вкладка "Общая информация")

 

 

 

Остальные настройки Дополнительного поля - не трогаем! 

 

А вот теперь, уже создаем дополнительное поле (MIGX)

&tvname=certificate

 

Далее, следующая вкладка:

 

 

и еще

 

 

Закончили создание Дополнительных полей,

 

Переходим на :

 

"Ресурсы" -> "Главная страница(1)" -> "Дополнительные поля" -> "Галерея-azorr" (Категория) -> "Галерея-Фото"

 

 

И заполним уже поле MIGX - из Админки MODX:

 

 

 

 

Закончили

 

И можем теперь выбирать любые картинки прямо из Админки:

 

 

   Законочили посадку Галереи на MODX!