Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Как сделать красивое отображение related-news (похожих новостей) на DLE

#1 Thrash

Thrash
  • Пользователь PRO
  • 620 сообщений
  • Репутация: 53
5

Отправлено 19 Май 2014 - 16:37

Всем привет! Это моя первая статья-инструкция по движку DLE. Я бы хотел поделится с вами своим решением отображения "related-news". Related-news — это системный модуль, который выводит на страницах сайта (fullstory) список похожих новостей. Хорошая штука для перелинковки, да и вообще приятно, когда пользователь, прочитав статью, кликает по дополнительным ссылочкам и бродит по сайту дальше.

 

Первоначальное отображение related-news выглядит примерно так:

  • Статья 1
  • Статья 2
  • Статья 3
  • Статья 4

Не очень привлекательно, не так ли? Что привлечет внимание пользователя? Конечно же, картинки!

 

Добавить к ссылкам картинки в related-news очень просто! Я попытаюсь максимально доступно объяснить вам как это сделать, и что за что отвечает, чтобы вы по своему усмотрению смогли отредактировать код.

 

Шаг №1: найдите файл шаблона relatednews.tpl

 

Первоначально этот файл содержит такой код:

<li><a href="{link}">{title}</a></li>

Необходимо этот код заменить на следующий:

<div class="relatednews"> 
<a href="{link}"><img class="imagestory" src="[xfvalue_img1]" alt="{title}"/><br />{title}</a> 
</div>

<div class="relatednews"> — это название нашего класса, который мы создадим в CSS.

{link} — системный оператор. ссылка на статью.

[xfvalue_img1] — это код дополнительного поля, через который я вывожу первую картинку статьи (экспериментирую с альтом и микроразметкой). Если вы не выводите первую картинку статьи через доп.поле, то вместо [xfvalue_img1] вставьте {image-1}.

{title} — тайтл картинки (заголовок), который добавляется в альт (описание картинки для поисковиков). 

 

Шаг №2: редактируем файл стилей.

 

В любом месте файла вставляем код класса.

/*Related News*/ 
.relatednews{display:inline-block; width:19%; vertical-align:top;} 
.relatednews img {
width: 90px;
height: 100px;
margin: 0px;
padding: 4px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0px 5px #000;
box-shadow: 0 0px 5px #000;
-webkit-box-shadow: 0 0px 5px #000;
}

.relatednews — название класса.

display:inline-block; — Значение inline-block генерирует блочный элемент, с поведением строчного элемента (еще данный параметр может быть полезен для исправления ошибок отображения в дурацком браузере IE).

width: — ширина вашей картинки.

height: — высота картинки.

margin: — отступ. 

 

Этого достаточно для вывода картинки по-горизонтали.

Для красоты добавляем рамочку.

 

padding: — величина поля в пикселях. Чем больше этот параметр, тем толще рамочка.

border-radius: — скругление уголков. ( -webkit-border-radius: — для кроссбраузерности)

box-shadow: — тень рамочки.  (-moz-box-shadow: — для кроссбраузерности)

 

Вот и все! Играйтесь с циферками параметров и подстраивайте под свой сайт.

 

Результат:

 

Снимок.PNG

 

В Internet Explorer отображается точно так же!

 

Всем спасибо за внимание!

 

PS: не забудьте  почистить кэш в админпанели! 


 

 

Сообщение отредактировал Thrash: 19 Май 2014 - 16:39

  • 3
Изображение


#2 bazili

bazili
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 17 Апрель 2016 - 20:43

Спасибо автору, все получилось и работает, вот вопрос, как сделать в стилях, чтобы при наведении курсора на рамку, она меняла цвет? Спасибо если ответите.


  • 0


Оформление форума – IPBSkins.ru