[X] Помощник

[Thrash Topic Starter]

Всем привет! Это моя первая статья-инструкция по движку 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: — для кроссбраузерности)

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

Результат:



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

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

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


Сообщение отредактировал Thrash - 19.5.2014, 17:39

[bazili]

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

[HITMAN84]

А как сделать вертикали отображение?

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.