Как создать фотогалерею FlexSliderMultiTV на MODx Evo. Evogallery modx evo
|
Параметр |
Описание |
По умолчанию |
Пример |
|
&display |
Вывод результатов работы сниппета, как галереи, так и отдельного излбражения. Возможные значения: galleries, images, single |
images |
&display=` single ` |
|
&type |
Тип вывовда, если указано, фрагмент автоматически загрузит необходимый javascript. Возможные значения simple-list, single, jquery-cycle, simple-list
|
simple-list |
&type=` single ` |
|
& includeAssets |
Регистрация внешних скриптов и CSS файлов, необходимых для указанного типа галереи. Если установлено в 0, они должны быть включены вручную в <head>
|
1 |
& includeAssets=`0` |
|
&picId |
Идентификатор конкретного рисунка, показывается при отображении одного изображения |
$ _REQUEST ['picId'] |
|
|
&docId |
ID документа, для которого отображаются картинки (по умолчанию: документ, из которого галерея вызывается). Для вызова галереи из нескольких документов id можно указать через запятую (без пробелов), или * для всех документов |
$modx->documentIdentifier |
&docId=`5` |
|
&gallerySortBy |
Указывает по какому полю сортировать галереи. Доступные поля (id, pagetitle, longtitle, description, alias, pub_date, introtext, editedby, editedon, publishedon, publishedby, menutitle) или RAND() |
menuindex |
&gallerySortBy=` longtitle ` |
|
&gallerySortDir |
Направление сортировки галереи. Возможные варианты ASC или DESC |
ASC |
&gallerySortDir=` DESC ` |
|
&ignoreHidden |
Показывать документы, помеченные как скрытые |
0 |
&ignoreHidden=`1` |
|
&excludeDocs |
Не показывать в галереи документы с определенными id (без пробелов) |
0 |
&excludeDocs=`8` |
|
&sortBy |
Указывает по какому полю сортировать элементы. Доступные поля (id, content_id, filename, title, description, sortorder) or RAND() |
sortorder |
&sortBy=` content_id ` |
|
&sortDir |
Направление сортировки элементов. Возможные варианты ASC или DESC |
ASC |
&sortDir=` DESC ` |
|
&limit |
Ограничить количество отображаемых элементов |
null |
&limit=`5` |
|
&tags |
Разделенный запятыми набор тегов для фильтрации результатов. Смотрит в поле ключевых слов для изображений. |
null |
&tags=`images, images1` |
|
|
Форма поиска для тега AND или OR |
AND |
&tagMode=`OR` |
|
&tpl |
Чанк для всей галереи (по умолчанию tpl.default.txt для выбранного типа) Плейсхолдеры: элементы |
$this->config['snippetPath'] . $this->config['type'] . '/tpl.default.txt' |
|
|
&itemTpl |
Чанк для каждых миниатюры/изображения элементов галереи |
$this->config['snippetPath'] . $this->config['type'] . '/tpl.item.default.txt' |
|
|
&itemTplFirst |
Чанк для первых миниатюры/изображения элемента галереи (по умолчанию tpl.item.first.txt для выбранного типа) |
$this->config['snippetPath'] . $this->config['type'] . '/tpl.item.first.txt' |
|
|
&itemTplLast |
Чанк для последних миниатюры/изображения элемента галереи (по умолчанию tpl.item.last.txt для выбранного типа) |
$this->config['snippetPath'] . $this->config['type'] . '/tpl.item.last.txt' |
|
|
&itemTplAlt |
Чанк для альтернативных миниатюры/изображения элемента галереи (по умолчанию tpl.item.alt.txt для выбранного типа) |
$this->config['snippetPath'] . $this->config['type'] . '/tpl.item.alt.txt' |
|
|
&itemAltNum |
Модификатор для альтернативных миниатюры/изображения элемента галереи (по умолчанию каждый второй пункта) |
2 |
&itemAltNum=`4` |
|
&galleriesUrl |
URL к директории галереи (должен содержать папки с Id документа, с превью / папки в галерее каждого документа) |
$modx->config[ 'base_url' ] . 'assets/galleries/' |
|
|
&galleriesPath |
Путь к каталогу галереи |
$modx->config[ 'base_path' ] . 'assets/galleries/' |
|
|
&snippetUrl |
Url к директории сниппета |
$modx->config[ 'base_url' ] . 'assets/snippets/evogallery/' |
|
|
&snippetPath |
Путь к директории сниппета |
$modx->config[ 'base_path' ] . 'assets/snippets/evogallery/' |
|
|
&id |
Уникащьный идентификатор галереи и уникальный параметр Url |
|
|
|
&paginate |
Разбивать результат на страницы |
0 |
&paginate=`1` |
|
&paginateAlwaysShowLinks |
Определяет являются ли указатели «следующая» и «предыдущая» с |
0 |
&paginateAlwaysShowLinks =`1` |
|
&show |
Количество отображаемых элементов при разбиении на страницы |
20 |
&show=`15` |
|
&paginateNextText |
|
Next |
|
|
&paginatePreviousText |
Текст для ссылки «предыдущая» |
Previous |
|
|
&tplPaginatePrevious |
Шаблон для ссылки «предыдущая» |
<a href='[url]' class ='eg_previous_link'> [PagimnatePreviosText] </a> |
|
|
&tplPaginateNext |
Шаблон для ссылки «следующая» |
<a href='[url]' class ='eg_next_link'> [ PagimnateNextText]</a> |
|
|
&tplPaginateNextOff |
Шаблон для внутренней ссылки «следующая» |
<span> [ PagimnateNextText] </span> |
|
|
&tplPaginatePreviousOff |
Шаблон для внутренней ссылки «предыдущая» |
<span> [PagimnatePreviosText] </span> |
|
|
&tplPaginatePage |
Шаблон для ссылки на страницу |
<a href='[url]'>[page]</a> |
|
|
&tplPaginateCurrentPage |
Шаблон для текущей ссылки |
<span> [page]</span> |
|
freelgraf.in.ua
Внимание! Информация на этой странице носит ознакомительный характер. Полная версия учебного пособия доступна слушателям он-лайн курса "Сайт своими руками" и является частью учебной программы Записаться на курс!За вывод фотографий из фотогалереи отвечает сниппет EvoGallery. Как использовать сниппет можно прочитать в документации.
Нам понадобятся два шаблона вывода. Один для главной страницы фотогалереи, в правой колонке будет располагаться меню-список фотогалерей, в левой расположим фотографии-ссылки на галереи. Второй шаблон будет отвечать за страницу одной галереи, справа будет также располагаться меню галерей а в левой колонке кликабельные фотографии этой галереи. Чтобы было более понятно, можно посмотреть как устроены галереи на сайте okarinashop.ru.
Создаем шаблон Фотогалерея главная из копии шаблона Типичка. Изменяем название чанков LEFT-COL и RIGHT-COL на LEFT-COL-GAL-MAIN и RIGHT-COL-GAL соответственно
Шаблон Фотогалерея главная
Из копии чанка RIGHT-COL создаем чанк RIGHT-COL-GAL и в него добавляем вызов сниппета Wayfinder с параметрами
<div> {{ORDER}} <div> <div> [!Wayfinder? &startId=`5` &level=`1`!] </div> </div> <div> <h2><span>Акции</span></h2> <a href="#"><img src="okarina/images/action.jpg" alt=""></a> <p>Движение спутника периодично. Симметрия ротора вращает колебательный гироскопический прибор, составляя уравнения Эйлера для этой системы координат <a href="#">подробнее</a></p> </div> </div>Мы указали идентификатор ресурса фотогалерея в параметре startId, чтобы сниппет выводил в меню ссылки только на галереи
Из копии чанка LEFT-COL создаем чанк LEFT-COL-GAL-MAIN и добавляем в него вызов сниппет EvoGallery
<div> <div> <h2><span>[*pagetitle*]</span></h2> [*content*] </div> <div> [!EvoGallery? &display=`galleries` &itemTpl=`gal-cat`!] <div></div> </div> </div>В параметре display мы указали, что хотим выводить ссылки на галереи, а не на фотографии, а в параметре itemTpl указали чанк с шаблоном вывода. Таким образом нам необходимо создать шаблон вывода ссылки ведущей на ту или иную галерею
Создаем новый чанк gal-cat со кодом
<div> <a href="[~[+id+]~]" title="[+title+]"><img src="[+thumbs_dir+][+filename+]" alt="[+title+]"></a> <p>[+pagetitle+]</p> </div>где:
- [~[+id+]~] - адрес страницы галереи
- [+title+] - заголовок фотографии, его можно написать при редактировании фотографии в модуле
- [+thumbs_dir+] - путь к директории с картинка галереи
- [+filename+] - название файла первой картики в галерее
Ресурсу Фотогалерея присваиваем шаблон Фотогалерея главная
Шаблон Фотогалерея главная присваиваем ресурсу Фотогалерея
На сайте кликаем по ссылке фото в главном меню чтобы посмотреть что получилось
публикация/редактирование: 12 февраля 2016 г.
digitaltutor.ru
| Как создать фотогалерею FlexSliderMultiTV на MODx Evo | Уроки MODx Evo
В данной статье-уроке рассматривается нижеприведенный пример создания адаптивной фотогалереи FlexSliderMultiTV для CMS MODx Evo.
Река Адуй. Фото 1
Текст к фотографии 1
Река Адуй. Фото 2
Текст к фотографии 2
Река Адуй. Фото 3
Текст к фотографии 3
Река Адуй. Фото 4
Текст к фотографии 4
Река Адуй. Фото 5
Текст к фотографии 5
Река Адуй. Фото 6
Текст к фотографии 6
1. В системе должен быть установлен сниппет MultiTV, если он у Вас не установлен, инструкцию можно прочитать здесь, и на этой же странице можно скачать дистрибутив сниппета.
2. Скачать дистрибутив галереи FlexSliderMultiTV можно здесь.
3. Установите FlexSliderMultiTV через PackageManager. Как установить PackageManager и скачать дистрибутив можно здесь.
4. В ходе установки установщиком были созданы чанки flexslider-css и flexslider-js, а также tv-параметр flexslider.
5. Создайте шаблон FlexSliderMultiTV. В код шаблона вставьте следующие конструкции:
- в <head> добавьте {{flexslider-css}}
- перед закрывающим </body> добавьте {{flexslider-js}}
6. Назначьте tv-параметр flexslider созданному шаблону FlexSliderMultiTV.
7. Создайте ресурс с шаблоном FlexSliderMultiTV для вывода фотогалереи. Добавьте в этот ресурс вызов сниппета MultiTV:
[[multiTV? &tvName=`flexslider` &display=`all`]]
8. Внизу ресурса должна появиться группа tv-параметров для данной галереи. Можно исправить английские имена на русские.
Для этого откройте файл flexslider.config.inc.php из папки assets/tvs/multitv/configs и внесите изменения. Не забудьте проверить кодировку файла. При необходимости преобразуйте ее в UTF-8. В блокноте Notepad++ это делается командой Кодировки – Преобразовать в UTF-8. При другой кодировке русские символы в админке могут исказиться.
Результат на рисунке ниже.
9. Добавьте несколько изображений и тексты в поля. Фото можно скачать здесь.
10. Обновите страницу, на которой должна быть выведена галерея.
11. Стили оформления галереи правим в файле flexslider.css из папки assets/templates/common/js/flexslider.
Источники:http://www.tattoocms.it/extras/multitvs/flexslider-multitv-for-modx-evolution.htmlhttps://github.com/Nicola1971/FlexSlider-MultiTV#readme
web-grafika.pro
Внимание! Информация на этой странице носит ознакомительный характер. Полная версия учебного пособия доступна слушателям он-лайн курса "Сайт своими руками" и является частью учебной программы Записаться на курс!Раздел фото на сайте будет содержать фотогалереи с различных событий в которых мастерская принимала участие. В админке должна быть возможность создавать новые фотогалереи и удобно загружать в них фотографии. Необходимо обеспечить возможность пакетной загрузки фотографий, быстрой сортировке и т. д.
Названия фотогалерей мы разместим в правой колонке в виде меню, по внешнему виду идентичному меню категорий в разделе каталог.
В левой колонке на главной странице раздела фото, будут отображаться кликабельные ссылки в виде фотографий, ведущие на ту или иную фотогалерею. По внешнему виду они будут похожи на карточки товаров в каталоге.
Меню галереи
Кроме того, в подвале на каждой странице сайта мы будем выводить шесть случайных фотографий из фотогалерей.
Случайные фотографии из галереи в подвале страницы
Чтобы установить модуль EvoGallery открываем репозиторий Модули -> Extras, в строке поиска вводим evogallery и устанавливаем модуль
Установка EvoGallery из репозитория MODX
За загрузку и настройки изображений отвечает модуль EvoGallery: Модули -> EvoGallery, при помощи которого вы сможете добавлять фотографии в фотогалерею, упорядочивать их, подписывать их, присваивать им теги и т.д.
Модуль EvoGallery после установки
Создадим несколько дочерних ресурсов в ресурсе Фотогалерея на нашем сайте, например Галерея 1, Галерея 2 и Галерея 3
публикация/редактирование: 12 февраля 2016 г.
digitaltutor.ru
| Как создать фотогалерею NivoSlider MultiTV на MODx Evo | Уроки MODx Evo
В данной статье-уроке рассматривается нижеприведенный пример создания адаптивной фотогалереи NivoSlider MultiTV на MODx Evo.
1. В системе должен быть установлен сниппет MultiTV, если он у Вас не установлен, инструкцию можно прочитать здесь, и на этой же странице можно скачать дистрибутив сниппета.
2. Скачать дистрибутив галереи NivoSlider MultiTV можно здесь.
3. Установите NivoSlider MultiTV через PackageManager. Как установить PackageManager и скачать дистрибутив можно здесь.
4. В ходе установки установщиком были созданы чанки nivoslider-css и nivoslider-js, а также tv-параметр nivoslider.
5. Создайте шаблон NivoSlider MultiTV. В код шаблона перед закрывающим </body> добавьте следующий код:
– в теге <head> {{nivoslider-css}}
– перед закрывающим </body> {{nivoslider-js}}
6. Назначьте tv-параметр nivoslider созданному шаблону NivoSlider MultiTV.
7. Создайте ресурс с шаблоном NivoSlider MultiTV для вывода фотогалереи. Добавьте в этот ресурс вызов сниппета MultiTV:
[[multiTV? &tvName=`nivoslider` &display=`all`]]
8. Внизу ресурса должна появиться группа tv-параметров для данной галереи.
9. Добавьте несколько изображений и тексты в поля. Фото можно скачать здесь.
10. Обновите страницу, на которой должна быть выведена галерея.
11. Стили оформления галереи правим в файле nivo-slider.css из папки assets/templates/common/js/nivoslider.
Дистрибутив адаптивной галереи NivoSlider в исходном варианте можно скачать на странице NivoSlider (адаптивный слайдер)
Источник:http://www.tattoocms.it/extras/multitvs/nivoslider-multitv-for-modx-evolution.html
web-grafika.pro
Как создать пагинацию в evogallery в modx evo, пошаговая инструкция
Пошаговая инструкция как создать пагинацию в evogallery.(Внимание, здесь описано как установить пагинацию (отображение определенного кол-ва фотографий в альбоме), как устанавливать и настраивать evogallery вы сможете найти на других ресурсах)В шаблоне вашей темы (а лучше создать отдельный шаблон для вывода галереи) , там где выводим контент вставляем:
<div><div>[[Breadcrumbs ]]</div><h2>[*pagetitle*]</h2><div></div>[[EvoGallery? &show=`5` &paginate=`1`]]<br/><div>[+pages+]</div></div>
где &show='5' -это кол-во фотографий, которые будут отображатся в галерее.
Какие чанки нужно создать:
item_list_galery1содержимое чанка:<div><div><a href="[~[+id+]~]">[+pagetitle+]</a></div><a href="[~[+id+]~]" title="[+title+]"><img src="[+thumbs_dir+][+filename+]" alt="[+title+]" /></a></div>
В файл css добавляем
/* стиль для отображения пагинации в evogallery */.pagination-gallery{margin-top:0px;color:#A42308;font-size:15px;}.pagination-gallery a {text-decoration:none;color:white;background-color:#A42308; border:0px solid #DFCFB8; padding: 1px 4px; margin:13px; border-radius:4px;font-size:15px; }.pagination-gallery a:hover {text-decoration:none;}
И Самое главное, что бы пагинация работала ,незабываем отключить кэширование ресурса у страницы.
Интересные статьи
mrwebs.ru
