Портфолио фотографа с фильтрацией изображений

Множество фотографий можно встретить на сайтах фотографов. Большие изображения в изобилии присутствуют на одной странице, и их можно легко фильтровать. Рассмотрим способ удобной сортировки изображений для сайта фотографа.

Сделать галерею изображений очень просто. Воспользуемся следующей разметкой из компонента Лайтбокс:

<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
<div>
<a class="uk-inline" href="/images/photo.jpg" data-caption="Описание 1">
<img src="/images/photo.jpg" alt="">
</a>
</div>
<div>
<a class="uk-inline" href="/images/dark.jpg" data-caption="Описание 2">
<img src="/images/dark.jpg" alt="">
</a>
</div>
<div>
<a class="uk-inline" href="/images/light.jpg" data-caption="Описание 3">
<img src="/images/light.jpg" alt="">
</a>
</div>
</div>

Добавим возможности компонента Изображения. Это позволит создавать заполнители изображений, которые предотвратят скачки страницы при загрузке картинок.

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

<!-- Ссылка на полное изображение -->
<a href="/images/content/folio/pl/pl1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
<!-- Маленькое изображение для предпросмотра -->
<img uk-img data-src="/images/content/folio/pl/pl1.jpg" data-width="" data-height="" alt="UIkit 3 lightbox">
</a>
  • <div class="uk-child-width-1-3@m uk-grid-small" uk-grid uk-lightbox="animation: slide">
    <div>
    <a href="/images/content/folio/pl/pl1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/pl/pl10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/st/st10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    <div>
    <a href="/images/content/folio/comm/comm10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </div>
    </div>

Фильтрафия фотографий набора

Пока все просто. Добавим нашей галерее немного фильтрации с помощью компонента Фильтр. Разметку для переключателей берем из компонента Вкладки.

  • <div uk-filter="target: .js-filter">
    <ul class="uk-tab">
    <li uk-filter-control="[data-style='plenair']"><a href="#">Пленэр</a></li>
    <li uk-filter-control="[data-style='studio']"><a href="#">Студийная</a></li>
    <li uk-filter-control="[data-style='commerce']"><a href="#">Коммерческая</a></li>
    </ul>
    <ul class="js-filter uk-child-width-1-3@m uk-grid-small" uk-grid uk-lightbox="animation: slide">
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li>
    <a href="/images/content/folio/st/st4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li>
    <a href="/images/content/folio/st/st9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/comm/comm1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    </ul>
    </div>

Разная ориентация изображений. Применение Masonry.

Добавим картинки в портретной ориентации. К атрибуту uk-grid пропишем параметры masonry:true для применения сетки Masonry и parallax: 150 для применения Параллакса.

  • <div uk-filter="target: .js-filter">
    <ul class="uk-tab">
    <li uk-filter-control="[data-style='plenair']"><a href="#">Пленэр</a></li>
    <li uk-filter-control="[data-style='studio']"><a href="#">Студийная</a></li>
    <li uk-filter-control="[data-style='commerce']"><a href="#">Коммерческая</a></li>
    </ul>
    <ul class="js-filter uk-child-width-1-3@m uk-grid-small" uk-grid="masonry:true;parallax: 150" uk-lightbox="animation: slide">
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl1.jpg" data-data-width="1200" data-data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl2.jpg" data-data-width="1200" data-data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl3.jpg" data-data-width="1200" data-data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl4.jpg" data-data-width="1200" data-data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl12.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl12.jpg" data-width="800" data-data-height="1200" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st11.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st11.jpg" width="800" data-height="1200" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="plenair">
    <a href="/images/content/folio/pl/pl11.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/pl/pl11.jpg" width="800" data-height="1200" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li>
    <a href="/images/content/folio/st/st4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st6.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st6.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li>
    <a href="/images/content/folio/st/st9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st12.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st12.jpg" width="800" data-height="1200" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm7.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm7.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/comm/comm1.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm1.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm2.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm2.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm3.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm3.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm4.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm4.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm5.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm5.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="studio">
    <a href="/images/content/folio/st/st13.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/st/st13.jpg" width="800" data-height="1200" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm8.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm8.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm9.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm9.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    <li data-style="commerce">
    <a href="/images/content/folio/comm/comm10.jpg" data-caption="Lightbox UIkit 3" data-alt="UIkit 3 lightbox">
    <img uk-img data-src="/images/content/folio/comm/comm10.jpg" data-width="1200" data-height="800" alt="UIkit 3 lightbox">
    </a>
    </li>
    </ul>
    </div>