1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Вывод категорий с картинками для фотоальбомов

Автор
waak
написать автору
пожаловаться
ID материала № 60
Авторwaak
CMSuCoz
Просмотров 71
Добавлено 04.03.2019
Комментариев 0
Вывод категорий с картинками для фотоальбомов

Вывод категорий с картинками для фотоальбомов

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

Пример вида после установки


Ещё раз уточню что это один из способов которым можно реализовать данную задачу и который не использует гет запросов да и вообще не каких посторонних скриптов всё делается на стандартных функциях от 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;
}

Отлично не забываем сохранить и почистить кеш браузера
0 1
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация