Хак Dle красивый вывод новостей без правки php-кода

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Хак Dle красивый вывод новостей без правки php-кода

Простое и легкое решение позволит без правки php-кода красиво выводить новости на страницах Вашего сайта. Позволяет не просто оформить новости через класс стилей CSS, а сделать одинаковым, удобным для чтения и угодить пользователям и поисковикам.
Сделать это можно легко,с минимальным вмешательством в код Вашего шаблона dle.
Все что нам понадобиться jQuery и CSS.
Хак Dle красивый вывод новостей без правки php-кода
Основная задача:
- В короткой новости выводим только первую картинку определенного размера и кусок описания.
- Настроить внешний вид через класс стилей 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>


Теперь основной небольшой скрипт , который и будет отвечать за " внешний вид новостей" на сайте:
В таком варианте новость будет обрезаться не только в краткой но и в полной новости.
Для краткой новости это кусок скрипта вставить в шаблон shortstory.tpl

<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;        }


Внимание ! В данный момент размер картинки установлен 80*80 px , если нужен другой размер то его легко поменять в этом месте

.modnews .image {    display: block;    height: 80px; (  высота  картинки )    width: 80px; (ширина картинки)    margin-right: 5px; (отступ от границы)    overflow: hidden;    float: left; (расположение с левой стороны right (с правой ) center (в центре))     }


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

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

Предлагаем dle хаки скачать как красивый вывод новостей без правки php-кода
  • 100
Рубрика: DLE хаки » Хак для DLE
Ранее » Подсветка комментариев автора новости с помощью jQuery« Далее Хак Dle Информер прогноз погоды от yandex
Добавление комментарияОставить комментарий