Webdesign Создание сайта Part-6 Посадка на MODX

[maxbutton id="12" url="#item_posadka" text="Посадка Item-секции на MODX" ]

[maxbutton id="12" url="#big-gallery" text="Выполненные работы - Большая галерея" ]

[maxbutton id="15" url="#end" text="GO в Конец" ]

Далее,

[maxbutton id="14" text="Посадка Item-секции на MODX" ]

Данная посадка будет отличаться от той что делали раньше:

Суть в том - что у данной Item-секции будут свои внутренние страницы.

И каждый такой Item :

Мы будем заполнять чуть по другому:

С помощью PdoResources

Начнем:

Создадим КАТЕГОРИЮ (4-ю по счету, но я не счиитаю)

И оставшийся Item - тоже вырежем и вынесем в отдельный чанк:

Готовые плейсхолдеры:

[[pdoResources? &parents=`0` &tpl=`Item_directTpl` &limit=`3` &resources=`5,6,7`]]

1	[[pdoResources? &parents=`0` &tpl=`Item_directTpl` &limit=`3` &resources=`5,6,7`]]

Сохраним и посмотрим - что выводиться:

[[+pagetitle]]

1	[[+pagetitle]]

И имеем уже разные заголовки:

Но иконки пока одинаковые)

И порядок вывода у нас тут ОБРАТНЫЙ - это исправим!

Полный код такой теперь:

*
*
[[pdoResources? &parents=`0` &tpl=`Item_directTpl` &limit=`3` &resources=`5,6,7` &sortdir=`asc`]]
*

[[pdoResources? &parents=`0` &tpl=`Item_directTpl` &limit=`3` &resources=`5,6,7` &sortdir=`asc`]]

Далее заполним я так понимаю ВЛОЖЕННЫЕ страницы:

Монтаж

Проектирование

Оборудование

У нас будет ОДИН - ШАБЛОН для всех внутренних страничек:

И еще создадим ДОПОЛНИТЕЛЬНОЕ ПОЛЕ:

Оно будем универсальным (т.е. не только для наших вложенных страничек) - но и для любых страничек:

Однако Шаблон укажем только "Внутренняя страница"

ОТЛИЧНО! Теперь GO в Страничку "МОНТАЖ":

И что бы эта Иконка SVG - у нас выводилась - внесем правки в

И это еще не достаточно для вывода ИКОНОК-SVG

GO в s-direct

И это БЛЯЯТЬ - еще не все! Нужно исправить ошибку в Чанке

Item_directTpl

Теперь - Обновим и увидим ИКОНКУ:

Рекомендует ознакомиться со всеми фильтрами - Мол - очень интересно, и почти все они нужны в работе.

И дальше заполним наш Чанк

Проверили - Работает!

Дозадолним недостающие иконки:

Переходим в следующую ВНУТРЕННЮЮ СТРАНИЧКУ:

"ПРОЕКТИРОВАНИЕ"

Тоже самое делаем со страничкой "ОБОРУДОВАНИЕ"

Еще раз напоминаем: Почему мы использовали для вывода именно PdoResources

а не MIGX - потому, что у нас имеются ВНУТРЕННИЕ СТРАНИЦЫ у каждого Item-ма.

Или например, если у нас по кнопке планируется ССЫЛКА - то тоже используем PdoResources

Далее,

[maxbutton id="12" text="Выполненные работы - Большая галерея" ]

Эту:

ее будем садить с помощью плагина: MIGX:

И наши всплывающие окна:

Вспомним, что у каждого Item-ма есть скрытый контейнер, который делается видимым в нужное время с помощью плагина

Magnific PopUp, при клике на Item.

GO в соответсвующий ЧАНК:

Начнем посадку: с создания "НОВОЙ КАТЕГОРИИ"

Затем новое "Дополнительного поля"

Опять используем:

Сразу поставь видимость в ШАБЛОНЕ - потому, что дальше большой раздел редактирования поля MIGX

теперь займемся именно MIGX:

Вкладки формы:

*
*
[
{"caption":"Выполненная работа", "fields": [
{"field":"title","caption":"Заголовок работы"},
{"field":"address","caption":"Адрес"},
{"field":"description","caption":"Работы"},
{"field":"imagePortfolio","caption":"Изображение","inputTV":"imagePortfolio"}
]}
]
*

[

{"caption":"Выполненная работа", "fields": [

{"field":"title","caption":"Заголовок работы"},

{"field":"address","caption":"Адрес"},

{"field":"description","caption":"Работы"},

{"field":"imagePortfolio","caption":"Изображение","inputTV":"imagePortfolio"}

]}

]

Это уже прям для нового ПОРТФОЛИО:

*
*

[
{"caption":"Работа портфолио", "fields": [
{"field":"title","caption":"Название работы"},
{"field":"link_web","caption":"Ссылка на сайт"},
{"field":"title_info","caption":"Заголовок на ховер"},
{"field":"text_info","caption":"Описание на ховер"},
{"field":"Preview_imagePortfolio","caption":"Превью изображение","inputTV":"Preview_imagePortfolio"},
{"field":"Big_imagePortfolio","caption":"Большое изображение","inputTV":"Big_imagePortfolio"}
]}
]

*
*

[

{"caption":"Работа портфолио", "fields": [

{"field":"title","caption":"Название работы"},

{"field":"link_web","caption":"Ссылка на сайт"},

{"field":"title_info","caption":"Заголовок на ховер"},

{"field":"text_info","caption":"Описание на ховер"},

{"field":"Preview_imagePortfolio","caption":"Превью изображение","inputTV":"Preview_imagePortfolio"},

{"field":"Big_imagePortfolio","caption":"Большое изображение","inputTV":"Big_imagePortfolio"}

]}

]

Разметка колонок:

*
*
[
{"header": "Заголовок", "sortable": "true", "dataIndex": "title"},
{"header": "Изображение", "width": "80", "sortable": "false", "dataIndex": "imagePortfolio","renderer": "this.renderImage"}
]
*

[

{"header": "Заголовок", "sortable": "true", "dataIndex": "title"},

{"header": "Изображение", "width": "80", "sortable": "false", "dataIndex": "imagePortfolio","renderer": "this.renderImage"}

]

и для портфолио:

*
*

[
{"header": "Название работы", "sortable": "true", "dataIndex": "title"},
{"header": "Заголовок на ховер", "sortable": "true", "dataIndex": "title_info"},
{"header": "Описание на ховер", "sortable": "true", "dataIndex": "text_info"},
{"header": "Превью изображения", "width": "80", "sortable": "false", "dataIndex": "Preview_imagePortfolio","renderer": "this.renderImage"},
{"header": "Большое изображение", "width": "80", "sortable": "false", "dataIndex": "Big_imagePortfolio","renderer": "this.renderImage"},
{"header": "Ссылка", "sortable": "true", "dataIndex": "link_web"}
]

*
*

[

{"header": "Название работы", "sortable": "true", "dataIndex": "title"},

{"header": "Заголовок на ховер", "sortable": "true", "dataIndex": "title_info"},

{"header": "Описание на ховер", "sortable": "true", "dataIndex": "text_info"},

{"header": "Превью изображения", "width": "80", "sortable": "false", "dataIndex": "Preview_imagePortfolio","renderer": "this.renderImage"},

{"header": "Большое изображение", "width": "80", "sortable": "false", "dataIndex": "Big_imagePortfolio","renderer": "this.renderImage"},

{"header": "Ссылка", "sortable": "true", "dataIndex": "link_web"}

]

Теперь создадим еще "ДОПОЛНИТЕЛЬНОЕ ПОЛЕ", которое мы прописали в Дополнительном поле MIGX:

С нашем случае, для НОВОГО ПОРТФОЛИО у нас 2 Дополнительных поля:

1) Превью портфолио

2) Большая картинка Портфолио

Создаем их соответственно:

Тут мы создали "Дополнительное поле" для Превью:

Тут мы создали "Дополнительное поле" для Большой картинки:

Отлично, теперь идем НАПОЛНЯТЬ ПОРТФОЛИО:

Видим успешный вывод полей: (Готовы для заполнения):

Наполняем поля ПОРТФОЛИО:

Заполняем (Это текущая инструкция):

Далее,

идем в ЧАНК ПОРТФОЛИО:

И как обычно удаляем все Item-мы кроме 1-го:

Быстро создадим ВЛОЖЕННЫЙ ЧАНК для Единицы (Item-ма) портфолио:

Далее войдем в этот чанк:

И в место удаленных Item-мов, впишем код:

Это код для НОВОГО ПОРТФОЛИО:

*
*

[[getImageList?
&tvname=`portfolio_migx`
&tpl=`portfolio_item`
&docid=`1`]]

*
*

[[getImageList?

&tvname=`portfolio_migx`

&tpl=`portfolio_item`

&docid=`1`]]

Обновим сайт и увидим:

У нас будет выведено столько картинок портфолио - сколько мы заполнили:

Заполним полностью и будет порядок:

1-Item будет просто размножен и выведен:

Далее идем - во вложенный чанк Item-а:

*
*

[[phpthumbof? &input=`[[+Preview_imagePortfolio]]` &options=`w=640&h=500&zc=1`]]

[[phpthumbof? &input=`[[+Big_imagePortfolio]]` &options=`w=1000&h=600&zc=1`]]

*
*

[[phpthumbof? &input=`[[+Preview_imagePortfolio]]` &options=`w=640&h=500&zc=1`]]

[[phpthumbof? &input=`[[+Big_imagePortfolio]]` &options=`w=1000&h=600&zc=1`]]

Корректные КОДЫ:

*
*
[[phpthumbof? &input=`[[+imagePortfolio]]` &options=`w=640&h=420&zc=1`]]
*

[[phpthumbof? &input=`[[+imagePortfolio]]` &options=`w=640&h=420&zc=1`]]

*
*
[[+title]]


[[+address]]


[[+description]]

*

[[+title]]

[[+address]]

[[+description]]

Сохраняем, Обновляем!

Рубрики:

WEB-Верстка