SimpleGallery - Вывод галереи на странице

Поддержать: USDT TRC20: TBGKTYDs4yzU17vQbobbUB8epFFtFb6PKh
13783

SimpleGallery - Вывод галереи на странице

Раз такой вопрос все же возник, то покажу, как делать вывод. Ввод, я надеюсь, понятен интуитивно (:

Вывод галереи на странице

Важное достоинство DocLister заключается в том, что теперь не нужно городить свои велосипеды для вывода данных из любых таблиц: не нужно придумывать названия параметров (чтобы потом в них путаться), пагинации, сортировки и т.п. Всю нудную работу сделал Pathologic, за что ему в очередной раз спасибо.

Для работы с произвольными таблицами в DocLister есть контроллер onetable. Все что нужно знать – это название таблицы, названия ее полей, название ключевого поля. Все остальное есть в документации.

Еще раз приведу названия полей в таблице sg_images:

  • sg_id – id картинки, ключевое поле (idField);
  • sg_index – позиция в списке;
  • sg_image – ссылка на картинку;
  • sg_title – название картинки;
  • sg_description – описание картинки;
  • sg_properties – здесь в формате json хранится информация о ширине и высоте картинки, а также размере файла, можно еще что-нибудь хранить в этом поле;
  • sg_add – дополнительное поле, сейчас уже не помню, зачем оно мне было нужно;
  • sg_isactive – флажок, чтобы скрыть какие-то картинки из вывода;
  • sg_rid – id ресурса, которому принадлежит картинка (parentField);
  • sg_createdon – дата добавления картинки.

Зная это, чтобы вывести картинки из галереи, достаточно сделать такой вызов на странице с галереей:

[[DocLister?
&controller=`onetable`
&table=`sg_images`
&idField=`sg_id`
&parentField=`sg_rid`
&idType=`parents`
&addWhereList=`sg_isactive=1`
&tpl=`@CODE:[+sg_image+] [+sg_title+]`
&showParent=`-1`
]]

Результат:

assets/galleries/2/kitty099h.jpg kitty099h
assets/galleries/2/kitty098p.jpg kitty098p
assets/galleries/2/kitty096j.jpg kitty096j
assets/galleries/2/kitty095s.jpg kitty095s
assets/galleries/2/kitty094c.jpg kitty094c
assets/galleries/2/kitty093p.jpg kitty093p

Если на страницу добавить [+pages+], а к вызову добавить &paginate=`pages` &display=`10` – получим пагинацию.

То есть вывод из своей таблицы не сильно отличается от обычного вывода документов.

Чтобы не писать каждый раз &controller=`onetable` &table=`sg_images` &idField=`sg_id`, я сделал сниппет-обертку sgLister. Agel_Nash этот сниппет доработал и теперь при его вызове происходит дополнительная обработка полей, в чанке можно использовать такие плейсхолдеры:

  • [+thumb.sg_image+], [+thumb.width.sg_image+], [+thumb.height.sg_image+] – превьюшка и ее размеры;
  • [+e.sg_title+] и [+e.sg_description+]- значения полей sg_title и sg_description, которые преобразованы в html-сущности (чтобы не поломать случайно верстку кавычками или скобками);
  • [+properties.имя_свойства+] – свойства картинки из поля sg_properties.

Использовать поле [+thumb.sg_image+] можно, если при вызове добавить параметры:

  • &thumbSnippet – имя сниппета, который вернет ссылку на превью, например, phpthumb;
  • &thumbOptions – параметры для создания превью, в том виде, в каком их примет указанный сниппет.

На практике это выглядит так:

[[sgLister? 
&thumbSnippet=`phpthumb`
&thumbOptions=`w=150&h=150&zc=1`
&tpl=`@CODE:
<a href="[+sg_image+]">
	<img src="[+thumb.sg_image+]" class="img-thumbnail" alt="[+e.sg_title+]" title="[+e.sg_description+]">
</a>`
]]

Вывод списка галерей

Такая задача возникает не так часто, но все же возникает, поэтому я расширил контроллер site_content, чтобы получить возможность добавить картинки из галерей при выводе списка:

Вызов DocLister выглядит так:

[[DocLister? 
&controller=`sg_site_content`
&prepare=`prepareImages`
&sgOrderBy=`sg_id DESC`
&tpl=`@CODE:
<div class="page-header">
	<h1><a href="[+url+]">[+pagetitle+]</a></h1>
</div>
[+images+]
<div class="clearfix"></div>` 
&sgOuterTpl=`@CODE:[+wrapper+]`
&sgRowTpl=`@CODE:
<a href="[+sg_image+]">
	<img src="[+thumb.sg_image+]" class="img-thumbnail" alt="[+e.sg_title+]" title="[+e.sg_description+]">
</a>`
&sgDisplay=`5`
]]

То есть то же самое, что простой вывод документов, но добавлены дополнительные параметры:

  • &sgOuterTpl и &sgRowTpl – чанки для вывода картинок;
  • &sgOrderBy – параметры сортировки картинок;
  • &sgDisplay – сколько картинок выводить, all – чтобы вывести все;
  • &sgAddWhereList – здесь можно указать условия для выборки картинок.

Для того, чтобы вывести в чанке документа (&tpl) эти картинки, следует использовать плейсхолдер [+images+]. Однако если просто вписать [+images+], то картинки не выведутся (потому что images – это массив). Нужен prepare-сниппет для дополнительной обработки (назовем его prepareImages):

<?php
if (isset($data['images'])) {
	$wrapper= '';
	foreach ($data['images'] as $image) {
		$ph = $image;
		$ph['thumb.sg_image'] = $modx->runSnippet(
			'phpthumb',
			array(
				'input' => $image['sg_image'],
				'options' => 'w=150&h=150&zc=1'
			)
		);
		//сделали превьюшку

		$ph['e.sg_title'] = htmlentities($image['sg_title'], ENT_COMPAT, 'UTF-8', false);
		$ph['e.sg_description'] = htmlentities($image['sg_description'], ENT_COMPAT, 'UTF-8', false);
		//добавили поля e.sg_title и e.sg_description

		$wrapper .= $_DocLister->parseChunk($_DocLister->getCFGDef('sgRowTpl'), $ph);
		//обработали чанк sgRowTpl - для каждой картинки
	}
	$data['images'] = $_DocLister->parseChunk($_DocLister->getCFGDef('sgOuterTpl'),array('wrapper'=>$wrapper));
	//обработали чанк sgOuterTpl
}
return $data;
?>

Prepare-сниппет может пригодиться также для вывода свойств картинки. Это ширина, высота и размер файла – они хранятся в поле sg_properties в виде json. Тут все просто:

<?php
if (isset($data['sg_properties'])) {
    $properties = json_decode($data['sg_properties'],true);
    $data['width'] = $properties['width'];
    $data['height'] = $properties['height'];
    $data['size'] = $properties['size'];
}
return $data;
?>

С некоторых пор в комплекте имеется сниппет-обертка sgController, который вызывает DocLister с нужными параметрами и не требует отдельного prepare-сниппета:

[[sgController? 
&sgOrderBy=`sg_id DESC`
&thumbSnippet=`phpthumb`
&thumbOptions=`w=150&h=150&zc=1`
&tpl=`@CODE:
<div class="page-header">
	<h1><a href="[+url+]">[+pagetitle+]</a></h1>
</div>
[+images+]
<div class="clearfix"></div>` 
&sgOuterTpl=`@CODE:[+wrapper+]`
&sgRowTpl=`@CODE:
<a href="[+sg_image+]">
	<img src="[+thumb.sg_image+]" class="img-thumbnail" alt="[+e.sg_title+]" title="[+e.sg_description+]">
</a>`
&sgDisplay=`5`
]]

В sgRowTpl можно использовать все плейсхолдеры, предусмотренные сниппетом sgLister.

Если возникают проблемы, то советую первым делом обновить DocLister с гитхаба.