Всем привет! Сегодня хочу поделится с вами одним из способов как можно на юкоз сделать вывод категорий в модуле фотоальбомы картинками при этом так же оставить вывод названия и количество фотографий в категории
Пример вида после установки
Ещё раз уточню что это один из способов которым можно реализовать данную задачу и который не использует гет запросов да и вообще не каких посторонних скриптов всё делается на стандартных функциях от uCoz
Так же должен написать о том что картинки вы должны будите прописывать сами точнее ссылки на них так как в данном примере нет скриптов для авто подгрузки картинок
Ещё должен написать что данный вариант был создан по просьбе пользователя у которого сайта на тематику музыка и он публикует фото групп - музыкантов и для него этот вариант самый подходящий так как категорий очень много и использовать гет запросы глупо ведь они приведут к бану пользователей а в данном варианте он просто выбирает подходящую картинку для категории и присваивает её при создании категории при этом картинку очень легко поменять если это понадобится да и вид списка категорий можно сделать любым по виду ограничение только в ваша фантазии
Вообщем думаю всё написал если всё же возникнут вопросы пишите ихв комментариях а пока приступим к установки
Установка
Для начало нам нужно будет создать нужную категорию и в описание добавить ссылку на картинку
Отлично! с другими так же нужно сделать
Теперь создаём информер с такими параметрами
Раздел:
Фотоальбомы Тип данных:
Категории Количество колонок:
Тут по усмотрению Материалы за текущий период:
Не трогаем
Нажимаем создать затем выбираем
Шаблон информера и вместо всего кода ставим
Код
<div class="catimgphoto">
<span>$NUM_DATA$</span>
<a href="$CATEGORY_URL$">
<img src="$CATEGORY_DESCR$">
<b>$CATEGORY_NAME$</b>
</a>
</div>
Отлично не забываем сохранить!
Теперь копируем код данного информера и в нужное место размещаем его
Код информера выглядит так
$MYINF_ТУТ НОМЕР ИНФОРМЕРА КОТОРЫЙ МЫ СОЗДАВАЛИ$ Ну и на последок нам осталось добавить стили для него тут я дам вам свои для примера но вы конечно можете написать свои! а пока копируем стили ниже и разместим их в таблицу стилей
Код
.catimgphoto {
padding: 10px;
position: relative;
overflow: hidden;
height: 150px;
}
.catimgphoto img {
width: 100%;
height: 150px;
object-fit: cover;
}
.catimgphoto span {
position: absolute;
top: 10px;
right: 10px;
color: #FFF;
display: block;
padding: 0 10px;
background: #000;
z-index: 11;
line-height: 35px;
font-size: 13px;
}
.catimgphoto b {
display: block;
position: absolute;
z-index: 11;
bottom: 10px;
left: 0;
background: rgba(0,0,0,.6);
color: #FFF;
font-size: 13px;
padding: 10px;
margin: 0 20px;
}
Отлично не забываем сохранить и почистить кеш браузера
web_master 
