ПафНутиЙ-Блог » Статьи » Make it cool - красивый вывод новостей без хаков и модулей

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

16.11
96
22489
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-кода. Ну и конечно же поисковики будут видеть стандартный вид новостей, а посетители - красивый.

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

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

  • Карусель с автопрокруткой на основе Block.Pro.2 и jCarousel
  • Вывод новостей в 2 колонки.
  • Простой tooltip с поддержкой html-тегов на jQuery
  • Меняем BBcode-редактор для комментариев
Закрыть

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

+

Комментарии

TCSE
TCSE 17 ноября 2010 14:19
Ответов: 0 #358
большое спасибо очень полезная штука вышла.
поставил ваш хак себе на домен, куда все новости публикуются автоматом из RSS
но пока не понял почему у меня не происходит обтекая картинок текстом.

быть может сможете что-то подсказать?
стоит тут http://blogs.smartzone.ru/music/
код используется ваш 1 в 1

соответствено тег краткой новости обернуть
<div class="modnews">{short-story}</div>
ПафНутиЙ
ПафНутиЙ 17 ноября 2010 15:04
Ответов: 0 #359
не надо ничего оборачивать, оно само всё делается smile
Toonik
Toonik 19 ноября 2010 17:15
Ответов: 0 #363
спрашивал на 4дле, может здесь быстрее будет ))

а если мы текст вообще не собираемся выводить? Например вывод превьюшек в несколько колонок. Мы ограничиваем размер блока до размера картинки, а остальное в хидден? или вот это " + $(this).text() + " просто убрать?

И еще вопрос. А если в другом месте мы выводим через кастом и тоже хотим применить этот эффект но с другими настройками вывода код нужно еще раз вставлять с другими селекторами? И если соответственно не хотим эффектов, то просто выбираем другой шаблон вывода?
ПафНутиЙ
ПафНутиЙ 19 ноября 2010 21:56
Ответов: 0 #364
лучше ограничить блок до размеров картинки.
для вывода в разных местах лучше использовать отдельный id
например взять шорт-стори в див с id
n-id-{new-id}
и поменять в скрипте селектор на
*="n-id-")
а дельше через CSS оформить. но предупреждаю сразу - чем больше таких новостей - тем сильнее нагрузка на браузер пользователя smile
papay
papay 22 ноября 2010 17:35
Ответов: 0 #365
Ты как всегда на высоте ;)
И это тут нет ли случайно раздельчика или форума, что бы вопросы задавать не совсем по твоим темам :)
ПафНутиЙ
ПафНутиЙ 22 ноября 2010 20:39
Ответов: 0 #366
Цитата: papay
Ты как всегда на высоте ;)

спасибо smile
Цитата: papay
И это тут нет ли случайно раздельчика или форума, что бы вопросы задавать не совсем по твоим темам :)

А оно надо?
papay
papay 24 ноября 2010 13:21
Ответов: 0 #369
ПафНутиЙ,
ну малоли :) популярность сайта подросла бы
ПафНутиЙ
ПафНутиЙ 24 ноября 2010 13:42
Ответов: 0 #370
Если честно - лень мне будет за форумом следить, максимум что сделаю - гостевую книгу как тут http://japan-saratov.net/guestbook/
papay
papay 25 ноября 2010 10:58
Ответов: 0 #372
ясно, а ты на админ клаб ешё обитаешь?
ПафНутиЙ
ПафНутиЙ 25 ноября 2010 11:06
Ответов: 0 #375
заглядываю, но редко.
papay
papay 25 ноября 2010 19:59
Ответов: 0 #380
Поставил только что твой вывод новостей, но как быть если у меня были прикреплены в краткой новости видео из ютуба, он их естественно не отображает, да и что то картинки он как то режит, вот зайди посмотри _http://www.net-wars.su/ что бы лучше понятно было, можешь ли, что-нибудь придумать, что бы если выводилось видео с ютуба он его не резал.
Ещё заметил, создаеться большой отступ внутри новости.
Razario
Razario 22 декабря 2010 15:55
Ответов: 0 #412
Как сделать, что бы картинка была ссылкой на полную новость? no
ПафНутиЙ
ПафНутиЙ 22 декабря 2010 17:39
Ответов: 0 #413
А смысл делать картинку ссылкой на полную новость, когда можно сделать весь блок кликабельным (пример - случайные материалы в этой новости) либо сделать увеличение картинки по клику.
var nNews = $("div[id*=news-id-]")
    nNews.each(function (i) {
    var imgLink = $(this).find("img").filter("img:first").attr("src")
    var expImg = "<a href='"+imgLink+"' oncli"+"ck='return hs.ex"+"pand(this)'><img src='"+imgLink+"' /></a>"
    $(this).replaceWith("<div id='n-id-"+i+"' class='modnews'><div class='image load'>"+expImg+"</div>"+ $(this).text() + "</div>");
    $("div[class*=image]").find ("a[href*=undefined]").parent().hide(2000);    
});

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

papay,
Проще всунуть видео в доп поле, и убрать вывод картинки. А ещё лучше выводить ролик в полной новости - процент отказов в ПС упадёт очень сильно, а так как сейчас - юзер зашёл на главную - глянул ролик и свалил, и сайт получает отказ.
Razario
Razario 23 декабря 2010 00:45
Ответов: 0 #414
Ну а всё таки :) как сделать картинку ссылкой на полную новость?

офтоп: я когда регистрировался у вас на сайте, видел каптча стоит 7+7=, а как такое реализовать? На 4dle есть подобное, но там все ссылки битые :(
Toonik
Toonik 23 декабря 2010 01:27
Ответов: 0 #415
Razario,
И к капче и к картинке присоединяюсь ))
А если картинку просто обернуть в див и сделать его ссылкой, при нажатии на картинку она ведь все равно увеличиваться будет и в фулл не переместимся мы.
ПафНутиЙ
ПафНутиЙ 23 декабря 2010 07:48
Ответов: 0 #416
Razario, Toonik,
Капча эта старая, ещё наверно под 7.5 была, но с тех пор мало что в двиге изменилось в отношении капчи, если нужно - забирайте.
для ссылки на полную новость можно сделать чтото типа этого из кода, что я привёл в предыдущем комментарии
var parentLink = $(this).parent().find("a:first").attr("href")
var imgLink = $(this).find("img").filter("img:first").attr("src")
var expImg = "<a href='"+parentLink+"'><img src='"+imgLink+"' /></a>"

но это при условии, что ссылка на полную новость находится в родительском для
div[id*=news-id-]"
блоке, и находится по коду выше остальных :) код не проверял, но должно работать.
Razario
Razario 23 декабря 2010 11:43
Ответов: 0 #417
Спасибо огромное за каптчу.
А вот по ссылке на картинке, что то я не понял, куда этот корд прописать?
papay
papay 23 декабря 2010 12:08
Ответов: 0 #418
Вопрос не по теме наверно, а как сделать такой же вывод случайных материалов, как у тебя, тока без сворачивания?!
ПафНутиЙ
ПафНутиЙ 23 декабря 2010 13:45
Ответов: 0 #419
var nNews = $("div[id*=news-id-]")
    nNews.each(function (i) {
    var parentLink = $(this).parent().find("a:first").attr("href")
var imgLink = $(this).find("img").filter("img:first").attr("src")
var expImg = "<a href='"+parentLink+"'><img src='"+imgLink+"' /></a>"
    $(this).replaceWith("<div id='n-id-"+i+"' class='modnews'><div class='image load'>"+expImg+"</div>"+ $(this).text() + "</div>");
    $("div[class*=image]").find ("a[href*=undefined]").parent().hide(2000);    
});

полный код.
ПафНутиЙ
ПафНутиЙ 23 декабря 2010 13:52
Ответов: 0 #420
Блок случайных новостей (by ПафНутиЙ) - с помошью этого модуля оно и выведено smile
Razario
Razario 23 декабря 2010 16:09
Ответов: 0 #421
Не работает код, он просто по нажатию открывает картинку.
ПафНутиЙ
ПафНутиЙ 24 декабря 2010 08:33
Ответов: 0 #423
Цитата: Razario
Не работает код, он просто по нажатию открывает картинку.

ссылка на сайт есть?
Razario
Razario 24 декабря 2010 20:46
Ответов: 0 #436
arbatcity.ru
ПафНутиЙ
ПафНутиЙ 25 декабря 2010 07:25
Ответов: 0 #439
конечно не будет работать, там столько лишнего кода, что я даже не сразу понял.
вот исх код, который получил мой браузер:

мне реально страшно смотреть на него. куча дубликующих инлайн-стилей, картинки в коде....... В общем для начала надо сделать нормальную вёрстку, а уже потом всякие фишки прикручивать. весь этот код можно реализовать на дивах и укоротить раза в 2-3 точно.
Toonik
Toonik 10 января 2011 11:33
Ответов: 0 #451
А не подскажите вывод текста только для блоков текста. То есть любая картинка уходит под хайд, и в конце текста многоточие.

и такой вопрос. Можно ваш код так заставить работать nNews = $(".class") / <div class="class"> {short}</div> ?
ПафНутиЙ
ПафНутиЙ 10 января 2011 19:46
Ответов: 0 #452
Цитата: Toonik
То есть любая картинка уходит под хайд, и в конце текста многоточие.

если нужно убрать картинки - то можно, под тег hide не сунешь.

Цитата: Toonik
Можно ваш код так заставить работать nNews = $(".class") / <div class="class"> {short}</div> ?

да, код будет работать.
Toonik
Toonik 11 января 2011 17:38
Ответов: 0 #453
Цитата: ПафНутиЙ
если нужно убрать картинки - то можно,

а как это сделать?
насколько я понял гуглением replaceWith нужен для замены элементов. Подскажите как это сделать или в каком направлении искать. (:
ПафНутиЙ
ПафНутиЙ 11 января 2011 23:11
Ответов: 0 #454
Просто убрать из кода обработку картинок.
<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'>" + $(this).text() + "</div>");
    });
    });
//-->
</script>
RiMLiN
RiMLiN 21 января 2011 17:17
Ответов: 0 #483
У меня не работает...но проблема в другом.Как сделать чтобы этот код работал лишь для определенного шаблона(shortstory2.tpl например).И как сделать чтобы картинка уменьшалась?Просто у меня она тока влево уходит :(.
Toonik
Toonik 21 января 2011 18:37
Ответов: 0 #484
классы в ксс прописали?
.modnews .image {
display: block;
height: 80px;
width: 80px;
margin-right: 5px;
overflow: hidden;
float: left;

Информация

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