В данном уроке я хочу рассказать о том как организовать продвинутое портфолио с фильтром по категориями. Выглядит оно так:
При наведении на картинку будет выводится кнопка для увеличения изображения, заголовок и описание см. картинку выше.
Во многих современных шаблонах встречается такое портфолио, всю его разметку и стили выкладывать не буду, моя задача показать как это все натягивается на модх.
И так разметка переключателей категорий такого портфолио выглядит так:
<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.
А где обещанный следующий урок про создание точно такого же портфолио, но со ссылкой на страницу, которое с TV полем Изображение и выводится при помощи PdoPage?
Здравствуйте. Его пока что нет (ушел к статьям про сео и защиту), обязательно напишу, но позже.