{{indexmenu_n>10}} ====== Article paginate and float ====== It is possible to paginate articles in list view, e.g. display 3 of 6 existing articles on one page and the other 3 on the next page. ---- **Docu:** -- \\ **Forum:** [[http://forum.phpwcms.org/viewtopic.php?f=16&t=18209&p=112084|Artikel Paginieren]] \\ **Forum:** [[http://forum.phpwcms.org/viewtopic.php?p=115328#p115328|Articlelisting zweispaltig]] \\ **Author:** K.Heermann (flip-flop) http://planmatrix.de //2009/12/25 // \\ **CMS Version:** >= V1.3x \\ **Version:** V1.0 \\ **Update:** -- \\ **Tag:** -- Filename: **conf.template_default.inc.php** \\ Folder: ** /config/phpwcms/ ** **Condtion:** -- \\ ---- ---- \\ ===== Paginate ===== ==== Frontend: ==== **Frontend output 01:** \\ {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_1.gif|}} **Frontendausgabe 02:** Spiel mit Parametern //siehe conf.template_default.inc.php (Little play)// \\ {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_01_1.gif|}} ==== Backend: ==== **ARTICLE** \\ {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_be_1.gif|}} **Adoption:** 6 Articles existing, 3 to display per page. **ADMIN -> site structure -> category** \\ {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_be_01_1.gif|}} For this it is displayed a separate Navigation if pagination is turned on. This menu is configured in the file **/config/phpwcms/conf.template_default.inc.php**: ==== Example No. 1 ==== === Code === // Original // $template_default['article_paginate_navi'] = '
{PREV:«} {NEXT:»} page #/##, result ###-####, {NAVI:1-3, ||}
'; // {NAVI:123, // Little play $template_default['article_paginate_navi'] = '
  [ {PREV:«} -- {NEXT:»} ]     [Seite (page) # von (off) ##]     [Resultat (result) ###-####]     [{NAVI:1-3,> ↔ <|<|>}]
'; // {NAVI:123, $template_default['article_paginate_show'] = 'top bottom rt{RT}'; //where should the navi be shown - possible values: top and/or bottom and/or rt:{RT}
\\ === CSS === /* Article pagination -------------------- */ div.paginate{ width: 603px; height:16px; border: 1px solid #ccc; margin-bottom: 5px; font-size: 110%; } div.paginate-top{ background: yellow; } div.paginate-bottom{ background: lightgreen; clear: both; } /* Little play --------------- */ div.paginate01-top{ background: gold; } div.paginate01-bottom{ background: aquamarine; clear: both; } \\ ==== Example No. 2 ==== - with **{NAVI:123, .....** {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_03_1.gif|}} === Code === $template_default['article_paginate_navi'] = '
{PREV:« zurück «}
Seite # von ##
- {NAVI:123, - ||} -
{NEXT:» nächste »}

'; // $template_default['article_paginate_show'] = 'rt{ART_PAGI_NAV} top bottom'; // top bottom rt{RT} where should the navi be shown - possible values: top and/or bottom and/or rt:{RT}
\\ The self created tag **{ART_PAGI_NAV}** is a replacer for the pagination navigation. \\ The tag can be placed anywhere in the template, at which the pagination Navi is to stand. \\ === CSS === /* --------- article pagination ----------- */ .article_paginate_navi { font-family: verdana, arial, sans-serif; font-size: 11px; background: #fff url(../../picture/navi02/article_navi.jpg) no-repeat left top ; color: #444; margin: 21px 0 0 0; padding: 3px 15px 0 15px; height: 20px; } .article_paginate_navi a { color: #1E3F82; font-weight: bold; text-decoration: none; } .article_paginate_navi a:hover { color: #D74600; font-weight: bold; text-decoration: none; } .apn_prev { float: left; color: #555; margin: 0; padding: 0 20px 0 0; } .apn_mid { float: left; color: #888; margin: 0; padding: 0 0px 0 30px; } .apn_navi { float: left; color: #D74600; margin: 0; padding: 0 0 0 60px; } .apn_next { float: right; color: #555; margin: 0; padding: 0 0px 0 20px; } \\ \\ ===== Article float ===== **Adoption:** The content of the enclosing container has a width of 700px. \\ The containers for each article have a width of 300px. With ##float: left;## now we lined the containers to each other, until the width dimension of the surrounding container is reached. * 300px + 5px + 300px + 5px = 610px * 700px - 610px = 90px * It fits so no third article container //(300px + 5px)// into the surrounding container //(700px)//. Thus, the third article-container (and all following) is shown in next lones. {{:deutsch:phpwcms-system:artikel:vorlagen:artikel-liste:article_float_and_pagination_fe_02_1.gif|}} //(See pictures above ("front output")//. \\ Filename: **list_float01.tmpl** \\ Folder: ** /template/inc_cntpart/articlesummary/list/ ** ==== Template ==== [SPACE][/SPACE]
[IMAGE]
[ARTICLELINK][/ARTICLELINK]{IMAGE}[ARTICLELINK][/ARTICLELINK] [CAPTION]
{CAPTION}[COPYRIGHT] {COPYRIGHT}[/COPYRIGHT]
[/CAPTION]
[/IMAGE] [TITLE]

{TITLE}

[/TITLE][SUB]

{SUB}

[/SUB][SUMMARY]
{DATE:j. F Y lang=DE} {SUMMARY}
[/SUMMARY][MORE] [/MORE]
\\ ==== CSS ==== /* Article list --------------------------- */ .phpwcmsArticleListEntry { clear: both; } /* Article list float --------------- */ .phpwcmsArticleListEntry-float { float: left; width: 288px; height: 170px; border: 1px solid #ccc; background: #eee; padding-left: 10px; margin: 0 5px 5px 0; } .phpwcmsArticleListImage { float: left; margin-right: 10px; margin-bottom: 10px; padding-top: 3px; } .phpwcmsArticleListImageCaption { padding-top: 5px; } /* ---------------------------------------- */