Изменить цветовую тему


Купить шаблон

 

Произвольные фотографии

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

Откройте приложение «Фото» и войдите в альбом, в котором находятся нужные фотографии. Поставьте галочки под теми фотографиями, которые хотите вывести:

Затем в правом боковом меню нажмите на пункт «Ссылка / HTML». Появится всплываюшее окно, в котором вам нужно скопировать идентификатор выбранных фотографий. Он там потребуется чуть позже. В примере ниже — это будет "/id/40,41,42".

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

Теперь зайдите в приложение «Сайт» и в левом боковом меню выбирите пункт «Блоки», затем нажмите ссылку «Новый блок», в ID введите «photos.custom_photos» и добавьте в поле содержимого блока следующий контент:

    
<style>
  ul.view-thumbs { list-style: none; padding: 0; margin: 0; }
  ul.view-thumbs li { display: inline-block; position: relative; vertical-align: top; width: 220px; }
  ul.view-thumbs li a { text-decoration:none; }
  ul.view-thumbs li .image { position: relative; display: inline-block; max-width: 100%;}
  ul.view-thumbs li .image img { max-width: 100%; height: auto !important; margin: 0 !important; }
  ul.view-thumbs li img.shadowed { -moz-box-shadow: 0 1px 3px #aaa; -webkit-box-shadow: 0 1px 3px #AAA; box-shadow: 0 1px 3px #AAA; margin-bottom: 5px; }
</style>
{$photos = $wa->photos->photos("/id/40,41,42")}
<ul class="view-thumbs">
{foreach from=$photos item=photo}

    {$current_photo_array = $wa->photos->photo($photo.id , "big")}
   
  {if !'hidden'|in_array:$photo.tags}
    <li{if $photo.stack_count > 0} class="stacked"{/if}>
        <div class="image">
    {if empty($photo.frontend_link)}{$wa->photos->getImgHtml($photo, "240x240", ["class"=>"shadowed"])}{else}<a class="no-border sh" data-rel="lightcase:myCollection1" href="{$current_photo_array.thumb_big.url}">{$wa->photos->getImgHtml($photo, "240x240", ["class"=>"shadowed"])}</a>
    {/if}
    </div>
    </li>
  {/if}
{/foreach}
</ul>

После добавления этого кода замените идентификатор изображений, который мы взяли из приложения «Фото». Если вы планируете добавить несколько блоков фотографий на одну или разные страницы сайта, то обязательно измените ID блоков, который мы указали в самом начале, идентификаторы фотографий (для каждого набора свой идентификатор) и название группы, который в данном примере показан как «lightcase:myCollection1» (например, можно их называть «lightcase:myCollection1», «lightcase:myCollection2», «lightcase:myCollection3» и т.д.)

На картинке ниже показан заполненный блок и отмечены основные данные, которые вам нужно изменять:

После сохранения изменений вы сможете добавлять последние фотографии на любую страницу сайта, вставив код вызова блока:

{$wa->block("photos.custom_photos")}

Пример вывода блока

  • Облик города

  • Замок св. Георгия

  • Кладбище удовольствий