[MODx, Gallery] Галерея. Вывести обложки альбомов и фотографии
Для началу устанавливаем пакет Gallery.
Вывести обложки альбомов и фотографии
Примерно так, только не забудьте поменять чанки:
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`1` &rowTpl=`galAlbumRowTpl` ]] [[!Gallery? &toPlaceholder=`Gallery` &checkForRequestTagVar=`1` &useCss=`0` &containerTpl=`GalleryAlbumTpl` &thumbTpl=`galItemThumb`]] [[+Gallery:isnot=``:then=`<div>[[+Gallery]]</div>`:else=`<ul>[[+GalleryAlbums]]</ul>`]]
Особый (отдельный) шаблон для первой или какой-то определенной фото
Есть 2 варианта, который вы можете захотеть. Можете захотеть выводить каждый третий, или каджый второй элемент с особым шаблоном. И если так, то вам достаточно просто указать этот шаблон в &thumbTpl_2=`gallery_tpl_custom`, и все будет работать (нумерация будет пойдет с единицы (&thumbTpl_1)).
Но если у вас друга задача вывести только для картинки под определенным номером отдельный шаблон. К примеру только для первой, то в такой случае придется залезть в код сниппета Gallery и слегка его подправить в двух местах.
//...
if (isset($keyBits[0]) && $keyBits[0] === 'thumbTpl') {
//if ($i = (int) $keyBits[1]) $nthTpls[$i] = $scriptProperties[$key]; // Эту строчку убирам
$nthTpls[(int) $keyBits[1]] = $scriptProperties[$key]; // Эту строчку добавляем
}
//...
//...
$thumbTpl = $defaultThumbTpl;
if (isset($nthTpls[$idx])) {
$thumbTpl = $nthTpls[$idx];
} else {
foreach ($nthTpls as $int => $tpl) {
//if ( ($idx % $int) === 0 ) $thumbTpl = $tpl; // Эту строчку убирам
if ( $idx == $int ) $thumbTpl = $tpl; // Эту строчку добавляем
}
}
//...
И вызываем вот так (нумерация идет с нуля):
[[!Gallery? &album=`[[*gal-item]]` &useCss=`0` &thumbTpl=`gallery_item_tpl` &thumbTpl_0=`gallery_item_tpl_main` &thumbTpl_1=`gallery_item_tpl_sub` &thumbTpl_2=`gallery_item_tpl_sub` ]]
Некоторые плейсхолдеры в галереи
[[+image_absolute]]
Изображение без изменений размера. Его можно ресайзить самостоятельно в чанке вот так [[+image_absolute:rezimgcrop=`r-800`]][[+album]]
id альбома. Можно использовать чтобы подцепить все изображения в одну галерею fancybox — …class="fancybox" rel="gallery_[[+album]]"…
Галерея Gallery на одной странице
Галерея Gallery на одной страницеПервым делом создадим ресурс-контейнер для галереи. Вставим в его содержимое, или в шаблон. вызовы сразу двух сниппетов, но результаты передадим плейсхолдерам:
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &rowTpl=`tpl.AlbumItem` &sort=`name` &dir=`ASC` &thumbWidth=`195` &thumbHeight=`140` ]] [[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`tpl.AlbumContainer` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`tpl.ImageThumb` &imageWidth=`800` &imageHeight=`800` ]] [[+Gallery:default=`[[+GalleryAlbums]]`]]
Параметр&checkForRequestTagVar=`1` в сниппете Gallery включает проверку параметра в url-строке, который несет id альбома. Если его нет, то сниппет не показывает содержимое альбома, а возвращает пустую строку, значит, по условию, сниппет GalleryAlbums выведет на страницу список альбомов.
tpl.AlbumItem
<div>
<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">
[[+image:notempty=`<img src="[[+image]]" alt="[[+title]]" />`]]
</a>
[[+showName:notempty=`
<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">
<div>[[+name]] ([[+total]])</div>
</a>
`]]
</div> tpl.AlbumContainer
<h2>[[+album_name]]</h2>
<p>[[+album_description]]</p>
[[+thumbnails]]tpl.ImageThumb
<div>
<a href="[[+image]]" data-absolute-img="[[+image_absolute]]" rel="colorbox" title="[[+description]]">
<img src="[[+thumbnail]]" alt="[[+name]]" />
</a>
<div>[[+tags]]</div>
[[+name]]
</div>
manageButtonTpl — — Шаблон для кнопки управления фотографиями.Шаблон по умолчанию находится в файле: |
|
[+maxigallery.urlaction+] |
URL для обработчика формы |
[+maxigallery.hiddenfields+] |
Скрытые поля формы |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
manageOuterTpl — Внешний шаблон для управления галереейШаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/manageoutertpl.html |
|
[+maxigallery.messages+] |
Сообщение об ошибке / уведомление в управлении изображениями (берется из языкового файла) |
[+maxigallery.urlback+] |
URL для ссылки «Вернуться в обычный просмотр» |
[+maxigallery.urlaction+] |
URL для обработчика формы |
[+maxigallery.urldragsort+] |
URL для ссылки «Сортировать изображения» |
[+maxigallery.managepictures+] |
Изображения (контент из managePictureTpl) |
[+maxigallery.uploadpictures+] |
Поле для загрузки изображений (контент из manageUploadTpl) |
[+maxigallery.hiddenfields+] |
Скрытое поле для формы Управление изображениями, которая должно быть в ней |
[+maxigallery.pics_allowed_count+] |
Количество изображений, разрешенных к загрузке |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
[+maxigallery.pageinfo.fieldname+] |
Поле документа MODx, в котором находится галерея. «fieldname» может быть pagetitle, longtitle, pub_date и т.д. |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
managePictureTpl — Шаблон для одного элемента изображения в управлении галереейШаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/managepicturetpl.html |
|
[+maxigallery.picture.fieldname+] |
Содержание для области изображения MaxiGallery. «fieldname» может иметь значения id, gal_id, filename, title, date, descr, pos или own_id. |
[+maxigallery.path_to_gal+] |
Путь к текущему изображению галереи, например: assets/galleries/120/ |
[+maxigallery.fieldnames.field+] |
Названия полей ввода формы. «field» может быть delete, position, title, pictureid, modified и description. Посмотрите в шаблоне по умолчанию, как они используются. |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
manageUploadTpl — Шаблон для загрузки файла в управлении галереейШаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/manageuploadtpl.html |
|
[+maxigallery.counter+] |
Номер для текущей строки |
[+maxigallery.fieldnames.file+] |
Имя для поля формы |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
galleryOuterTpl — Внешний шаблон для краткого обзора галереиШаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/galleryoutertpl.html |
|
[+maxigallery.managebutton+] |
Кнопка для управления изображениями |
[+maxigallery.childgalleries+] |
Дочерние галереи (содержимое childgalleryTpl) |
[+maxigallery.childgallerycount+] |
Количество дочерних галерей |
[+maxigallery.currentpage+] |
Номер текущей страницы |
[+maxigallery.pagecount+] |
Общее число страниц |
[+maxigallery.previous_page_url+] |
Ссылка на предыдущую страницу |
[+maxigallery.next_page_url+] |
Ссылка на следующую страницу |
[+maxigallery.pagenumbers+] |
Номера страниц (содержимое pageNumberTpl) |
[+maxigallery.pictures+] |
Галерея изображений (содержимое galleryPictureTpl) |
[+maxigallery.picscount+] |
Количество фотографий в галерее |
[+maxigallery.embedtype+] |
Выбранный embedtype |
[+maxigallery.pageinfo.fieldname+] |
Поле документа MODx, в котором находится галерея. «fieldname» может быть pagetitle, longtitle, pub_date и т.д. |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
galleryPictureTpl — Шаблон для каждого изображения (эскиза) при обзоре галереи.Шаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/gallerypicturetpl.html |
|
[+maxigallery.embedtype+] |
Значение параметра embedtype конфигурации MaxiGallery |
[+maxigallery.picture.fieldname+] |
Содержание для области изображения MaxiGallery. «fieldname» может иметь значения id, gal_id, filename, title, date, descr, pos или own_id. |
[+maxigallery.path_to_gal+] |
Путь к текущему изображению галереи, например: assets/galleries/120/ |
[+maxigallery.picture_link_url+] |
URL для ссылки на изображение |
[+maxigallery.big_pic_exists+] |
Индикатор, отображающий существование большого изображения. 1 — да, 0 — нет |
[+maxigallery.picture_height_big+] |
Высота большого изображения |
[+maxigallery.picture_width_big+] |
Ширина большого изображения |
[+maxigallery.picture_height_normal+] |
Высота нормального изображения |
[+maxigallery.picture_width_normal+] |
Ширина нормального изображения |
[+maxigallery.picture_height_thumb+] |
Высота эскиза |
[+maxigallery.picture_width_thumb+] |
Ширина эскиза |
[+maxigallery.pageinfo.fieldname+] |
Поле документа MODx, в котором находится галерея. «fieldname» может быть pagetitle, longtitle, pub_date и т.д. |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
[+maxigallery.rownumber+] |
Номер строки для изображения (только для версии 0.6) |
[+maxigallery.picrownumber+] |
Количество изображений в строке (только для версии 0.6) |
[+maxigallery.picpagenumber+] |
Количество изображений на странице (только для версии 0.6) |
[+maxigallery.picnumber+] |
Количество изображений в галерее (только для версии 0.6) |
childgalleryTpl — Шаблон для отображения дочерней галереи.Шаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/childgallerytpl.html |
|
[+maxigallery.picscount+] |
Количество фотографий в галерее |
[+maxigallery.pageinfo.fieldname+] |
Поле документа MODx, в котором находится галерея. «fieldname» может быть pagetitle, longtitle, pub_date и т.д. |
[+maxigallery.pageinfo.tv.tvname+] |
Переменные шаблона из дочернего документа галереи. «tvname» — имя TV-параметра. |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
[+maxigallery.picture.fieldname+] |
Содержание для области изображения MaxiGallery (первое изображение в дочерней галереи). «fieldname» может иметь значения id, gal_id, filename, title, date, descr, pos или own_id. |
[+maxigallery.childurl+] |
URL к документу дочерней галереи |
[+maxigallery.path_to_gal+] |
Путь к текущему изображению галереи, например: assets/galleries/120/ |
[+maxigallery.big_pic_exists+] |
Индикатор, отображающий существование большого изображения. 1 — да, 0 — нет |
[+maxigallery.picture_height_big+] |
Высота большого изображения |
[+maxigallery.picture_width_big+] |
Ширина большого изображения |
[+maxigallery.picture_height_normal+] |
Высота нормального изображения |
[+maxigallery.picture_width_normal+] |
Ширина нормального изображения |
[+maxigallery.picture_height_thumb+] |
Высота эскиза |
[+maxigallery.picture_width_thumb+] |
Ширина эскиза |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
pictureTpl — Шаблон для предпросмотра изображения.Шаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/childgallerytpl.html |
|
[+maxigallery.managebutton+] |
Кнопка для управления изображениями |
[+maxigallery.big_img_linkstyle+] |
Значение параметра big_img_linkstyle |
[+maxigallery.keep_bigimg+] |
Значение параметра keep_bigimg |
[+maxigallery.path_to_gal+] |
Путь к текущему изображению галереи, например: assets/galleries/120/ |
[+maxigallery.picture.fieldname+] |
Содержание для области изображения MaxiGallery. «fieldname» может иметь значения id, gal_id, filename, title, date, descr, pos или own_id. |
[+maxigallery.counter+] |
Текущий номер изображения |
[+maxigallery.total_pics_count+] |
Общее количество изображений в галерее |
[+maxigallery.previous_pic_url+] |
Ссылка на предыдущее изображение |
[+maxigallery.next_pic_url+] |
Ссылка на следующее изображение |
[+maxigallery.index_url+] |
Ссылка на краткий обзор галереи |
[+maxigallery.big_pic_exists+] |
Индикатор, отображающий существование большого изображения. 1 — да, 0 — нет |
[+maxigallery.picture_height_big+] |
Высота большого изображения |
[+maxigallery.picture_width_big+] |
Ширина большого изображения |
[+maxigallery.picture_height_normal+] |
Высота нормального изображения |
[+maxigallery.picture_width_normal+] |
Ширина нормального изображения |
[+maxigallery.picture_height_thumb+] |
Высота эскиза |
[+maxigallery.picture_width_thumb+] |
Ширина эскиза |
[+maxigallery.pageinfo.fieldname+] |
Поле документа MODx, в котором находится галерея. «fieldname» может быть pagetitle, longtitle, pub_date и т.д. |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
pageNumberTpl — Шаблон для показа номеров страниц в кратком обзоре галереи.Шаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/pagenumbertpl.html |
|
[+maxigallery.pageurl+] |
URL к странице |
[+maxigallery.pagenumber+] |
Номер страницы |
[+maxigallery.pagecount+] |
Общее число страниц |
[+maxigallery.currentpage+] |
Номер текущей страницы |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
draggableTpl — Шаблон для ручной сортировки изображений галереи.Шаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/draggabletpl.html |
|
[+maxigallery.path+] |
Путь к папке MaxiGallery |
[+maxigallery.path_to_gal+] |
Путь к текущему изображению галереи, например: assets/galleries/120/ |
[+maxigallery.pageinfo.fieldname+] |
Поле документа MODx, в котором находится галерея. «fieldname» может быть pagetitle, longtitle, pub_date и т.д. |
[+maxigallery.strings.keyname+] |
Текст из языкового файла MaxiGallery. «keyname» может быть click_to_zoom, previous, next и т.д. |
[+maxigallery.config.parameter+] |
Значение параметра сниппета. «parameter» — любой из параметров сниппета. |
clearerTpl — Шаблон используемый при использовании параметра pics_per_row.Шаблон по умолчанию находится в файле:assets/snippets/maxigallery/templates/clearertpl.html |
|
| Нет используемых плэйсхолдеров | |
Картинки на странице / ms2Gallery / Компоненты / docs.modx.pro
- Картинки на странице
ms2Gallery умеет выводит картинки прямо при генерации страницы ресурса, безо всяких сниппетов.
Вам нужно просто активировать системную настройку ms2gallery_set_placeholders и вы можете использовать в контенте такие плейхолдеры:
[[+ms2g.0]]— распечатанный массив со всеми данными 1й картинки ресурса. Вторая картинка будет[[+ms2g.1]][[+ms2g.0.url]]— ссылка на оригинальную картинку[[+ms2g.0.small]]— ссылка на одно превью[[+ms2g.0.medium]]— ссылка на другое превью[[+ms2g.0.name]]— название картинки- и т.д.
Понятное дело, что выборка всех картинок генерирует дополнительные запросы в БД, поэтому по умолчанию она отключена.
Настройки
Первая настройка указывает оформление, другие две предназначены для экономии ресурсов.
ms2gallery_placeholders_tpl
Имя ТВ параметра или чанка для оформления плейсхолдера [[+ms2g.0]], содержимое которого будет использовано для оформления картинки. Например:
<a href="[[+url]]">
<img src="[[+120x90]]" />
</a>Логика работы такая:
- Если включен вывод плейсхолдеров, и настройка ms2gallery_placeholders_tpl не пуста то
- Проверяем, привязан ли к текущему ресурсу ТВ с указанным именем.
- Если нет, то ищем чанк с таким именем
- Если получаем непустой ТВ или чанк, то используем его содержимое для оформления плейсхолдеров на странице.
- В противном случае, будет как и раньше, распечатанный масив со всеми свойствами.
Вы можете спокойно писать тексты на сайте, разбавляя их вставками тегов [[+ms2g.1]] или там [[+ms2g.25]].
Учитывая, что плейсхолдеры выставляются не по id, а по rank, вы можете легко менять порядок вывода картинок на странице простым перетаскиванием их в галерее.
Ну а внешний вид выводимых картинок можно указывать или в ТВ этого ресурса, или в настройках этого ТВ по умолчанию, или в общем для всех чанке.
ms2gallery_placeholders_for_templates
Список id шаблонов через запятую, для которых нужно включить функцию выставления плейсхолдеров. Настройка пуста по умолчанию, поэтому плейсхолдеры выставляются для всех.
ms2gallery_placeholders_thumbs
Список превью картинок, которые нужно выбирать для показа на странице. По умолчанию там тоже пусто, и выбираются все превьюшки подряд. Но вы можете указать что-то типа «medium,small» и сэкономить на лишних запросах в БД.