MIGX bootstrap gallery
Добрый день всем!
Изучаю работу MIGX. Делаю по мануалам, размещенным в интернете, не совсем пока понял разницу между выводом изображения в MIGX способом:
Для способа «inputTV»:«ImageTV» я так понимаю необходимо заранее создать TV типа image? Как ее связать с MIGX?
Можно ли осуществлять вывод MIGX с помощью pdoResourses?
Изучаю работу MIGX. Делаю по мануалам, размещенным в интернете, не совсем пока понял разницу между выводом изображения в MIGX способом:
«Вкладки формы»
{"field":"images","caption":"Изображение","inputTV":"ImageTV"}
«Разметка колонок»
{"header": "Изображение", "sortable": "false", "dataIndex": "images","renderer": "this.renderImage"}
и способом:«Вкладки формы»
{"field":"images","caption":"Изображение","inputTVtype":"image"}
«Разметка колонок»
{"header": "Изображение", "sortable": "false", "dataIndex": "images","renderer": "this.renderImage"}
Способ «inputTVtype»:«image» почему-то не заработал. Может кто подскажет куда копать?Для способа «inputTV»:«ImageTV» я так понимаю необходимо заранее создать TV типа image? Как ее связать с MIGX?
Можно ли осуществлять вывод MIGX с помощью pdoResourses?
Комментарии: 10
В первом случае Вы просто указываете конкретную TV-шку, которую брать в качестве основы для вывода (привязывать к шаблонам ее не обязательно). Удобно, если используется отдельный источник файлов.
Во втором случае вы указываете только тип TV, который использовать. В данном случае источник файлов будет умолчальным.
Но, чтобы не ошибиться можно делать нужный вывод не кодом, а через конфигурации. Оно на первый взгляд кажется сложнее, но зато надежно )).
Идете в MIGX и создаете новую конфигурацию:
![](https://file.modx.pro/files/e/d/6/ed66fc430e85ece39b14436452683c8as.jpg)
Указываете название:
![](https://file.modx.pro/files/4/2/4/424efb19428417d4b8955279caa300a9.jpg)
Добавляете форму:
![](https://file.modx.pro/files/2/6/0/260239df54b6ea7226fc9b6f883350a7.jpg)
и поле нужного типа:
![](https://file.modx.pro/files/9/6/e/96ec4cf97e60b1be30c5dab8631b531f.jpg)
Можете указать свой источник файлов:
![](https://file.modx.pro/files/b/6/f/b6f3bf62b47b3dc80b174e5cc3f4a3cb.jpg)
Сохраняете форму и добавляете нужные колонки и настройки:
![](https://file.modx.pro/files/8/b/b/8bb0f80e6a71f5094dbbe65d1080e745.jpg)
Рендер для поля:
![](https://file.modx.pro/files/6/1/7/617ea3ab92668d09f9e3acf44b61e0b6.jpg)
Если нужно, редактор:
![](https://file.modx.pro/files/5/b/8/5b891238e377b6099f1b46ddd9ef75f5.jpg)
Сохраняете все.
Ну а в TV просто прописываете имя конфигурации:
![](https://file.modx.pro/files/5/9/4/5948e652704f41282e945e8de926c735.jpg)
Для копирования конфигураций можно использовать импорт/экспорт:
![](https://file.modx.pro/files/6/a/5/6a557babea307625c8460657a4a405b0.jpg)
Во втором случае вы указываете только тип TV, который использовать. В данном случае источник файлов будет умолчальным.
Но, чтобы не ошибиться можно делать нужный вывод не кодом, а через конфигурации. Оно на первый взгляд кажется сложнее, но зато надежно )).
Идете в MIGX и создаете новую конфигурацию:
![](https://file.modx.pro/files/e/d/6/ed66fc430e85ece39b14436452683c8as.jpg)
Указываете название:
![](https://file.modx.pro/files/4/2/4/424efb19428417d4b8955279caa300a9.jpg)
Добавляете форму:
![](https://file.modx.pro/files/2/6/0/260239df54b6ea7226fc9b6f883350a7.jpg)
и поле нужного типа:
![](https://file.modx.pro/files/9/6/e/96ec4cf97e60b1be30c5dab8631b531f.jpg)
Можете указать свой источник файлов:
![](https://file.modx.pro/files/b/6/f/b6f3bf62b47b3dc80b174e5cc3f4a3cb.jpg)
Сохраняете форму и добавляете нужные колонки и настройки:
![](https://file.modx.pro/files/8/b/b/8bb0f80e6a71f5094dbbe65d1080e745.jpg)
Рендер для поля:
![](https://file.modx.pro/files/6/1/7/617ea3ab92668d09f9e3acf44b61e0b6.jpg)
Если нужно, редактор:
![](https://file.modx.pro/files/5/b/8/5b891238e377b6099f1b46ddd9ef75f5.jpg)
Сохраняете все.
Ну а в TV просто прописываете имя конфигурации:
![](https://file.modx.pro/files/5/9/4/5948e652704f41282e945e8de926c735.jpg)
Для копирования конфигураций можно использовать импорт/экспорт:
![](https://file.modx.pro/files/6/a/5/6a557babea307625c8460657a4a405b0.jpg)
Спасибо, буду пробовать)) Вы MIGX-поля с помощью чего выводите? PdoTools для этих целей, как я понял, не подходит? правильно?
есть сниппет с migx идет в поставке
getImageList
Разобрался с тем, как выводить сами изображения, а каким образом вывести листалку?
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
копайте в сторону этого решения от Василия Наумкина: ссылка
Как вывести?
data-slide-to="0" class="active"
начиная с нуля и с классом active?Делаю вот так:
[[!getImageList??
&tvname=`ws.images`
&tpl=`@CODE:<li data-target="#myCarousel" data-slide-to="[[+idx]]"></li>`
&limit=`100`
]]
на странице есть GenerateIndicators — это пример, когда из pdoresource подхватывается кол-во картинок/слайдов, чего угодно и генерируется нужное количество переключателей с увеличением порядкового номер на 1
комментарий от самого разработчика
комментарий от самого разработчика
Сниппет принимает общее количество картинок слайдера и генерирует индикаторы для переключения:как сделать конкретно в вашем случае — пробуйте, я стараюсь обходить подобные слайдеры из-за таких вот наворотов лишних. в частности юзаю owl-carusel как раз в связке с migx для слайдера
интересует больше вывод с помощью getImageList, осталось только разобраться как заставить +idx начинать не с 1, а с нуля + как добавить класс active к нулевому индикатору
Недавно прикручивал себе слайдер от бутстрапа к migx… В общем смотри
Чанк: slider_main
Чанк: slider_main_indicators
И сниппет defone (который как раз и вычитает от idx единичку)
<div id="carousel_top" class="carousel slide border_box" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
[[!getImageList?
&tvname=`slider_main`
&tpl=`slider_main_indicators`
&docid=`[[*id]]`
]]
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
[[!getImageList?
&tvname=`slider_main`
&tpl=`slider_main`
&docid=`[[*id]]`
]]
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel_top" data-slide="prev"></a>
<a class="right carousel-control" href="#carousel_top" data-slide="next"></a>
</div>
Чанк: slider_main
<div class="item [[+idx:is=`1`:then=`active`]]" >
<img src="[[+image]]">
</div>
Чанк: slider_main_indicators
<li data-target="#carousel_top" data-slide-to="[[!defone? &input=`[[+idx]]`]]" [[+idx:is=`1`:then=`class="active"`]]></li>
И сниппет defone (который как раз и вычитает от idx единичку)
<?php
return $input = $input-1;
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.