ПафНутиЙ-Блог » Статьи » Вывод новостей в 2 колонки.

Вывод новостей в 2 колонки.

26.07

40 405

Итак начнём.

Эта статья доработанный вариант моей же статьи опубликованной на 4dle.ru.

Задача:
1. Вывод новостей на главной странице в 2 колонки.
2. При переходе в категорию и т.п. в одну колонку.

Средства:
- Стандартные средства движка ДЛЕ+CSS+HTML (никаких скриптов и примочек).
- Удобные для вас редакторы или редактор.
- Прямые руки.

Известные проблемы:
1. Бывают длинные заголовки новостей (на 2 и более строчки).
2. Разное количество символов в {short-story} (от 1 до 1000+).
3. Изображения в теле новости (размер ограничен разумными пределами)

Все эти а так же специфические "проблемы" заставляющие новость менять высоту, думаю всем известны, и каждый борется с ними по своему.

Постараемся решить их:

1. Для начала открываем блокнот (я использую notepad++) и создаём 2 пустых документа, сохраняем их как half_story.tpl - это будет шаблон для вывода коротких новостей на главную и on_cat_story.tpl это будет шаблон вывода коротких новостей во всех остальных местах.

2. Открываем шаблон shortstory.tpl и удаляем всё его содержимое, вместо него пишем:

[not-category=XX]{include file="half_story.tpl"}[/not-category]
[category=XX]{include file="on_cat_story.tpl"}[/category]

Из кода видно что этими строками мы подключаем в шаблон shortstory.tpl 2 других шаблона,
где XX - номера ВСЕХ категорий через запятую, к которым будет применён вывод в 2 колонки.
теги [category=XX] и [not-category=XX] я использовал вместо [aviable=main] и [not-aviable=main] т.к. при использовании [aviable], при переходе например в каталог, новости будут отображаться в 2 колонки как на главной странице а нам требуется только в одну.

3. Переходим к half_story.tpl.
вот HTML-код этого шаблона:

<div style="width: 50%; float: left;">
<div class="tl"></div><div class="tr"></div>
<div class="inside">
    <div style="overflow: hidden; height: 38px;"><h1>[full-link]Вывод новостей в 2 колонки.[/full-link]</h1> {approve}</div>
         <div class="news_author">{link-category}<br />Добавил: {author} - {date}<br /> Просмотров: <b>{views}</b> [edit]Редактировать[/edit]</div>
         <p class="tp"><b>Содержание новости<cite>{short-story}</cite></b></p>
         <div>{rating} &nbsp;  [com-link]Комментарии ({comments-num})[/com-link]</div>

         </div>
<div class="bl"></div><div class="br"></div>
</div>

- Для вывода в 2 колонки я заключил содержимое шаблона в <div style="width: 50%; float: left;">.......</div>
- Для предотвращения изменения высоты новости я использовал фиксированную высоту для заголовка и overflow: hidden;
- Для тега {short-story} я использовал всплывающую подсказку на CSS:

.tp {position:relative;text-indent:0;}
.tp b {
    font: bold 13px cursive;
    text-align: center;
    text-decoration: none;
}
.tp b cite {display:none; font: normal 13px cursive; margin-bottom: 10px;}

.tp b:hover cite {
   background:#fff;
   border:solid 1px #ccc;
   color:#000;
   display:block;
   padding:7px;
   position: absolute;
   top:0px;
   left:-11px;
   z-index:10;
   text-align:left;
   width:100%;
   text-decoration: none;
   font: normal 13px cursive;
   opacity: 0.9;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3)";
   filter: alpha(opacity=90, enabled=1) progid:DXImageTransform.Microsoft.Shadow(color=#cacaca, direction=135, strength=3);
}

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

4. CSS-код для вывода новостей общий и для half_story.tpl и для on_cat_story.tpl:

.tl, .tr, .bl, .br { 
    background-image: url("../images/news-corner.gif"); 
    height: 10px;
    font-size: 2px;
    }
.tl, .bl { 
    margin-right: 10px;
    }
.tr, .br { 
    margin-left: 10px;
    margin-top: -10px;
    margin-right: 10px;
    }
.tr {
    background-position: 100% 0;
    }
.bl { 
    background-position: 0 -10px;
    }
.br { 
    background-position: 100% -10px;
    margin-bottom: 10px;
    }
.inside {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #fff;
    padding-left: 10px;
    padding-right:10px;
    margin: 0 10px 0 0;
    }
.inside h1 {
    font: bold 16px tahoma;    
    text-decoration: none
}
.inside h1 a{
    font: bold 16px tahoma;    
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

.inside h1 a:hover {
    text-decoration: underline;
}

Как реализовать закруглённые углы с помошью 1 картинки и 5 дивов смотрите в предыдущей статье.

5. Переходим к on_cat_story.tpl.

HTML-код не сильно отличается от half-story.tpl поэтому не буду на нём подробно останавливаться:

<div class="tl"></div><div class="tr"></div>
<div class="inside">      
         <div class="news_title">{link-category} - [full-link]Вывод новостей в 2 колонки.[/full-link] {approve}</div>
         <div class="news_author">Добавил: {author} - {date} | Просмотров: <b>{views}</b> [edit]Редактировать[/edit]</div>
         <div class="news_content">{short-story} <br /><br />[full-link]<b>Подробне...</b>[/full-link]<br /><br /></div>
         <div class="news_fut">{rating} &nbsp;  [com-link]Комментарии ({comments-num})[/com-link]
      </div>
</div>
<div class="bl"></div><div class="br"></div>

Как видно убраны все "ограничения" размеров новости.

Вот собственно и всё.

Демо вы можете увидеть на моём демо-сайте выбрав шаблон tm-saratov2
Пример конечно грубоват, но я ставил цель сделать не красиво, а просто показать реализацию на конкретном примере.

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

Здравствуй теска!
Отличный хак хочу заметить!
На 4 дле выкладывал код, там было реализованно через костум вывод по категориям!
Так вот! Возможно ли реализовать чтобы можно было 1 новость к примеру оставить в нормальном виде а все остальные уже в колонках! Я так понял здесь id категории используется! А если использовать id новости?

ПафНутиЙ 15 августа 2009 21:17

#16

Цитата: SpauN

Я так понял здесь id категории используется! А если использовать id новости?

Нет никаких id тут не используется, чисто на css всё решено, а [not-category=XX]{include file="half_story.tpl"}[/not-category]используется потому что при использованиии [aviable] будет не везде корректный вывод новостей, например при переходе в каталог.

Цитата: SpauN

Возможно ли реализовать чтобы можно было 1 новость к примеру оставить в нормальном виде а все остальные уже в колонках!

Да, возможно, можно попробовать сделать вывод через custom:
{custom category="XX" template="on_cat_story" aviable="main" from="0" limit="1" cache="yes"} - это будет первая новость,
{custom category="XX" template="shortstory" aviable="main" from="1" limit="10" cache="yes"} - а это все остальные новости.

SpauN 15 августа 2009 21:43

#17

Ага большое спасибо!
Реализовал! Довольно ни плохо получилось!
На счет id я тебя понял! Просто для вывода определенной категории нужен её id!
Я сам не подозревая создал свой собственный шаблон! goodgood

, у тебя возможно будет его выложить? (Только еще не доработал! Если можно, то позднее выложу!)

ПафНутиЙ 15 августа 2009 22:46

#18

Цитата: SpauN

у тебя возможно будет его выложить?

Да, конечно, выкладывай, посмотрим smile

axekoff 19 августа 2009 17:13

#23

Есть небольшая загвоздочка в этом кодике... он хороший спору нет ... но в IE ни в одной версии нормально неработает :( Я тут немножко другой вариант придумал про две колоночки на первой сделать только вот над одни башку ломаю. как без кастома можно выводить отдельные категрии новостей???

ПафНутиЙ 19 августа 2009 18:14

#25

Цитата: axekoff

но в IE ни в одной версии нормально неработает

Не работает только корректное отображение картинок в хинте, в остальном вроде всё ок, смотрел на IE 7.
Ну а вообще можно сделать для ie чтобы хинт был на яваскрипте, я недавно натыкался на такой скрипт, который корректно показывает картинки в хинте, но убей не помню, как я вообще на тот сайт попал и найти его теперь не могу....
Если кто найдёт нормальный скрипт хинта на javascript - буду очень признателен. ну и метод выода в 2 колонки станет полностью кроссбраузерным.
Ну а вообще на этом форуме есть несколько решений проблемы IE и hover

Цитата: axekoff

как без кастома можно выводить отдельные категрии новостей???

Никак

P.S.
Обычно вывод в 2 колонки требуется для варезников и т.п. сайтов, а там как правило картинку делают одинакового размера для всех типов новостей, либо посредством модуля, либо (что более правильно) через доп поле, так что впринципе загвоздок не бывает с IE.

Allan Kiipli 27 сентября 2009 15:15

#65

Привет. Как избавиться от такого косяка? Наблюдается в ИЕ 8, Мозилле, при разлчных разрешениях от 1024 до 1920. Скрин http://img5.imageshack.us/img5/741/prim.png

ПафНутиЙ 27 сентября 2009 22:05

#66

Метод к сожалению несовершенен,
советую поискать какие либо хаки для ie и ff по теме hover
всё хочу прикрутить нормальный хинт, но руки не доходят.

kaktyc 27 января 2011 10:20

#504

блин, у меня и в полной новости коротко( как сделать чтобы в короткой так было а в полной полная?

ПафНутиЙ 27 января 2011 12:01

#505

поставить тег full-story вместо short-story

kaktyc 28 января 2011 03:50

#506

блин, дятел я где именно поставить? езде менял и не че(

ПафНутиЙ 28 января 2011 07:25

#507

в fullstory.tpl

kaktyc 28 января 2011 09:23

#508

все понял,) но как уменьшить картинки в кроткой новости? они весь вид портят(
(знаю достал, но ты любишь людям помогать lol

)

ПафНутиЙ 28 января 2011 10:07

#509

Всё элементарно, надо просто их сделать поменьше :biggrin:
На самом деле в настройках есть настройки изображений, так же есть css, jquery, php в конце концов.

kaktyc 28 января 2011 10:46

#510

тыкните меня носом как это сделать?

ПафНутиЙ 30 января 2011 20:05

#511

_http://dle-news.ru/extras/online/all10.html

bratoz 1 февраля 2011 00:24

#512

Клёвая штука!
Но есть проблемка с выводом постраничной навигации.
В общем вот:
http://online.videotuts.ru/

bratoz 1 февраля 2011 00:25

#513

Особенно на второй странице

bratoz 1 февраля 2011 00:32

#514

И ещё.
Как сделать что бы название(title) отображался вот таким способом
http://s016.radikal.ru/i334/1101/d9/602e3322a895.jpg
По верх картинки с прозрачным фоном.

ПафНутиЙ 1 февраля 2011 00:41

#515

Цитата: bratoz

Но есть проблемка с выводом постраничной навигации.

задать для класса навигации clear:both и навигация не будет убегать.

Цитата: bratoz

По верх картинки с прозрачным фоном.

если картинки через доп поля - ничего сложного, спозиционировать просто абсолютно и z-index задать :)

bratoz 1 февраля 2011 00:48

#516

Спасибо за быстрый ответ.
Буду пробовать!!!

UPD1.
Первый вопрос сразу же решил всё.

А во со вторым что-то не до пру не много.
Доп. поля для картинок используются

UPD2.
Ну в общем попробовал, и что-то получилось.
Но есть проблемка, когда позиционирую блок, то он скачет по отношению ко всей странице.
Как сделать что бы изменялось по отношению к inside?

P.S.
Решил взять код для half_story.tpl от сюда

UPD3.
Ееееее!!! Я это сделал!!! Нужно было всего навсего для класса inside выставить position:realtive!!!
Ну это если кому понадобится))
P.S.
А можно ли как-то сделать что бы прозрачный фон(title) на тёмных картинках менял цвет с чёрного, на белый?

ПафНутиЙ 2 февраля 2011 07:22

#517

Цитата: bratoz

А можно ли как-то сделать что бы прозрачный фон(title) на тёмных картинках менял цвет с чёрного, на белый?

это врядли получится без правки двига.

bratoz 2 февраля 2011 08:43

#518

Ок. спасибо.

Тогда вопрос ещё один, по поводу tooltip.
Я устанивал твой код, так вообще ни чего не происходит. У становил код с сайта на который ты ссылку дал - webmasters. Всё работает. Подсказки всплывают.
Но дело сейчас не в этом.
Мне нужно что бы всплывающая подсказка работала для short-story.
А у меня при установке твоего когда, который ты дал, ни чего не работает. Тупо отображается шорт стори и то с глюком))

ПафНутиЙ 2 февраля 2011 13:03

#519

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

bratoz 2 февраля 2011 17:52

#520

Эххх... тут опыт нужен во всё этом.
А я только начал разбираться в этом деле:(

Не соображу ни фига))

bratoz 2 февраля 2011 18:44

#521

Странно.
Комент написал а он удалился тут же...

ПафНутиЙ 2 февраля 2011 19:22

#522

Цитата: bratoz

Странно.Комент написал а он удалился тут же...

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

bratoz 1 сентября 2012 15:41

#2112

Приехал с отпуска и встала задача простейшая. Убрать с главной страницы все товары (через админку убрал)
А на главной сделать стандартный вывод в 1 колонку (но только для 1 категории специальной для новостей сайта). Мои мозги не хотят после отпуска работать...

Вот что находится в short-story:

[category=147]{include file="on_cat_story.tpl"}[/category]
[not-category=147]{include file="half_story.tpl"}[/not-category]

147 это id категории с новостями.

Вот сайт
http://autoban18.ru/

Отображается всё по шаблону half_story, а мне надо по шаблону on_cat_story

Оба шаблона разные это сто процентов, т.к. в on_cat_story нету css + добавлен тег {short-story}

В категориях half_story работает нормаьно!

Помоги пожалуйста :))

ПафНутиЙ 1 сентября 2012 15:43

#2113

слишком перемудрил.
используй тег custom ))

bratoz 1 сентября 2012 16:20

#2114

ПафНутиЙ,
Блин! Вот начинал же с него!
Как всегда...))

Спасибо!

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

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

Информация

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