Webasyst, вывод фотоальбома на странице с помощью fancybox

1 апреля 2021

Готовое решение, как в Webasyst вывести фотоальбом на странице с помощью fancybox. Работает как на собственном хостинге, так и на облаке webasyst 

Мне, как веб-мастеру, нравится Webasyst. Он удобный, масштабируемый, логичный, простой в понимании. Но его приложение Фото на мой взгляд слишком минималистичное. Если нужно создать сайт фотогалерею, то лучше хорошенько его допилить, или взять другой "движок". 

Предлагаю готовое решение фотогалереи на базе страниц блога. Если что - стили подгоните под собственные нужды.

Итак.

В приложении Фото создайте все необходимые альбомы и загрузите в них фото.

Если в вашей теме дизайна не подключен fancybox, то скачайте архив, файлы из архива загрузите в Сайт/Файл-менеджер, папка fancy (создайте ее)

В приложении Сайт/Дизайн/Шаблоны подключите fancybox в файле index.html, перед закрывающим </head>

<link rel="stylesheet" href="/wa-data/public/site/fancy/jquery.fancybox.min.css">
<script src="/wa-data/public/site/fancy/jquery.fancybox.min.js"></script>

Если fancybox подключен, то подключать его конечно не нужно.

В приложении Сайт/Блоки создайте блок photo_blog_page с таким содержимым

{literal}
<style>
    .itd_block {float:left; width:20%;}  
    .img-flitd {width:98%; height:auto; margin:0 auto;}
    .row-flex {display: flex; flex-flow: row wrap;}
    /* TABLET */
    @media screen and (min-width: 760px) and (max-width: 1024px) {
    .itd_block {width: 33.33333%;;}
    }
    /* MOBILE */
    @media screen and (max-width: 760px) {
    .itd_block {width:50%;}
    }
</style>
{/literal}

{if $wa->photos}
{if $page.alb}
{$photos = $wa->photos->photos("{$page.alb}", "970")}

<div class="row-flex">
    {foreach $photos as $photo}
    <div class="itd_block">
        <a data-fancybox="gallery" href="{$photo.thumb_970.url}" data-caption="{$photo.name}"><img src="{$photo.thumb_970.url}" alt="{$photo.name}.{$photo.ext}" class="img-flitd"></a>
        <div style="width:90%; background:#f5f5f5; padding:5px; margin:0 2px 5px 2px;"><a href="{$photo.frontend_link}">{$photo.name}</a></div>
    </div>
    {/foreach}
</div>
<div style="clear:both;"></div>

{/if}
{/if}

Добавьте этот блок в Блог/Дизайн/Шаблоны, файл темы page.html после {$page.content}, чтобы получилось типа такого

{$page.content}
{$wa->block("photo_blog_page")}

В альбоме, который нужно разместить на странице, узнаете его урл после #. Способов масса. Например откройте альбом в админке, в адресной строке браузера будет что-то типа адрес_сайта/webasyst/photos/#/album/23/ оттуда копируем /album/23/

У страницы блога, которой нужно отобразить этот альбом, в Настройки страницы / Дополнительные параметры пишите

alb=/album/23/

Все.

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

{if $page.alb}
{$photos = $wa->photos->photos("{$page.alb}", "970")}

пишите

{if $post.alb}
{$photos = $wa->photos->photos("{$post.alb}", "970")}

Ну и вставьте блок в post.html например после

<div class="text" itemprop="articleBody">
   {$post.text}
</div>

чтобы получилось так

<div class="text" itemprop="articleBody">
  {$post.text}
</div>
 {$wa->block("photo_blog")}

Это готовое решение для темы Дефолт. В разных темах файлы могут отличаться, но принцип думаю понятен.

Если что - обращайтесь к нам за помощью. Все сделаем и настроим под ключ.

Пример работы можно глянуть на по ссылке

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

<link rel="stylesheet" href="/wa-data/public/site/fancy/jquery.fancybox.min.css">
<script src="/wa-data/public/site/fancy/jquery.fancybox.min.js"></script>
{literal}
<style>
    .itd_block {float:left; width:20%;}  
    .img-flitd {width:98%; height:auto; margin:0 auto;}
    .row-flex {display: flex; flex-flow: row wrap;}
    /* TABLET */
    @media screen and (min-width: 760px) and (max-width: 1024px) {
    .itd_block {width: 33.33333%;;}
    }
    /* MOBILE */
    @media screen and (max-width: 760px) {
    .itd_block {width:50%;}
    }
</style>
{/literal}

{if $wa->photos}
{if $category.params.alb}
{$photos = $wa->photos->photos("{$category.params.alb}", "970")}

<div class="row-flex">
    {foreach $photos as $photo}
    <div class="itd_block">
        <a data-fancybox="gallery" href="{$photo.thumb_970.url}" data-caption="{$photo.name}"><img src="{$photo.thumb_970.url}" alt="{$photo.name}.{$photo.ext}" class="img-flitd"></a>
        <div style="width:90%; background:#f5f5f5; padding:5px; margin:0 2px 5px 2px;"><a href="{$photo.frontend_link}">{$photo.name}</a></div>
    </div>
    {/foreach}
</div>
<div style="clear:both;"></div>

{/if}
{/if}

Категории в Доп.параметрах указать alb=тут адрес альбома после звездочки...