[maxbutton id="12" url="#shema_posadka_gallery" text="Схема полной посадки Галереи" ]
[maxbutton id="12" url="#gallereya" text="Посадка Галлереи на MODX" ]
[maxbutton id="15" url="#end" text="Go в КОНЕЦ" ]
[maxbutton id="14" text="Посадка - Темной ЦИФРОВОЙ ПОЛОСЫ" ]
на MODX с помощью
Создадим КАТЕГОРИЮ:
Элементы -> Категории
Теперь создадим новое дополнительное поле для ТЕМНОЙ ЦИФРОВОЙ ПОЛОСЫ: Это будет поле MIGX - которое будет содержать параметры Item-мов.
Создадим дополнительное поле:
Заполним поля:
И Опять берем migx-sample:
Правильная редакция 1-й части кода:
|
1 2 3 4 5 6 7 8 9 10 11 |
* * Tabs: (Вкладки формы:) [ {"caption":"", "fields": [ {"field":"number","caption":"Цифра бегущая"}, {"field":"text","caption":"Заголовок у цифры"}, {"field":"description","caption":"Описание под цифрой","inputTVtype":"textarea"} ]} ] * |
Продолжаем заполнять "Дополнительное поле"
Правильная редакция такая:
|
1 2 3 4 5 6 7 8 9 |
* * [ {"header": "Цифра бегущая", "sortable": "true", "dataIndex": "number"}, {"header": "Заголовок у цифры", "sortable": "true", "dataIndex": "text"}, {"header": "Описание под цифрой", "sortable": "true", "dataIndex": "description"} ] * * |
ЗДЕСЬ ВСЕ ПРАВИЛЬНО
Назовем кнопочку По понятнее))
И заполняем поля:
Обратим внимание!
Что через MIGX - мы выводим дополнительные поля для страницы - НО НЕ РЕСУРСЫ!
Если нам нужно вывести РЕСУРСЫ - то их нужно выводить не через MIGX, а через простое дерево ресурсов. В том случае, если у нас на каждый ресурс - должна быть внутренняя страница, что бы у нас не было не задействованный URL.
И дозаполним все остальные блоки ЦИФР:
Теперь нам нужно это вывести:
Идем в соответствующий чанк:
Рабочий код из (ikon-media):
|
1 2 3 4 5 6 7 8 9 |
* * [[getImageList? &tvname=`Digital-Dark-Line` &tpl=`Digital-Dark-Line-item` &docid=`1` &limit=`4`]] * * |
Создадим чанк:
И вставим код в чанк:
Вставляем код и заполняем поля чанка:
И так выглядит ГЛАВНЫЙ ЧАНК - нашей
ТЕМНОЙ ПОЛОСЫ БЕГУЩИХ ЦИФР
ГОТОВО - обновляем - и проверяем вывод чанка:
Чуть поправим недочеты:
А в основном чанке:
Теперь наполним информацией уже все элементы:
Сразу кладу полный код уже с холдерами:
|
1 2 3 4 5 6 7 8 9 10 |
* * <div class="col-md-3 col-sm-6"> <div class="s-adv-item"> <h3><span data-count="[[+number]]"></span> [[+text]]</h3> <p>[[+description]]</p> </div> </div> * * |
Коды холдеров:
|
1 2 3 4 5 |
* * [[+number]] * * |
|
1 2 3 4 5 |
* * [[+text]] * * |
|
1 2 3 4 5 |
* * [[+description]] * * |
Готово!
Обновим сайт на MODX - и увидим вывод ПОЛОСЫ с БЕГУЩИМИ ЦИФРАМИ:
(в уроке была проблема с пробелом между 250 и 000 - но я сделал все сразу правильно - указал цифру 250000 - без пробела - поскольку пробел мы делаем java-скриптом)
И побалуемся) Проверим как могли бы выводиться больше рядов ЦИФР:
И все отлично выводится))
Отлично, Полосу с Бегущими цифрами посадили.
[maxbutton id="12" text="Посадка Фото-Галлереи на MODX" ]
Обратим внимание, что у нас 2 пункта списка уже повторяются с теми что мы уже вывели в < header >
Вот как мы выкрутимся:
GO в ЧАНК header
из него мы можем скопировать уже ранее сделанный вывод:
Переходим в ЧАНК s-gallery-profile:
И вставляем код вывода в место пунктов списка:
Финальный код вывода:
|
1 2 3 4 5 |
[[getImageList? &tvname=`home-list` &tpl=`@CODE: <li><i class="fa fa-plus"></i>[[+title]]</li>` &docid=`1` &limit=`2`]] |
Теперь сделаем вывод ЗАГОЛОВКА:
и текст заодно выведем:
Создадим ДОПОЛНИТЕЛЬНОЕ ПОЛЕ ДЛЯ ЗАГОЛОВКА:
И сразу создадим ДОПОЛНИТЕЛЬНОЕ ПОЛЕ для текста:
Не вывода - а ВВОДА (Я ИСПРАВИЛ) - А ТО НЕ ПОЯВЛЯЛСЯ РЕДАКТОР для ввода текста
И теперь идем в НАШИ ПОЛЯ:
Тут скрин - еще без РЕДАКТОРА ТЕКСТА (но смысл ясен)
Наполним их:
Теперь давайте их выведем: С помощью [Pdofield]
- что бы данный вывод можно было бы свободно применять и на ДРУГИХ СТРАНИЦАХ (а не только на главной)
|
1 2 3 4 |
* * [[pdoField? &docid=`1` &field=`text_gallery`]] * |
Сохраним и наблюдаем ВЫВОД Заголовка + Текста:
Давайте исправим:
Отлично - теперь вывод Заголовка + Текста так как нужно!
Тут мы перескакивали и теперь сосредоточимся на Галерее:
Теперь займемся посадкой самой ГАЛЛЕРЕИ:
Делаем Аналогично как мы делали с Выводом изображений СЕРТИФИКАТОВ: (Инструкция для сертификатов - ниже этой записи)
Т.е Отладили работу вывода картинок (Независимых) на Gulp!
А вот теперь ПРИМЕНИМ наши обновленные коды (HTML + common.js) уже в Админке MODX!
Затем, откроем ЧАНК s-gallary-profile:
И на всякий случай заменим копированием файлы сценариев: (Как и для СЕРТИФИКАТОВ)
Отлично! Проверяем! Работает!
Возможно тут "Перескок" в инструкции, но я продолжу логику посадки, и заменим наши "ЖЕСТКИЕ ССЫЛКИ к картинкам"
на [ placeholder ]
Это уже готовый плейсхолдер:
|
1 2 3 4 5 6 7 |
* * [[getImageList? &tvname=`gallery` &tpl=`galleryItem` &docid=`1`]] * |
ПО сути ВСЕ! Полностью посадили Галерею на MODX.
( Причем инструкции по созданию вложенного чанка и дополнительного поля - у нас получились ниже )
|
1 2 3 4 |
* * [[phpthumbof? &input=`[[+galleryImage]]` &options=`&w=1200&h=680&zc=1`]]" data-preview="[[phpthumbof? &input=`[[+galleryImage]]` &options=`&w=640&h=363&zc=1`]] * |
И прям во время редактирования чанка: создаем категорию: для Галереи:
И уже можем выбрать эту категорию при создании нашего ПОД-ЧАНКА galleryItem : (Завершаем создание чанка)
Готово! Это под-чанк galleryItem
Но мы еще его отредактируем:
Отредактируем его так:
|
1 |
<a href="[[phpthumbof? &input=`[[+galleryImage]]` &options=`&w=1200&h=680&zc=1`]]" data-preview="[[phpthumbof? &input=`[[+galleryImage]]` &options=`&w=640&h=363&zc=1`]]"></a> |
И далее создадим "Дополнительное поле" с именем
tvname=gallary
заполним поля:
И параметры ввода:
|
1 2 3 4 5 6 |
[ {"caption":"Информация о картинке", "fields": [ {"field":"title","caption":"Название"}, {"field":"galleryImage","caption":"Картинка","inputTV":"galleryImage"} ]} ] |
и заголовки Таблицы:
|
1 2 3 4 |
[ {"header": "Название", "sortable": "true", "dataIndex": "title"}, {"header": "Изображение", "width": "80", "sortable": "false", "dataIndex": "galleryImage","renderer": "this.renderImage"} ] |
И не забываем последнюю вкладку:
Теперь собственно создадим (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!
