SdelaemBlog

Создание Сайтов и их настройка

Похожие новости dle с картинкой и описанием.

Главная Статьи DLE Похожие новости dle с картинкой и описанием.
#DLE

12 декабря 2012

Приветствую, друзья, на блоге для начинающих вебмастеров. Встречал в сети интернет много хаков для dle, предназначенных для того, чтобы вывести похожие новости dle с картинкой. Попадались даже платные варианты. Интересное дело, ведь данный модуль присутствует в последних версиях dle, если честно, то я не помню, в какой версии, появился данный модуль. А кто-то все равно предлагает купить, скачать хак, для того, того чтобы вывести этот модуль с картинками и описанием. Поэтому, я хочу рассказать, как все сделать самому ничего не скачивая и не покупая.

 Похожие новости dle с картинкой.

Модуль похожие новости dle.

Итак. Если мы заглянем в нашу админку, то в настройках оптимизации запросов к базе данных, мы можем увидеть опцию «Отображение похожих новостей». Если такая возможность у вас присутствует, значит этот пост подойдет для вас, а если нет, то вы можете просто обновить движок до необходимой или последней версии dle.

Теперь включаем этот параметр, если он не включен, и переходим на сайт в полную новость. И под статьей мы можем увидеть работу модуля похожих новостей dle. Выглядит он так:

Модуль похожие новости dle.

Похожие новости dle  с картинкой.

Но бывает, что такое отображение нас не устраивает, и нам необходимо вывести похожие новости с картинкой. Что делать в этом случае? Здесь все очень просто. Открываем файл templates/{THEME}/relatednews.tpl (данный файл имеет место быть, начиная с версии dle v9.4.) и меняем существующую строчку на:

Похожие новости с картинкой, если используется стандартный вывод картинок, с помощью {image-x}:

<li><a href="{link}"><img src="{image-1}" alt="{title}" />{title}</a></li><hr />

Похожие новости с картинкой, если используется вывод картинок, с помощью дополнительных полей [xfvalue_x]:

<li><a href="{link}"><img src="[xfvalue_x]" alt="{title}" />{title}</a></li><hr />

{link} — это ссылка на похожую новость.

{title} — это тайтл новости на которую будет вести ссылка.

{image-1} — url первой картинки в краткой новости.

[xfvalue_x] — дополнительное поле, которое содержит url к картинке. (важно: значение x, нужно заменить на свое).

Вот таким нехитрым образом можно выводить похожие новости dle  с картинкой. Останется только настроить внешний вид в стилях вашей темы и все (style.css).

Но если вам и этого мало, то можно еще добавить сюда описание нашей новости.

Похожие новости dle  с картинкой и описанием.

Для добавления описания к нашей конструкции, достаточно добавить:

{text limit="150"}

И тогда код похожих новостей с картинкой и описанием, будет выглядеть так:

<li><a href="{link}"><img src="{image-1}" alt="{title}" />{title}</a><br>{text limit="150"}</li><hr />

{text limit=»150″} — описание, берется с краткой новости, где 150 — это количество символов, которое будет выводиться.

После всех этих действий похожие новости на сайте станут выглядеть примерно так:

Похожие новости dle с картинкой и описанием.

Довольно убого. Правда?

Но это легко исправляется редактированием стилей css. Например, используя стандартные классы в которых выводится блок с похожими новостями dle, можно сделать так:

/*---похожие новости---*/
hr{
 clear: both;
}
.related ul li img {
 width:150px;
 height:150px;
 float:left;
 margin: 0 10px 5px 0;
 list-style:none;
}

width:150px — ширина картинки в похожих новостях.

height:150px — высота картинки.

После этого, похожие новости dle с картинкой и описанием, приобретают совершенно иной вид и выглядят более приятно, нежели ранее.

Похожие новости dle с картинкой и описанием.

Ну вот и все, друзья, теперь у вас на сайте будет выводиться модуль похожих новостей dle с картинками и описание, что должно повлиять на поведенческие факторы и теперь осуществляется внутренняя перелинковка сайта, что тоже должно быть у каждого проекта.

Удачных экспериментов.

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Комментарии

  1. Владимир

    Интересно, а как это можно сделать на wordpress?

    5 лет назад12.12.2012 Ответить
  2. Alexexxx

    Еще для li указать list-style:none помоему без кружков красивее :)

    4 года назад10.02.2013 Ответить
  3. Михаил Веб

    @ Alexexxx: Да, пропустил данный момент спасибо за дополнение. :oops:

    4 года назад11.02.2013 Ответить
  4. Новости России

    Здравствуйте!
    А как можно встроить в Похожие Новости дату и время добавления этих статей?

    4 года назад19.04.2013 Ответить
  5. Михаил Веб

    @ Новости России: Здравствуйте. Никогда не задавался подобным вопросом, так как никогда не было такой необходимости.
    Но насколько я понимаю, в код необходимо добавить в нужное место:

    {date}

    И настроить формат даты в админке сайта.
    Но я могу ошибаться.

    4 года назад20.04.2013 Ответить
  6. Евгений

    Здравствуйте Михаил. Уже около недели ищу информацию как сделать вывод похожих статей в два столбика в версии 9.8, но ничего нормального пока найти не могу, все что есть в сети садится криво. Подскажите пожалуйста как реализуется вывод похожих записей в вашем блоге, буду очень признателен.

    4 года назад29.05.2013 Ответить
  7. Михаил Веб

    @ Евгений: Здравствуйте. Все довольно просто. У меня в блоге, чтобы похожие статьи выводились в два столбика, в стилях для li прописано float:left. То есть в dle нужно добавить к стилям похожих новостей сторону выравнивания. Будет это выглядеть, как-то так:

    .related ul li {
    float: left;
     width:350px;
    }

    Данный селектор уже есть в style.css. Просто к уже имеющимся стилям необходимо добавить ширину (в пикселях) и сторону выравнивания.
    При этом, хочу заметить, что если код вы брали отсюда и стили тоже, то необходимо убрать тег:


    И удалить его стили:

    hr{
     clear: both;
    }

    Проверил в версии 9.7 — все отлично работает.
    Смотрел то, что предлагают в сети. Какие-то все предложения сложные, для осуществления такой простой операции. :mrgreen:

    4 года назад29.05.2013 Ответить
  8. Роман

    Но это легко исправляется редактированием стилей css.

    Я только осваиваю DLE. Возможно вопрос глупый, но где именно редактировать css? В папке со стилями конкретного шаблона?

    У меня получилось провести только первую часть вашего совета — вывел похожие с картинками одна новость за другой (но у меня каждая картинка разных размеров).

    P.S. Относительно совета по выводу похожих материалов в две колонки с картинками. Нужно вначале проделать все с этой странички, а потом уже реализовать две колонки?

    Очень надеюсь на помощь, поскольку не к кому обратится, а вы чувствую разбираетесь хорошо. Спасибо за ваш сайт (подписался конечно же!) и за уделенное мне время.

    3 года назад09.05.2014 Ответить
  9. Михаил Веб

    @ Роман:
    Здравствуйте.
    Да, в папке со стилями (файл формата css) конкретного шаблона.
    Если все сделано по статье, и все коды взяты отсюда, то картинки должны быть одного размера.
    Нет, можно сразу выводить в две колонки.
    Не за что. Обращайтесь, если не понятно.

    3 года назад11.05.2014 Ответить
  10. Роман

    Все получилось, правда реализовал вот так в relatednews.tpl

    {title} 

    Но не могу в две колонки сделать. В папке с шаблоном есть несколько документов css….
    Понимаю, что нужно сделать через float: left; но нет у меня такого как

    .related ul li {

    единственное место в папке с шаблоном, где что-то похожее — это

    .findrelated {
    	width:99%;
    	background: #ffc;border:1px solid #9E9E9E;
    	padding: 5px;margin-top: 7px;
    	margin-right: 10px;
    }

    Уже два дня мучаюсь ))) Кому то может уже смешно бы было, но не могу разобраться…

    3 года назад11.05.2014 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

Если у Вас возникли проблемы, не стесняйтесь отправлять жалобу, она обязательно будет учтена и все будет исправлено.

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: