Разделы фотоальбома с картинками на главной странице фотоальбома

Разделы фотоальбома с картинками на главной странице фотоальбома
Материал добавлен: 21 Февраля 2017
Материал обновлен: 27 Февраля 2017

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

  1. Настройки фотоальбома
  2. Создание и настройка информера
  3. Установка кода информера и редактирование шаблона главной страницы модуля “Фотоальбомы”
  4. Редактирование информера

Настройки фотоальбома

Чтобы информер выводил последние добавленные фотографии в разделах и категориях, вы должны настроить способ сортировки в разделах и категориях.

Войдите в Панель управления - Модули - Фотоальбомы - Настройки - Материалы - Сортировка по умолчанию. В разделе и в альбоме установите дату добавления материала по убыванию и сохраните изменения.

Создание и настройка информера

Для создания информера перейдите в Инструменты в Панели управления - Информеры - Добавить.

Основное

  • Название информера. Пропишите любое удобное для вас название информера.
  • Раздел сайта — Фотоальбомы.
  • Подгружаемые данные — Категории.
  • Количество колонок. Поставьте 5. Однако если у вас узкий дизайн или вам не понравится отображение, можете отредактировать информер и поставить большее или меньшее значение.

Расширенные настройки 

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

Шаблон

В поле шаблон вставьте следующий код:

<span class="photo-block">
 <span class="ph-wrap"><a class="gallaw" href="$CATEGORY_URL$"><span id="c$NUMBER$" class="galdow"> </span></a></span>
<span class="ph-details ph-js-details"> $CATEGORY_NAME$</span>
<script type="text/javascript">$(function(){ $.get("$CATEGORY_URL$", function(data){ var img = $(data).find('.phtTdMain:first').find('img'); $('#c$NUMBER$').html(img); });});</script>
</span></span></span>

Сохраните изменения в информере нажав на кнопку "Добавить".

После сохранения изменений вы будете перенаправлены на страницу со списком информеров.

Скопируйте код информера. В примере выше показан информер $MYINF_10$, но вам нужно смотреть конкретно на свой информер так как номер у вас будет отличаться.

Установка кода информера и редактирование шаблона главной страницы модуля “Фотоальбомы”

Перейдите в меню Панели управления на вкладку Дизайн - Редактор - CSS. В самый низ вставьте код и сохраните изменения:

.gallaw, .catsTdI {
 font:12px/14px Arial, Helvetica, sans-serif;
 color:#a0bff0;
 overflow: inherit;
}
.galdow {
 display:block;
 height:155px;
 width:155px;
 padding: 20px;
}
.galdow img {width:155px; height:155px}

Примечание: в “color:#a0bff0” красным выделен цвет ссылки названия категории.

Перейдите в меню Панели управления на вкладку Дизайн - Редактор - Фотоальбомы - Главная страница. Найдите и удалите код:

<?if($PAGE_SELECTOR$)?><!--<s3015>-->Страницы<!--</s>-->: $PAGE_SELECTOR$<br /><?endif?>

и

$PAGE_SELECTOR1$

Далее найдите код $BODY$ и замените его кодом информера, который вы скопировали при создании информера $MYINF_х$ (вместо х у вас будет свое число). Как только замените $BODY$ на код информера, можете сохранять шаблон.

Примечание об особенностях работы скрипта в шаблоне информера: при его вызове скрипт переходит по ссылке $CATEGORY_URL$ в категорию, на странице категории копирует код первой фотографии в этой категории и вставляет этот код внутрь блока с id="c$NUMBER$". Вот почему элемент с таким атрибутом должен обязательно быть в коде информера.

Редактирование информера

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

В Панели управления перейдите в Инструменты - Информеры - В списке информеров выберите созданный - Нажмите на редактирование.

Информеры кешируются. То есть если вы добавили материал, информер выведет его в течение 15 минут.

Но если вам нужно увидеть изменения сразу, просто сохраните информер, ничего не меняя в нем.

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

Примечание: В том случае если у вас после выполнения всех настроек и создания информера не отображаются фотографии с категорий в созданном информере, перейдите в Системные настройки и переключите версию jQuery c 1.12.4 на 3.3.1 и сохраните изменения.

Разделы фотоальбома с картинками на главной странице фотоальбома