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


Рубрика: DLE (DataLife Engine)
Метки: | |
Просмотров: 9129

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

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

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

И это не спроста, если скажем картинку поставить с боку, то возможны 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 , написано по личному опыту.


  • Комментариев: 0

  • Вконтакте

  • Facebook:

    Оставьте комментарий!

    grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

    Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

    Имя и сайт используются только при регистрации

    Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email. При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д., а также подписку на новые комментарии.

    Авторизация 

    (обязательно)