MODX — продвинутое портфолио с фильтром по категориям

В данном уроке я хочу рассказать о том как организовать продвинутое портфолио с фильтром по категориями. Выглядит оно так:

При наведении на картинку будет выводится кнопка для увеличения изображения, заголовок и описание см. картинку выше.

Во многих современных шаблонах встречается такое портфолио, всю его разметку и стили выкладывать не буду, моя задача показать как это все натягивается на модх.

И так разметка переключателей категорий такого портфолио выглядит так:

<ul id="portfolio_filter" class="nav nav-pills margin-bottom-60">
	<li class="filter active"><a data-filter="*" href="#">Все</a></li>
	<li class="filter"><a data-filter=".websites" href="#">Сайты</a></li>
	<li class="filter"><a data-filter=".social-networks" href="#">Социальные сети</a></li>
	<li class="filter"><a data-filter=".form-style" href="#">Лого, Фирменный стиль и т.п.</a></li>
</ul>

Вся логика заключается в том что все сортируется по css классам, например вот эта строчка:

<li class=»filter»><a data-filter=».websites» href=»#»>Сайты</a></li> здесь «Сайты» это ссылка на все элементы с классом websites.

Разметка отдельного элемента портфолио выглядит так:

<div class="portfolio-item has-title websites"><!-- item -->
	<div class="item-box">
		<figure>
			<span class="item-hover">
				<span class="overlay dark-5"></span>
				<span class="inner">
					<!-- lightbox -->
					<a class="ico-rounded lightbox" href="путь/название-картинки.jpg" data-plugin-options='{"type":"image"}'>
						<span class="fa fa-plus size-20"></span>
					</a>
				</span>
				<!-- overlay title -->
				<div class="item-box-overlay-title">
					<h3>Заголовок</h3>
					<ul class="list-inline categories nomargin">
						<li><a href="#">Описание</a></li>
					</ul>
				</div><!-- /overlay title -->
			</span>
			<img class="img-responsive" src="путь/название-картинки.jpg" width="600" height="399" alt="MODX - продвинутое портфолио с фильтром по категориям">
		</figure>
	</div>
</div><!-- /item -->

Если вы заметили, то вверху блока обвертки элемента портфолио как раз присутствует класс websites о котором я сказал выше.

Ну а теперь самое главное.

Реализация (натяжка) портфолио с категориями на MODX при помощи компонента Gallery.

Идем в Приложения — Gallery — Создать альбом — создаем и сохраняем альбом

Теперь отредактируем данный альбом

И загрузим в него все наши фото:

Теперь редактируем все фото в альбоме, заполняем им имя, описание и самое главное заполняем поле Метки, именно по нему будет происходить сортировка.

Итак все подготовили, теперь на основе выше приведенной разметки создадим чанк tpl-portfolio-gallery для обвертки каждого изображения:

<div class="portfolio-item has-title [[+tags]]"><!-- item -->
	<div class="item-box">
		<figure>
			<span class="item-hover">
				<span class="overlay dark-5"></span>
				<span class="inner">
					<!-- lightbox -->
					<a class="ico-rounded lightbox" href="[[+image_absolute]]" data-plugin-options='{"type":"image"}'>
						<span class="fa fa-plus size-20"></span>
					</a>
				</span>
				<!-- overlay title -->
				<div class="item-box-overlay-title">
					<h3>[[+name]]</h3>
					<ul class="list-inline categories nomargin">
						<li><a href="#">[[+description]]</a></li>
					</ul>
				</div><!-- /overlay title -->
			</span>
			<img class="img-responsive" src="[[+image_absolute]]" width="600" height="399" alt="[[+name]]">
		</figure>
	</div>
</div><!-- /item -->

Здесь по сути не чего сложного, просто мы заменили все то что меняется на теги вывода Gallery, здесь

• [[+tags]] — Выводит Метку
• [[+image_absolute]] — выводит изображение из альбома
• [[+name]] — выводит заголовок
• И [[+description]] — выводит описание

Теперь остается вывести саму галерею. делается это очень просто:

[[Gallery? &album=`1` &thumbTpl=`tpl-portfolio-gallery`]]

Выводим альбом с ID 1, и для оформления изображений используем чанк tpl-portfolio-gallery

В конечном итоге получаем следующее:

<ul id="portfolio_filter" class="nav nav-pills margin-bottom-60">
	<li class="filter active"><a data-filter="*" href="#">Все</a></li>
	<li class="filter"><a data-filter=".websites" href="#">Сайты</a></li>
	<li class="filter"><a data-filter=".social-networks" href="#">Социальные сети</a></li>
	<li class="filter"><a data-filter=".form-style" href="#">Фирменный стиль</a></li>
</ul>

<div id="portfolio" class="clearfix portfolio-isotope portfolio-isotope-4">
    [[Gallery? &album=`1` &thumbTpl=`tpl-portfolio-gallery`]]
</div>

Это все я ввел в содержимом при редактировании документа (предварительно отключив редактор текста).

Можете взглянуть на работу этого портфолио здесь: alex87.ru/portfolio

В следующем уроке мы разберем создание точно такого же портфолио, но с сылкой на страницу с его кейсом (или подробным описанием). Собираться оно будет из отдельных страниц, с TV полем Изображение и выводится при помощи PdoPage.