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

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

26.07
30
38 862
Вывод новостей в 2 колонки.



Итак начнём.

Эта статья доработанный вариант моей же статьи опубликованной на 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 колонки я заключил содержимое шаблона в <!--scode1--><!--escode1--><div style="width: 50%; float: left;">.......</div><!--scode2--><!--escode2-->
- Для предотвращения изменения высоты новости я использовал фиксированную высоту для заголовка и <!--scode1--><!--escode1-->overflow: hidden;<!--scode2--><!--escode2-->
- Для тега {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
Пример конечно грубоват, но я ставил цель сделать не красиво, а просто показать реализацию на конкретном примере.

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

Комментарии

SpauN
SpauN 15 августа 2009 17:32
#15
Здравствуй теска!
Отличный хак хочу заметить!
На 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
SpauN 15 августа 2009 21:43
#17
Ага большое спасибо!
Реализовал! Довольно ни плохо получилось!
На счет id я тебя понял! Просто для вывода определенной категории нужен её id!
Я сам не подозревая создал свой собственный шаблон! goodgood, у тебя возможно будет его выложить? (Только еще не доработал! Если можно, то позднее выложу!)
ПафНутиЙ
ПафНутиЙ 15 августа 2009 22:46
#18
Цитата: SpauN
у тебя возможно будет его выложить?

Да, конечно, выкладывай, посмотрим smile
axekoff
axekoff 19 августа 2009 17:13
#23
Есть небольшая загвоздочка в этом кодике... он хороший спору нет ... но в IE ни в одной версии нормально неработает :( Я тут немножко другой вариант придумал про две колоночки на первой сделать только вот над одни башку ломаю. как без кастома можно выводить отдельные категрии новостей???
ПафНутиЙ
ПафНутиЙ 19 августа 2009 18:14
#25
Цитата: axekoff
но в IE ни в одной версии нормально неработает

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

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

Никак smile

P.S.
Обычно вывод в 2 колонки требуется для варезников и т.п. сайтов, а там как правило картинку делают одинакового размера для всех типов новостей, либо посредством модуля, либо (что более правильно) через доп поле, так что впринципе загвоздок не бывает с IE.
Allan Kiipli
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
kaktyc 27 января 2011 10:20
блин, у меня и в полной новости коротко( как сделать чтобы в короткой так было а в полной полная?
ПафНутиЙ
ПафНутиЙ 27 января 2011 12:01
поставить тег full-story вместо short-story
kaktyc
kaktyc 28 января 2011 03:50
блин, дятел я где именно поставить? езде менял и не че(
ПафНутиЙ
ПафНутиЙ 28 января 2011 07:25
в fullstory.tpl
kaktyc
kaktyc 28 января 2011 09:23
все понял,) но как уменьшить картинки в кроткой новости? они весь вид портят(
(знаю достал, но ты любишь людям помогать lol )
ПафНутиЙ
ПафНутиЙ 28 января 2011 10:07
Всё элементарно, надо просто их сделать поменьше :biggrin:
На самом деле в настройках есть настройки изображений, так же есть css, jquery, php в конце концов.
kaktyc
kaktyc 28 января 2011 10:46
тыкните меня носом как это сделать?
ПафНутиЙ
ПафНутиЙ 30 января 2011 20:05
_http://dle-news.ru/extras/online/all10.html
bratoz
bratoz 1 февраля 2011 00:24
Клёвая штука!
Но есть проблемка с выводом постраничной навигации.
В общем вот:
http://online.videotuts.ru/



bratoz
bratoz 1 февраля 2011 00:25
Особенно на второй странице
bratoz
bratoz 1 февраля 2011 00:32
И ещё.
Как сделать что бы название(title) отображался вот таким способом
http://s016.radikal.ru/i334/1101/d9/602e3322a895.jpg
По верх картинки с прозрачным фоном.
ПафНутиЙ
ПафНутиЙ 1 февраля 2011 00:41
Цитата: bratoz
Но есть проблемка с выводом постраничной навигации.

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

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

если картинки через доп поля - ничего сложного, спозиционировать просто абсолютно и z-index задать :)
bratoz
bratoz 1 февраля 2011 00:48
Спасибо за быстрый ответ.
Буду пробовать!!!

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

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

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

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

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

это врядли получится без правки двига.
bratoz
bratoz 2 февраля 2011 08:43
Ок. спасибо.

Тогда вопрос ещё один, по поводу tooltip.
Я устанивал твой код, так вообще ни чего не происходит. У становил код с сайта на который ты ссылку дал - webmasters. Всё работает. Подсказки всплывают.
Но дело сейчас не в этом.
Мне нужно что бы всплывающая подсказка работала для short-story.
А у меня при установке твоего когда, который ты дал, ни чего не работает. Тупо отображается шорт стори и то с глюком))
ПафНутиЙ
ПафНутиЙ 2 февраля 2011 13:03
в шортстори мого кавычек, из-за этого ничего не получится. пробуй этот метод совместить с тултипом, может прокатит smile
bratoz
bratoz 2 февраля 2011 17:52
Эххх... тут опыт нужен во всё этом.
А я только начал разбираться в этом деле:(

Не соображу ни фига))
bratoz
bratoz 2 февраля 2011 18:44
Странно.
Комент написал а он удалился тут же...
ПафНутиЙ
ПафНутиЙ 2 февраля 2011 19:22
Цитата: bratoz
Странно.Комент написал а он удалился тут же...

это из-за глючного дерева коментариев, настроено на ограничение до 5ти уровней вложенности, и 6й уровень почему то некорректно добавляется, должен добавляться как новый комент.
bratoz
bratoz 1 сентября 2012 15:41
Приехал с отпуска и встала задача простейшая. Убрать с главной страницы все товары (через админку убрал)
А на главной сделать стандартный вывод в 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
слишком перемудрил.
используй тег custom ))
bratoz
bratoz 1 сентября 2012 16:20
ПафНутиЙ,
Блин! Вот начинал же с него!
Как всегда...))

Спасибо!

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

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

Информация

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