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

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

Читайте также

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

DLE — быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...
DLE — мой первый модуль, как написать свой модуль Datalife Engine
Как ни пытался уйти с DLE из-за того, что он платный, а на рынке существует куча бесплатных аналогов, не получается...
DLE на HTTPS — основные проблемы и их решение
Столкнулся с рядом проблем, когда наконец-то решился перебраться на https. Не появлялись некоторые картинки, видео, а в адресной строке писалось,...
DLE — Модуль форума SimpleBB 1.1
Полноценный форум с единой регистрацией и авторизацией, единым акаунтом и ссылками на профиль от dle \"user/username/\" на движке SimpleBB 1.1...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

  1. @Юрий пишет:
    07.03.2012 в 16:09

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

  2. @devarts пишет:
    08.03.2012 в 00:35

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


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

  3. @Алексангдр пишет:
    09.10.2012 в 18:14

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

  4. @majami пишет:
    09.12.2012 в 10:14

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

  5. @devarts пишет:
    12.01.2013 в 22:14

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

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

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

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

  6. @michka пишет:
    08.05.2013 в 00:07

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

  7. @devarts пишет:
    10.05.2013 в 02:06

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


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

  8. @Александр пишет:
    03.06.2013 в 18:58

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

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

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

  9. @devarts пишет:
    08.06.2013 в 01:23

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


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

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

    artemmian.ru/uploads/post...ated.png|--> src="https://artemmian.ru/uploads/posts/2013-06/artemmian_ru_related.png" alt="« title=»" />

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

  10. @Сергей пишет:
    16.07.2013 в 23:36

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

  11. @Rifler пишет:
    28.07.2013 в 19:51

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

  12. @devarts пишет:
    02.08.2013 в 15:00

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


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


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

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

  13. @Lika пишет:
    20.08.2013 в 15:15

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

  14. @devarts пишет:
    21.08.2013 в 14:17

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


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

  15. @Flyer Dell пишет:
    08.11.2013 в 20:25

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

  16. @devarts пишет:
    08.11.2013 в 21:23

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


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

  17. @Виталий пишет:
    17.01.2014 в 23:31

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

  18. @devarts пишет:
    18.01.2014 в 10:08

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


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

  19. @djdeath666 пишет:
    08.05.2016 в 19:25

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

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

  20. @devarts пишет:
    23.05.2016 в 21:43

    Цитата: 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;
    }

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

  21. @Man пишет:
    18.03.2018 в 16:48

    Вот тут видел как сделали по примеру: vkpedia.ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *