Простое и легкое решение позволит без правки 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-кода