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

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

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

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

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

Комментарии

Mek
Mek 6 апреля 2011 22:44
ПафНутиЙ, благодарю за оказанную помощь ! ! !
TemKa
TemKa 8 апреля 2011 07:38
Всё работает идеально, единственное что текст обрезается и в полной новости, как это исправить ?
ПафНутиЙ
ПафНутиЙ 8 апреля 2011 09:18
заключить скрипт в тег [not-aviable=showfull]...[/not-aviable]
andre
andre 26 июня 2011 21:18
Если в двух словах, то скрипт берёт содержимое тега {shоrt-story},

А как сделать, чтобы скрипт брал содержимое тега {fullstory} ? Так как в коротких новостях у меня текста очень мало.
ПафНутиЙ
ПафНутиЙ 26 июня 2011 21:27
не отключать скрипт в полной новости :)
На самом деле никак, это не php и взять контент не из текущего DOM он не может.
andre
andre 26 июня 2011 21:58
Понятно. Жаль альтернативы на php нет. Нравятся, как работают хаки Advanced-Custom и Advanced-Related.
TeaKing
TeaKing 27 августа 2011 19:35
Я изначально и хотел сделать, что бы текст оставался форматированным, но не сделал этого...

Так значит не стоит даже пытаться использовать жирный, курсивный тег, а также шрифты? И даже абзацы?(
ПафНутиЙ
ПафНутиЙ 27 августа 2011 22:42
Почему же? пользуйтесь наздоровье.
TeaKing
TeaKing 27 августа 2011 22:54
Имею ввиду при добавлении новости, т.е. что бы я из этого не использовал, всегда получается - обычный текст...
ПафНутиЙ
ПафНутиЙ 27 августа 2011 23:21
Да, но только при обработке скриптом.
TeaKing
TeaKing 28 августа 2011 15:17
Эх, блин... Хороший скрипт, но придется сносить, т.к. без ббкодов я не могу(

P.S. в будущем не планируете ли, выпустить вторую версию хака, уже с форматированным текстом?
ПафНутиЙ
ПафНутиЙ 28 августа 2011 16:05
Нет, того скрипта, что сейчас есть для 99% случаев достаточно. А если нужно с ббкодами - ставьте хаки/модули, пользуйте custom....
zyklon
zyklon 9 октября 2011 23:50
не работает или криво работает. на шаблоне default в комплекте от версии 8.5 пробывал отображает краткую нормально, а полную тоже самое что и в краткой.
на шабе Gemini в комплекте 9.4 идет. вообще работать не хотит.
вот как то так. делал все по инструкции.
bratoz
bratoz 16 мая 2012 04:08
Воспользовася данным хаком, но потом понял что в моём случае не совсем подходит.

Решил обновится до dle 9.6, и там как раз то что нужно есть. {image-x} , выводит картинку из shortstory
Но ни как не могу понять как к этой картинке скрипт прикрутить?? что бы кроп сробатывал.
Подскажи пожалуйста..
ПафНутиЙ
ПафНутиЙ 16 мая 2012 08:15
js не обрезает картинки. да и не актуален этот скрипт для 9.6 ведь там есть и ограничение символов.
bratoz
bratoz 16 мая 2012 13:05
ПафНутиЙ,
У меня просто уже готовый сайт и картинки уже добавлены давно.

Проблема в том что многие картинки по формату не очень подходят, а кроп как раз бы красиво обрезал...
ПафНутиЙ
ПафНутиЙ 16 мая 2012 13:45
Обсуждаемое тут решение никоим боком не относится к обрезанию картинок, лишь уменьшение и визуальное скрытие лишних частей )
bratoz
bratoz 16 мая 2012 13:54
ПафНутиЙ,
А как добавить кроп тогда?:)
ПафНутиЙ
ПафНутиЙ 16 мая 2012 14:27
block.pro.2 - вполне справляется с задачей)
bratoz
bratoz 16 мая 2012 14:38
ПафНутиЙ,
Нет, блок про не подходит. Он только для топов отлично катит, но выводить 2к новостей одним блок.про нереально будет.
sanyakacer
sanyakacer 21 июня 2012 21:03
Здравствуйте уважаемый админ)
Вот решил поставить себе такую штуку...
Поставил всё прописал как нада но получилось както криво с картинками траблы ну я забрал тег что выводит картинки но мне очень понравилось что новости все сразу выежают) Но вот текст там както тупо вырезан я бы хотел поставить туда текст шортстори я влепил тег "{text}" ну а оно мне выводит тупо всё как было( что делать? подскажите пожалуйста желательно в скайпе-sanyabeliy619skype.com
Хотя ваш блог теперь буду частенько посещать)
ПафНутиЙ
ПафНутиЙ 21 июня 2012 21:11
Используйте модуль Block.Pro.2
sanyakacer
sanyakacer 21 июня 2012 21:36
ПафНутиЙ,
А нельзя оставить всё как есть но просто както переделать тот тег что я вставил?*
ПафНутиЙ
ПафНутиЙ 21 июня 2012 21:39
Можно, никто вам не запрещает, переделывайте.
Я просто вам показал более эффективный способ.
sanyakacer
sanyakacer 21 июня 2012 22:00
ПафНутиЙ,
Просто там сложный какойто етот модуль,наверное будет грузить сайт..НУ подскажите пожалуйста что вставить там чтобы был текст из краткого описания но выплывал как в етом мейкиткуле

$(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>"{text}"</div>");
$("div[class*=image]:empty").hide(2000);
Надеюсь на вашу помощь
ПафНутиЙ
ПафНутиЙ 22 июня 2012 07:16
тег {text} нужно вставлять не в скрипт, а в шаблон.
sanyakacer
sanyakacer 22 июня 2012 12:02
Цитата: ПафНутиЙ
тег {text} нужно вставлять не в скрипт, а в шаблон.

Можно поподробнее поожалуйста
djinn
djinn 22 января 2013 07:09
Здравствуйте! Спасибо за симпатичный вывод новостей!
Подскажите пожалуйста как сделать, что бы скрипт не работал на странице поиска, и как сделать что бы картинка не обрезалась по бокам а равномерно сжималась по центру?
Как вы реализовали такое добавление комментариев, во всплывающем окошке?
Извините за такую кучу вопросов..))

У меня просьба, можно мне тоже капчу как у вас?, там в комменте ссылка битая.
ПафНутиЙ
ПафНутиЙ 22 января 2013 08:53
Цитата: djinn
Подскажите пожалуйста как сделать, что бы скрипт не работал на странице поиска, и как сделать что бы картинка не обрезалась по бокам а равномерно сжималась по центру?

Вывод контента на страницах: http://dle-news.ru/extras/online/startnews.html
Чтобы не сжималась - задайте максимальную ширину или фиксированную, равной максимально допустимой в вашем случаи. А вообще рекомендую воспользоваться модулем blockpro он умеет обрезать картинки как надо.
Цитата: djinn
Как вы реализовали такое добавление комментариев, во всплывающем окошке?

Модуль древовидных комментариев умеет так делать.

Цитата: djinn
У меня просьба, можно мне тоже капчу как у вас?, там в комменте ссылка битая.

вот она гуглится с первого раза.
djinn
djinn 22 января 2013 09:09
Спасибо за ответ!
Чтобы не сжималась - задайте максимальную ширину или фиксированную...

Я имел ввиду что бы сжималась равномерно, а картинка обрезается при сжатии - снизу и с правого боку...
Как сделать что бы не обрезалась, а равномерно сжималась по центру?

И к стати с помощью Blockpro можно выводить новости на главной вместо обычных.. а не гденибудь в левом блоке или в правом...?

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

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

Информация

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