DLE — похожие новости вертикально и горизонтально

С 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