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

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

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

Портфолио с фильтром

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

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

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

<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 — Создать альбом — создаем и сохраняем альбом

Создание альбома в MODX Gallery

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

Редактировать альбом в MODX 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.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий

  1. Дмитрий

    А где обещанный следующий урок про создание точно такого же портфолио, но со ссылкой на страницу, которое с TV полем Изображение и выводится при помощи PdoPage?

    Ответить
    1. Алексей автор

      Здравствуйте. Его пока что нет (ушел к статьям про сео и защиту), обязательно напишу, но позже.

      Ответить