Разделы фотоальбома с картинками на главной странице фотоальбома
Инструкция поможет вам настроить вывод разделов и категорий с превью последней добавленной фотографии на главную страницу фотоальбома.
- Настройки фотоальбома
- Создание и настройка информера
- Установка кода информера и редактирование шаблона главной страницы модуля “Фотоальбомы”
- Редактирование информера
Настройки фотоальбома
Чтобы информер выводил последние добавленные фотографии в разделах и категориях, вы должны настроить способ сортировки в разделах и категориях.
Войдите в Панель управления - Модули - Фотоальбомы - Настройки - Материалы - Сортировка по умолчанию. В разделе и в альбоме установите дату добавления материала по убыванию и сохраните изменения.
Создание и настройка информера
Для создания информера перейдите в Инструменты в Панели управления - Информеры - Добавить.
Основное
- Название информера. Пропишите любое удобное для вас название информера.
- Раздел сайта — Фотоальбомы.
- Подгружаемые данные — Категории.
- Количество колонок. Поставьте 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">
$.get("$CATEGORY_URL$", function(data){
var img = $(data).find('.phtTdMain:first').find('img');
$('#c$NUMBER$').html(img);
});
</script></span></span></span>
Сохраните изменения в информере. После сохранения изменений вы будете перенаправлены на страницу со списком информеров. Скопируйте код информера.
Установка кода информера и редактирование шаблона главной страницы модуля “Фотоальбомы”
Перейдите в меню Панели управления на вкладку Дизайн - Редактор - 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 минут. Но если вам нужно увидеть изменения сразу, просто сохраните информер, ничего не меняя в нем.
В итоге на главной странице модуля “Фотоальбомы” будут отображаться превью последних добавленных фотографий в категориях. Внизу превью выводится название категории.