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

related news dle vertical and horizontal - DLE — похожие новости вертикально и горизонтально
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

Похожие записи


PHP — простой ротатор баннеров, ротатор для DLE и WordPress
Аналог на javascriptАналог на PHP для больших кодов Очень простой ротатор кода на PHP. Сначала мы объявляем простой двумерный массив...
Как изменить пароль пользователя CMS DLE и WordPress через SQL-запрос
Перебираю старые статьи с целью их оптимизации и наткнулся на эту. В принципе, способ подойдет для любой системы на любом...
Полный гайд по миграции с CMS DLE на WordPress
Данный сайт в апреле 2019 года полностью переехал на CMS WordPress и в июне, после завершения всех правок (а их...
DLE – быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...

0 комментариев на «“DLE — похожие новости вертикально и горизонтально”»

  1. Спасибо за такой простой и надежный хак! Весь интернет перекопал, этот оказался самым простым))

  2. Цитата: Юрий
    Спасибо за такой простой и надежный хак! Весь интернет перекопал, этот оказался самым простым))

    Да незачто, сам когда то долго искал решение.

  3. Спасибо большое всё работает отлично!!! Только вот искал немного другое. Вы не подскажите как сделать тоже самое, только что бы похожие новости были горизонтально, т.е. картинка, а под ней название, типа как тизеры.
    Спасибо!

  4. Ага и мне интересно, весь интернет перелопатил, только такие и есть. Еще нашел картинки можно литать, при навидении появляется текст, но это походу больше для фильмом.

  5. Цитата: Алексангдр
    похожие новости были горизонтально


    Это простейший HTML. Заменить часть кода и будет горизонтально!

    Цитата: majami
    Ага и мне интересно, весь интернет перелопатил, только такие и есть. Еще нашел картинки можно литать, при навидении появляется текст, но это походу больше для фильмом.


    Текст появляется, если задан параметр title для картинки! Он будет вскакивать в любом случае. Стилизуется такая штука почти на любом языке, но наиболее популярными являются JQ+CSS

  6. Цитата: michka
    Спасибо вам огромное, вы очень выручили.

    Незачто. Всегда рад помочь!

  7. majami,
    можете поподробнее… Мне как раз на фильм о кино может пригодится. Дайте ссылку.

    Цитата: artemmian
    ссылку.


    Буду вам признателен, если скажете, как выводятся эти похожие записи? Нужно облако тегов создавать или как? Дело в том, что я добавил код и у меня ничего не вывелось. Облако тегов отсутствует.
    Человеческое спасибо!

  8. Цитата: Александр
    Буду вам признателен, если скажете, как выводятся эти похожие записи? Нужно облако тегов создавать или как? Дело в том, что я добавил код и у меня ничего не вывелось. Облако тегов отсутствует.Человеческое спасибо!

    Код использует стандартные методы вывода похожих новостей, т.е. ничего не вносит и не требует чего-то нового а значит:

    Файл fullstory.tpl и в нужном месте тег: {related-news}

    Пример: ЭТОТ сайт! Чуть выше есть блок с похожими новостями, идентичными на скринах.

  9. Здравствуйте, очень полезная информация. А как сделать, что бы горизонтальные новости были по центру (не прижимались к левому краю) и описание под картинкой выравнивалось не по левому краю а посередине?
    Заранее Благодарю!

  10. Цитата: Сергей
    Здравствуйте, очень полезная информация. А как сделать, что бы горизонтальные новости были по центру (не прижимались к левому краю) и описание под картинкой выравнивалось не по левому краю а посередине?Заранее Благодарю!

    Цитата: Rifler
    a как сделать так же, но в 4 колонки? что править?

    разобраться в стилях CSS и HTML ибо только стилями нужно отрегулировать нужные дистанции и колонки.

    В 4 колонки поставить в настройках 4 похожие новости

  11. А у меня не получилось(( Вобще никаких изменений не произошло на сайте( recourse у меня dle 9.7

  12. Цитата: Lika
    А у меня не получилось(( Вобще никаких изменений не произошло на сайте( у меня dle 9.7

    Я уверен, вы что-то сделали неправильно

  13. Цитата: Flyer Dell
    Большое спасибо за статью! Материал очень пригодился.

    Незачто, пользуйтесь!

  14. Спасибо ребятки, весь рунет перепахал руками, а тут на тебе всё наглядно и понятно. Поставил у себя на сайте всё супер.

  15. Цитата: Виталий
    Спасибо ребятки, весь рунет перепахал руками, а тут на тебе всё наглядно и понятно. Поставил у себя на сайте всё супер.

    Всегда пожалуйста!

  16. Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.

    Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.

  17. Цитата: djdeath666
    Как я вижу тут блок больше настроен под вертикальные изображения, аля 100х150. А как настроить его под горизонтальные, аля 150х100? Если просто поменять размеры на 150х100 результат будет печальным. Картинки друг на друга наезжают, и правая часть у них обрезана. И кстати отступов никаких между ними нет. Я 3 часа что только не пробовал, результат ноль.

    <div class="related">
    	<a href="{link}">
    		<div class="related_img"><img src="{image-1}"/></div>
    		<br/>
    		{title}
    	</a>
    </div>

    .related{
    	width: 24%;	
    	padding: 0.5%;
    	margin: 10px 0% 30px 0%;
    	height: 156px;
    	overflow: hidden;
    	float: left;
    	display: inline-block;
    	text-align: center;
    }

    а дальше играйтесь значениями под свой дизайн

Добавить комментарий для ManОтменить ответ