форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
04-03-2019 в 14:30 164

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


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

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


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

Отлично не забываем сохранить и почистить кеш браузера

1

Комментарии

Комментариев пока нет!
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

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

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru