Хак для DLE - Короткие новости в виде "уменьшенная картинка и текст рядом"

Для чего нужен такой хак?

Посмотрите на сайты новостей, практически у всех короткая новость выводится так:

Картинка в верху и с низу текст.

И это не спроста, если скажем картинку поставить с боку, то возможны 2 проблемы (в зависимости от шаблонов):

1. Текст будет все равно не с самого верха с боку, а начинаться с низу после картинки.

2. Текст будет как нужно с боку с самого верха, но если его мало, низ рамки будет подниматься сразу к тексту а сама картинка получится вылезший из рамки.

Вот эти 2 проблемы мы и решим в этой статье.

Как сделать маленькую картинку с боку в короткой новости в DLE ?

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

И так, для вывода короткой новости используется файл шаблона shortstory.tpl

Который находится по адресу public_html/templates/имя_вашего_шаблона/shortstory.tpl

В нем находим отвечающий за вывод новости код:

<div class="maincont">{short-story}</div>

В вашем шаблоне вместо maincont может быть написан другой класс, но код {short-story} будет точно, по нему и ориентируемся.

Далее меняем название класса maincont (у вас может быть другое) дописав к нему _short, т.е. будет выглядеть так maincont_short и во внутрь кода между

<div class="maincont_short">

и

{short-story}

вписываем этот код

<a href="{full-link}" rel="bookmark" title="{title}"><img width="150" height="150" src="{image-1}" class="attachment-thumbnail wp-post-image" alt="{title}" title="{title}"></a>

а

{short-story}

приводим к виду

{short-story limit="400"}

В итоге должно получиться следующее

<div class="maincont_short"><a href="{full-link}" rel="bookmark" title="{title}"><img width="150" height="150" src="{image-1}" class="attachment-thumbnail wp-post-image" alt="{title}" title="{title}"></a> {short-story limit="400"}</div>

В этом коде мы пока сделали вывод маленькой картинки.

Весь код пояснять не буду, скажу только что название класса мы поменяли для того, что бы наши изменения не распространялись и на полную новость а в коде width="150" height="150" можно указывать размер выводимых картинок.

Как сделать что бы картинку с боку оптикал текст в DLE ?

Для того что бы текст был с боку с самого верху а не как я писал выше с низу после картинки, нужно будет поправить нам стили в файле стилей style.css, который расположен по адресу public_html/templates/имя_вашего_шаблона/css/style.css

Открываем файл, находим там наш старый стиль maincont

У меня это строка

.maincont img { padding: 3px;border: 1px groove #858585;}

Он как раз указывает информацию о картинке (об этом говорит слово img )

В нем ничего менять не будем, он ведь еще используется и в полной новости.

Копируем всю строку и вписываем сразу же ниже под этой и уже в копии делаем изменения (меняем название на новое нашее и добавляем несколько строк), должно получиться так:

.maincont_short img { padding: 3px;border: 1px groove #858585; float:left; margin-right:10px;}

С названием все понятно, а в конце мы дописали что картинка будет распологаться с лева, а текст от картинки в 10 пикселях с права.

Как сделать что бы при выводе короткой новости с большой картинкой и маленьким текстом, картинка не вылазила бы за края в DLE ?

Это делается очень просто, смотрите предыдущую нашу правку style.css

Еще чуть ниже дописываем

.maincont_short { overflow: hidden; height: 210px;}

.maincont_short - это наш новый класс, если у вас он другой, не забудьте указать свой.

height: 210px; - это высота рамки где размещается короткая новость (должна быть чуть больше высоты картинки указанной в шаблоне (см. текст выше)

overflow: hidden; - прячем весь лишний текст

Вот и все, дело сделано, шаблон стал не похож на другие.

Автор: BuxarNET (Тяшкевич Виталий) для IntFAQ.ru , написано по личному опыту.