loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

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

Написал ПафНутиЙ, 17 ноября 2010 | 38 комментариев | рейтинг новости не нравится   +11   нравится Версия для печати
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>
)
вставляем небольшой скрипт, он и отвечает за все "прелести внешнего вида новостей" на сайте:
<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>


Думаю следует немного пояснить действие скрипта.
Если в двух словах, то скрипт берёт содержимое тега {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 и корректно задать размеры изображения.

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

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



Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал Pepelnik, 17 ноября 2010 в 08:54 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 8, Пользователи
Карма:
Отлично, но зачем в полной новости так же?

А всё просто код скрипта запихал в shortstory.tpl и теперь только в кратких показывает так)

Написал ПафНутиЙ, 17 ноября 2010 в 09:01 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
не стоит так делать. это ОЧЕНЬ сильная нагрузка на браузер пользователя.
лучше просто взять код в тег
[aviable=main]..[/aviable]

Написал Sander1, 17 ноября 2010 в 09:32 плохой комментарий   0   хороший комментарий
Новостей: 38, комментариев: 314, Пользователи
Карма: 21±
[not-aviable=showfull]...[/not-aviable] friends
Хорошая статья, мне особенно js понравился.

Написал ПафНутиЙ, 17 ноября 2010 в 09:41 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Если честно, я на этот код убил полдня и почти всю ночь (сказалось недостаточное знание jQuery и курение манов по этому поводу)

Написал Pepelnik, 17 ноября 2010 в 09:37 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 8, Пользователи
Карма:
Sander1, Всё, спасибо =)

Написал JetPilot, 17 ноября 2010 в 10:40 плохой комментарий   0   хороший комментарий
Новостей: 6, комментариев: 152, Пользователи
Карма:
а я че то не догнал зачем тут скрипты? если можно все в ксс прописать... изображению указываеш размер, отправляеш в левую сторону и текст его обтекает)) все красиво и всего несколько строчек кода без всяких скриптов... bw

Написал Sander1, 17 ноября 2010 в 11:27 плохой комментарий   0   хороший комментарий
Новостей: 38, комментариев: 314, Пользователи
Карма: 21±
Не внимательно читал.
В короткой новости не одна картинка.

Написал ПафНутиЙ, 17 ноября 2010 в 11:49 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Реализуйте, мне интересно взглянуть, как вы поставите через css картинку, у которой в атрибуте стоит align=right.... (через селекторы атрибутов конечно можно).. но картинок то у нас несколько, причём не факт что требуемая картинка будет иметь нужный атрибут.
опять же она может быть ссылкой, которая нам нафиг не нужна.
впринципе, да, можно всё это реализовать через кучу кода css, я не навязываю мой вариант решения проблемы. Но не проще ли вставить 15 строк кода и получить универсальный вариант, чем копашиться с прописыванием лишних правил в css?

Написал JetPilot, 17 ноября 2010 в 12:06 плохой комментарий   0   хороший комментарий
Новостей: 6, комментариев: 152, Пользователи
Карма:
ну то что берет 1 картинку хорошо, а атрибут align=right, допиши в ксс float:left; и будет с лева :)

Написал ПафНутиЙ, 17 ноября 2010 в 13:53 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
попробуй))))

Написал xstack, 17 ноября 2010 в 10:45 плохой комментарий   0   хороший комментарий
Новостей: 4, комментариев: 13, Пользователи
Карма:
Бомба - Молодец..

Написал Mek, 17 ноября 2010 в 11:52 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 36, Пользователи
Карма:
Всё хорошо сделано, ещё бы и полная новость приводилась бы в божеский вид. А то какой смысл, короткая новость нормальная, а полная- кривая. Получается что полную новость нужно править.
И для версии для печати тогда уж надо это делать.

Написал ПафНутиЙ, 17 ноября 2010 в 11:58 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Я привёл пример совсем криворукого добавления новостей smile
Как правило таких новостей на сайтах нет. Но не однообразный вид новостей на главной мне не нравится (взять хотябы 4dle) каждый добавляет новость так, как считает лучше, а если модератор будет за каждым переделывать - он с ума сойдёт. Полная же новость - это отдельная сраница и придавать ей "шаблонность" не очень хочется.
Скрипт предназначен прежде всего приведения главной страницы (или другой страницы с короткими новостями) в божеский вид.
А на основе этого скрипта можно поправить и полную новость, но лучше держать грамотных модеров.

Написал a_lex, 17 ноября 2010 в 16:30 плохой комментарий   0   хороший комментарий
Новостей: 40, комментариев: 292, Пользователи
Карма:
для начинающих будет полезно))
единственное, что я бы добавил для этого хака - это чтобы к первой картинке в короткую новость добавлялась ссылка на полную новость

Написал jem777, 17 ноября 2010 в 18:15 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 82, Пользователи
Карма:
Классно! Выглядит отлично, но единственое замечание - грузятся большие картинки, просто на лету ресайзенные - вес страницы при этом возрастает.
Сюда бы еще прикрутить создание thumbnails для картинок - была бы вообще красота. Все таки я сторонник оптимизации и минимизации. smile

А так - отличная работа, спасибо!

Написал Awerty, 5 декабря 2010 в 12:31 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 1, Пользователи
Карма:
Проблема решается так:
в
.modnews .image {
display: block;
height: 80px;
width: 80px;
margin-right: 5px;
overflow: hidden;
float: left;
}

меняешь значение height: 80px (или width: 80px;) на height:auto (или width: auto)

Написал ПафНутиЙ, 17 ноября 2010 в 20:18 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
a_lex,
это уже дело админа конкретного сайта, я предпочитаю делать весь блок кликабельным, так проще пользователям.
jem777,
это уже модуль smile а задача ставилась - сделать красиво без модулей.

Написал jem777, 19 ноября 2010 в 08:52 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 82, Пользователи
Карма:
Цитата: ПафНутиЙ
это уже модуль а задача ставилась - сделать красиво без модулей.

Точно. Перепутал. bs

Написал 1408, 17 ноября 2010 в 21:54 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 1, Пользователи
Карма:
Все круто, спасибо! Скажите а как сделать, чтобы в краткой новости сохранялись все теги, а то у меня после установки кода весь текст сливается вместе?

Написал ПафНутиЙ, 18 ноября 2010 в 06:51 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
никак.

Написал MSK, 19 ноября 2010 в 13:29 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 118, Пользователи
Карма:
Цитата: ПафНутиЙ
никак.

зачем огорчаете?
Можно сохранить форматирование, только это будет не совсем красиво, т.к. могут сильно отличаться шаблоны коротких новостей.

Написал Borchun, 19 ноября 2010 в 16:30 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 139, Пользователи
Карма:
а если мы текст вообще не собираемся выводить? Например вывод превьюшек в несколько колонок. Мы ограничиваем размер блока до размера картинки, а остальное в хидден? или вот это " + $(this).text() + " просто убрать

Написал VAT, 21 ноября 2010 в 00:11 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 249, Пользователи
Карма:
хорошая идея, даже очень... стало интересно, а как данный хак будет реагировать на смайлы в новости? у меня, например, помимо стандартного модуля смайлов еще самодельный стоит, который выводит смайл не по типу :2345: а полный путь к картинке, думаю такая реализации не подойдет для данной цели...

Комментарий был скрыт за отрицательный рейтинг (-5) и по мнению остальных пользователей не несёт смысловой нагрузки!
показать комментарий
Написал Монах, 22 ноября 2010 в 00:27 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 133, Пользователи
Карма:
Зачетно.... идея супер!... Долой кривые руки bj

p.s. Keypro ппц это ж надо так драть с pro-warez.ru.... по рукам дать надо!

Написал ПафНутиЙ, 22 ноября 2010 в 08:59 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
VAT,
скрипт берёт первую картинку, и если ей окажется смайлик, он и будет взят :)

Написал zimb, 25 ноября 2010 в 04:14 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 3, Пользователи
Карма:
Как же всё сложно)

Можно ведь просто через пхп сделать обрезку тегов, а через ксс зафлотить картинку, или я что-то упускаю ?...

Написал Слунька, 27 ноября 2010 в 08:32 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 4, Пользователи
Карма:
Объясняю всем тем, которые не понимают, что делать.
1) Открываем main.tpl вашего шаблона
2) Перед тегом </head> ставим первые два скрипта, который написал автор + кроем под
[not-aviable=showfull] и [/not-aviable].
Цитата: То есть, получается так

[not-aviable=showfull]
Скрипты
[/not-aviable]
</head>

3) Ставим код, указанный в 3-ем пункте в свой css стиль.
4) Обновляем сайт, радуемся, даем отзыв автору

Написал melomaniac, 3 декабря 2010 в 07:29 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 3, Пользователи
Карма:
Афигеть как красиво, и ставитса за пару секунд, спасибо !!!!!!!!!! bo

Тока одна проблема: быстрое редактирование не работает.........

Написал zgu, 5 декабря 2010 в 02:05 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 46, Пользователи
Карма:
Как вывести категории custom ?
Чтобы как в предыдущем модуле было?

Хотелось бы выводить так по категориям

Написал ПафНутиЙ, 6 декабря 2010 в 09:38 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
В скрипте есть строка
nNews = $("div[id*=news-id-]")
она отвечает за "выборку" элементов для обработки.
можно заменить id на любой другой и всё будет ок.
например
<div id="myid-{news-id}">........</div>
{news-id} - это id новости - стандартный тег DLE и соответственно меняем строку в скрипте на:
nNews = $("div[id*=myid-]")

и будет обрабатывать что угодно....

Написал ПафНутиЙ, 6 декабря 2010 в 09:32 плохой комментарий   0   хороший комментарий
Новостей: 26, комментариев: 330, Пользователи
Карма: 16±
Цитата: zimb
Как же всё сложно)

Можно ведь просто через пхп сделать обрезку тегов, а через ксс зафлотить картинку, или я что-то упускаю ?..

а если в новости несколько картинок? и половина по правому краю через инлайн стили выровнены?

Цитата: melomaniac
Тока одна проблема: быстрое редактирование не работает.........

изначально делалось под custom а там как известно оно и не работает изначально :)

Написал zimb, 8 декабря 2010 в 03:03 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 3, Пользователи
Карма:
Цитата: ПафНутиЙ
а если в новости несколько картинок? и половина по правому краю через инлайн стили выровнены?

Отлавливаем preg_replace-ом картинку и выводим отдельным тегом.
После обрезаем весь хтмл кроме br/a.

Написал melomaniac, 15 декабря 2010 в 03:26 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 3, Пользователи
Карма:
А как зделать шоб они еще в две колонки в короткой новости выводились ??? help232

Написал ProLiant, 25 января 2011 в 20:25 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 5, Пользователи
Карма:
Спасибо. Действительно смотрится гораздо приятней.

Написал ProLiant, 26 января 2011 в 23:01 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 5, Пользователи
Карма:
Кстати. На 8.0 получается при установке всего этого и в полной новости вид, как и в краткой. Тоесть такая же маленькая картинка одна, остальные картинки в новости вообще не отображаются. Можно как-то исправить?
П.с. 9 версия не понравилась совсем.. (

Написал DJ-Alex_ssn, 5 февраля 2011 в 00:09 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 1, Пользователи
Карма:
блин а не кто не знает как в мести с новость вывесьти аву пользовотеля

Написал defnur, 23 мая 2011 в 18:55 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 2, Пользователи
Карма:
Подскажите пожалуйста, как можно включить данную обработку только для последних новостей (/index.php?do=lastnews) ?
Т.к. у меня на главной публикуются только новости с высоким рейтингом, и нет нужды их "укорачивать".

Информация



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

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]