This is an old revision of the document!


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: —-


Frontend:

Frontendausgabe 01:

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

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:

config

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


Artikel float

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

Annahme: Der 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 in den umschließenden Container (700px). Somit wird der dritte Artikel-Container (und alle folgenden) in der nächsten Zeile dargestellt. usw.

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.1261754574.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
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