С DLE 9.4 похожим новостям выделили отдельный файл шаблона relatednews.tpl. Вот его то мы и будем править. Иными словами, теперь с CMS DLE делать ничего не нужно, достаточно знать HTML и CSS.
Вертикальное расположение новостей
HTML
Открываем свой шаблон templates/{THEME}/relatednews.tpl и находим там всего одну примерно похожую строку:
<li><a href="{link}">{title}</a></li>Удаляем и на ее место ставим новую:
<table border="0">
<tr>
<td valign="top"><a href="{link}"><img class="imagestory" src="{image-1}" alt="{title}"/></a></td>
<td valign="top"><b><a href="{link}">{title}</b></a><br>{text limit="255"}</td>
</tr>
</table>
<hr/>CSS
Теперь открываем файл стилей вашего шаблона, обычно templates/{THEME}/css/style.css и дописываем строку:
/*Related News*/
.imagestory {
float: center;
width: 80px;
height: 80px;
margin: 0 8px 6px 0;
}Теперь макет формирования похожих новостей практически не будет отличаться от представленного на скриншоте выше.
Горизонтальное расположение новостей
Файл с шаблоном для вывода похожих новостей это простейший html код, задаем для таблицы id и в css для этого стиля пишем выравнивание по горизонтали. Помимо этого, нужно высчитать размеры, да бы все блоки влезли в размер полной новости.
HTML
Открываем свой шаблон templates/{THEME}/relatednews.tpl и находим там всего одну примерно похожую строку:
<li><a href="{link}">{title}</a></li>Удаляем и на ее место ставим новую:
<div class="relatednews">
<a href="{link}"><img class="imagestory" src="{image-1}" alt="{title}"/><br/>{title}</a>
</div>CSS
Открываем файл стилей и дописываем:
/*Related News*/
.relatednews{
display:inline-block;
width:19%;
vertical-align:top;
}
.relatednews img{
width:105px;
height:125px;
}Ширину картинок в 105px я вычислил, исходя из размера контейнера статьи полной новости разделив ее на количество выводимых похожих новостей.
Дополнительно по теме
DLE — картинки из дополнительных полей в похожие новости related-news
Спасибо за такой простой и надежный хак! Весь интернет перекопал, этот оказался самым простым))
Да незачто, сам когда то долго искал решение.
Спасибо большое всё работает отлично!!! Только вот искал немного другое. Вы не подскажите как сделать тоже самое, только что бы похожие новости были горизонтально, т.е. картинка, а под ней название, типа как тизеры.
Спасибо!
Ага и мне интересно, весь интернет перелопатил, только такие и есть. Еще нашел картинки можно литать, при навидении появляется текст, но это походу больше для фильмом.
Это простейший HTML. Заменить часть кода и будет горизонтально!
Текст появляется, если задан параметр title для картинки! Он будет вскакивать в любом случае. Стилизуется такая штука почти на любом языке, но наиболее популярными являются JQ+CSS
Спасибо вам огромное, вы очень выручили.
Незачто. Всегда рад помочь!
majami,
можете поподробнее… Мне как раз на фильм о кино может пригодится. Дайте ссылку.
Буду вам признателен, если скажете, как выводятся эти похожие записи? Нужно облако тегов создавать или как? Дело в том, что я добавил код и у меня ничего не вывелось. Облако тегов отсутствует.
Человеческое спасибо!
Код использует стандартные методы вывода похожих новостей, т.е. ничего не вносит и не требует чего-то нового а значит:
Файл fullstory.tpl и в нужном месте тег: {related-news}
Пример: ЭТОТ сайт! Чуть выше есть блок с похожими новостями, идентичными на скринах.
Здравствуйте, очень полезная информация. А как сделать, что бы горизонтальные новости были по центру (не прижимались к левому краю) и описание под картинкой выравнивалось не по левому краю а посередине?
Заранее Благодарю!
a как сделать так же, но в 4 колонки? что править?
разобраться в стилях CSS и HTML ибо только стилями нужно отрегулировать нужные дистанции и колонки.
В 4 колонки поставить в настройках 4 похожие новости
А у меня не получилось(( Вобще никаких изменений не произошло на сайте(
у меня dle 9.7
Я уверен, вы что-то сделали неправильно
Большое спасибо за статью! Материал очень пригодился.
Незачто, пользуйтесь!
Спасибо ребятки, весь рунет перепахал руками, а тут на тебе всё наглядно и понятно. Поставил у себя на сайте всё супер.
Всегда пожалуйста!
Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.
Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.
а дальше играйтесь значениями под свой дизайн
Вот тут видел как сделали по примеру: vkpedia.ru