Artikel paginieren und float

Es besteht die Möglichkeit, Artikel aus der Listendarstellung heraus zu paginieren, z.B. von 6 vorhandenen Artikeln jeweils 3 auf einer Seite anzuzeigen.

Docu:
Forum: Artikel Paginieren
Forum: Articlelisting zweispaltig

Autor: K.Heermann (flip-flop) http://planmatrix.de 2009/12/25
CMS Version: >= V1.3x
Version: V1.0
Update:

Tag:

Dateiname: conf.template_default.inc.php
Verzeichnis: /config/phpwcms/

Bedingung:




Paginieren

Frontend:

Frontendausgabe 01:

Frontendausgabe 02: Spiel mit Parametern siehe conf.template_default.inc.php (Little play)

Backend:

ARTIKEL

Annahme: 6 Artikel vorhanden, 3 sollen pro Seite angezeigt werden.

ADMIN → Seitenstruktur → Kategorie

Dazu wird bei eingeschalteter Paginierung eine eigene Navigation eingeblendet.

Diese Navigation wird in der Datei /config/phpwcms/conf.template_default.inc.php konfiguriert:

Beispiel Nr. 1

Code

conf.template_default.inc.php

// Original
// $template_default['article_paginate_navi'] = '<div class="paginate paginate-{POS}">{PREV:&laquo;} {NEXT:&raquo;} page #/##, result ###-####, {NAVI:1-3, |<span>|</span>}</div>'; // {NAVI:123,
 
// Little play
$template_default['article_paginate_navi'] = '<div class="paginate paginate01-{POS}">&nbsp; [ {PREV:&laquo;} -- {NEXT:&raquo;} ] &nbsp;&nbsp;&nbsp; [Seite (page) # von (off) ##] &nbsp;&nbsp;&nbsp; [Resultat (result) ###-####] &nbsp;&nbsp;&nbsp; [{NAVI:1-3,> &harr; <|<span><|></span>}]</div>'; // {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

/* 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;
}


Beispiel Nr. 2

- mit {NAVI:123, …..

Code

conf.template_default.inc.php

$template_default['article_paginate_navi'] = '
<div class="article_paginate_navi"><div class="apn_prev">{PREV:&laquo; zur&uuml;ck &laquo;}</div><div class="apn_mid">Seite # von ##</div><div class="apn_navi">- {NAVI:123, - |<span style="color:#555">|</span>} -</div><div class="apn_next">{NEXT:&raquo; n&auml;chste &raquo;}</div></div><br class="clear" />'; //
 
$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}


Der sebstkreierte Tag {ART_PAGI_NAV} ist ein Ersetzer für die Paginierungs-Navi. Der Tag kann irgendwo in der Vorlage platzieren werden, an der die Paginierungs-Navi stehen soll.


CSS

css article pagination

/* --------- 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;
    }



Artikel float

Annahme: Der den Content umschließende Container hat eine Breite von 700px.
Die Container für jeden Artikel haben eine Breite von 300px. Mit float: left; reihen wir nun diese Container aneinander, bis das Breitenmaß des umschließenden Containers erreicht ist.

  • 300px + 5px + 300px + 5px = 610px
  • 700px - 610px = 90px
    • Es passt also kein dritter Artikel-Container (300px + 5px) in den umschließenden Container (700px). Somit wird der dritte Artikel-Container (und alle folgenden) in den nächsten Zeilen dargestellt.

(Siehe auch Bilder oben “Frontendausgabe”).


Dateiname: list_float01.tmpl
Verzeichnis: /template/inc_cntpart/articlesummary/list/

Template

[SPACE]<!-- space //-->[/SPACE]
<div class="phpwcmsArticleListEntry-float">
    [IMAGE]<div class="phpwcmsArticleListImage">
        [ARTICLELINK]<a href="{ARTICLELINK}"{TARGET}>[/ARTICLELINK]{IMAGE}[ARTICLELINK]</a>[/ARTICLELINK]
        [CAPTION]<div class="phpwcmsArticleListImageCaption">{CAPTION}[COPYRIGHT]
            <span class="copyright">{COPYRIGHT}</span>[/COPYRIGHT]</div>[/CAPTION]
    </div>[/IMAGE]
    [TITLE]<h1>{TITLE}</h1>
[/TITLE][SUB]    <h3>{SUB}</h3>
[/SUB][SUMMARY]    <div><strong>{DATE:j. F Y lang=DE}</strong> {SUMMARY}</div>
[/SUMMARY][MORE]    <div class="phpwcmsArticleListMore"><a href="{ARTICLELINK}"{TARGET}>{MORE}</a></div>[/MORE]
</div>


CSS

article list float

/* 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;
}
 
/* ---------------------------------------- */
deutsch/phpwcms-system/artikel/vorlagen/artikel-liste/paginieren-und-float.txt · Last modified: 2009/12/25 22:01 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0