» » Make it cool - красивый вывод новостей без хаков и модулей

Make it cool - красивый вывод новостей без хаков и модулей

16.11
98
27 267
Make it cool - красивый вывод новостей без хаков и модулей


Как сделать красивый вывод новостей на страницах без правки php-кода?
И не просто оформить новости через CSS, а сделать единообразный, удобочитаемый вид новостей, да ещё так, чтобы угодить и пользователям и поисковикам.
Сегодня я расскажу и покажу Вам как это сделать легко, непринуждённо и с минимальным вмешательством в код уже существующего шаблона.
Использовать будем только jQuery и CSS.

Итак, задача озвучена, приступим к её решению.
И что бы не заставлять Вас крутить всю страницу до конца в поисках демонстрации описываемого способа, я дам вам эту ссылку (нажмите на кнопку "Сделать красиво" и всё поймёте), где я специально добавил новости как стандартный криворукий пользователь, чтобы наглядно было видно работу скрипта.

Цель:
- Вывести в короткой новости только первую картинку и кусок описания.
- Настроить внешний вид через CSS.

Решение:

1. Подключаем библиотеку jQuery. (на тот случай если кто забыл - пишем перед
</hеad>
:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

касается только тех, у кого версия dle ниже 9.0).

2. Ниже строки с подключением библиотеки (опять перед
</hеad>
)
вставляем небольшой скрипт, он и отвечает за все "прелести внешнего вида новостей" на сайте:
[not-aviable=showfull]<script language="javascript" type="text/javascript">
<!--
$(function cImg () {
    nNews = $("div[id*=news-id-]")
    nNews.each(function (i) {
    $(this).replaceWith("<div id='n-id-"+i+"' class='modnews'><div class='image load'></div>" + $(this).text() + "</div>");
    $(this).find("img").filter("img:first").unwrap().removeAttr("align").fadeIn(2000).prependTo("div[id='n-id-"+i+"'] div[class*=image]");
    $("div[class*=image]:empty").hide(2000);

    });
    });
//-->
</script>[/not-aviable]


Думаю следует немного пояснить действие скрипта.
Если в двух словах, то скрипт берёт содержимое тега {shоrt-story}, "вытягивает" оттуда текст и первую картинку и создаёт изменённую структуру с картинкой, помещённый в отдельный блок, после которого помещается текст новости, очищенный от всего "мусора", а далее мы всё это оформляем через CSS.

3. CSS-код:
.modnews {
    height: 80px;
    overflow: hidden;
    font: normal 12px/16px Tahoma, sans-serif;
    text-align: justify;
    }
.modnews .image {
    display: block;
    height: 80px;
    width: 80px;
    margin-right: 5px;
    overflow: hidden;
    float: left;
    }
    .modnews .load {
        background: url(../images/loadimage.gif) no-repeat center center;
        }
    .modnews .image img {
        height: 80px;
        }


Данный код дан для примера. Вы можете воспользоваться своими вариантами оформления, главное не забыть для блока с текстом новости применить overflow: hidden и корректно задать размеры изображения.
Так же не забываем создать и кинуть в папку images текущего шаблона файл loadimage.gif Он нужен для красивого вида "загрузки" картинок.

Преимущества данного метода прежде всего в том, что он не требует практически ни каких сложных исправлений в шаблонах, никаких правок php-кода. Ну и конечно же поисковики будут видеть стандартный вид новостей, а посетители - красивый.

Вот собственно и всё. как всегда жду конструктивных предложений и критику.

Похожие материалы

Комментарии

RiMLiN
RiMLiN 22 января 2011 13:54
Да,это то у меня работает,но только они почему то не уменьшаются,а тупо влево уходят.
ПафНутиЙ
ПафНутиЙ 22 января 2011 15:11
Цитата: RiMLiN
а тупо влево уходят.

чтобы влево не уходило надо убрать float:left;
А если не уменьшаются - смотрите внимательнее код свой. не может быть, что бы у всех работало а у вас нет.
Цитата: RiMLiN
Как сделать чтобы этот код работал лишь для определенного шаблона

определённый шаблон используется в определённой категории, соответственно надо код взять в теги, выводящие текст для определённой категории. Писать теги не буду, уже надоело каждому объяснять что это такое. Всё написано в документации.
RiMLiN
RiMLiN 22 января 2011 16:03
ага,спасибо конешн,но все же я прописал через див,а еще 1 вопрос,как сделать чтобы справа был не текст короткой новости,а доп поля?
ПафНутиЙ
ПафНутиЙ 22 января 2011 17:36
поменять местами допполя и текст короткой новости smile
RiMLiN
RiMLiN 22 января 2011 17:47
Не получается,вот код который стоит:

[xfgiven_example]</br>example <font color="7ba05b">[xfvalue_example]</font>[/xfgiven_offsite]
</m></div>

{short-story}

</br>

Ниже ставишь,доп поле ниже картинки,выше,то выше,если рядом то все равно ниже :(
ПафНутиЙ
ПафНутиЙ 22 января 2011 17:51
для начала надо понять откуда
</m></div>
, ну если див ещё понятно, то? насколько я знаю тега <m> в html не существует.
В общем разбирайтесь с вёрсткой.......
Lamme
Lamme 3 марта 2011 21:40
Великолепное решение. Очень рад, что нашел этот сайт и воспользовался.

Однако, есть одно НО: если, например, использовать дополнительный шаблон для вывода новостей на первой странице с тегом {custom} данная технология не работает.

Почему?
ПафНутиЙ
ПафНутиЙ 4 марта 2011 00:27
Потому, что скрипт привязывается к id новости, который выводится в коде сайта. В custom по умолчанию такого нет, поэтому нужно прописать в шаблоне чото типа:
<div id="custom-id-{news-id}">{short-story}</div>

А дальше первую строку скрипта заменяем на:
nNews = $("div[id*=custom-id-]")

Lamme
Lamme 4 марта 2011 14:14
Спасибо за разъяснения! Сейчас будем попробовать...
Lamme
Lamme 4 марта 2011 15:15
Тут возник еще один вопрос. Я, видите ли, в Java полный чайник, потому и "тщусь ложной премудростью, самому себе ставя препоны" :)
Если вывести новости с шаблоном custom, ссылка на вывод новости в полном размере вообще перестает работать.
И еще - если поставить скрипт в основной шаблон, при просмотре полной новости перестает показываться видео, которое есть в новостях.
ПафНутиЙ
ПафНутиЙ 4 марта 2011 20:50
Я, видите ли, в Java полный чайник,

Java это не javascript, не путайте smile
Если вывести новости с шаблоном custom

а fullink стоит внутри дива с id (news-id}?
И еще - если поставить скрипт в основной шаблон, при просмотре полной новости перестает показываться видео

для полной новости его надо отключать.
Lamme
Lamme 6 марта 2011 15:57
Цитата: ПафНутиЙ
для полной новости его надо отключать.


А как это сделать?
ПафНутиЙ
ПафНутиЙ 6 марта 2011 19:28
_http://dle-news.ru/extras/online/newitem23.html
James
James 9 марта 2011 00:04
а для 9.2
нету такого ? :)
Lamme
Lamme 9 марта 2011 10:48
К вопросу о неработающей ссылке на полную новость при использовании шаблона custom:

Цитата: ПафНутиЙ
а fullink стоит внутри дива с id (news-id}?


fullink стоит ДО дива с id (news-id), ну, то есть до дива с id(custom-id).
ПафНутиЙ
ПафНутиЙ 9 марта 2011 15:42
James,
этот способ не зависит от версии DLE
Lamme,
тогда хотелось бы взглянуть на сайт.
James
James 9 марта 2011 16:06
ПафНутиЙ,
подскажи пожалуйста, как осуществить тоже самое, только как на off-design.ru
просто у меня шаблон ихний стоит
и очень бы хотелось сделать так же само :)
тоесть как увеличить само изображение в размерах
и сделать что бы рейтинг и Подробнее, оставались не под изображением а под текстом
Извиняюсь за такую кучу вопросов ;)
ПафНутиЙ
ПафНутиЙ 9 марта 2011 17:31
Посмотрите исходный код новости любой на главной.
это какоето извращение, куча инлайн-стилей, да и на мой взгляд это както ужастно смотрится, когда рейтинг прямо в текстк буквально располагается. Это же совершенно отличный от контента блок, и объединять его с контентом - глупо.
James
James 9 марта 2011 18:40
Ну да здесь согласен,
а вообще можно как то увеличить размер изображения
как то мне они слишком маленькие
Lamme
Lamme 9 марта 2011 19:33
Увы, сайт располагается на локальном компе...
James
James 9 марта 2011 21:51
ни как не могу найти разме изображение,он вообще сдесь есть к коде? :)
ПафНутиЙ
ПафНутиЙ 10 марта 2011 09:57
.modnews {
    height: 80px;
    overflow: hidden;
    font: normal 12px/16px Tahoma, sans-serif;
    text-align: justify;
    }
.modnews .image {
    display: block;
    height: 80px;
    width: 80px;
    margin-right: 5px;
    overflow: hidden;
    float: left;
    }
    .modnews .load {
        background: url(../images/loadimage.gif) no-repeat center center;
        }
    .modnews .image img {
        height: 80px;
        }

что ещё не понятно то?
despjke
despjke 13 марта 2011 19:54
я этот код вписал в shortstory.tpl т.к когда смотришь полуную новость там тоже было всё как на щорт стори
ПафНутиЙ
ПафНутиЙ 14 марта 2011 08:59
Этот код надо вписывать в head и заключать в тег [aviable=showfull]
Toonik
Toonik 24 марта 2011 17:08
как я понял у вас в шаблоне 2colors используется данное решение для кастома, который на главной выводится. А как сделать что бы форматирование текста сохранялось как задано через добавление новости?

или в какую сторону двигаться (ну или хотя бы как сказать это гуглу) что бы выводить в шорте определенное количество символов?
ПафНутиЙ
ПафНутиЙ 24 марта 2011 18:00
Я изначально и хотел сделать, что бы текст оставался форматированным, но не сделал этого по двум причинам:
1 - в новости могут быть картинки и всё это дело запросто испоганит всю красоту. это конечно можно вылечить добавив к картинкам display: none; но что тогда будет с картинками-ссылками, точнее с самими ссылками, что будет со смайликами smile ?
Это конечно тоже всё поправимо, задать несколько условий и т.д.... но тогда будет лишняя нагрузка на браузер, чего тоже не очень хочется.
2 - лень матушка smile
Я просто такое огромное количество времени убил на написание этого скрипта, что к моменту публикации я его уже ненавидел smile
Toonik
Toonik 24 марта 2011 19:37
все же не могу понять есть решение по ограничению количества видимых символов (кроме css овелей:хидден) на jQuery или придется это ограничение делать через редактирование файлов движка?
ПафНутиЙ
ПафНутиЙ 24 марта 2011 19:48
если текст форматированный - лучший выход - overflow: hidden; либо правка движка.
Mek
Mek 6 апреля 2011 13:23
ПафНутиЙ, пожалуйста подскажи, как применить данный способ не для всех коротких новостей, а например только для определённого шаблона короткой новости ?
ПафНутиЙ
ПафНутиЙ 6 апреля 2011 19:12
легко!
Как известно в шаблон можно вывести id новости. соответственно блок, оборачивающий тег {short-story} должен быть вот такого вида:
<div id="custom-id-{news-id}">{short-story}</div>

а в скрипте заменить строку
var nNews = $("div[id*=news-id-]")
на
var nNews = $("div[id*=custom-id-]")

и всё :)

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

Комментировать могут только зарегистрированные пользователи

Информация

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