NAVIGATION
Table of Contents
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
// Original // $template_default['article_paginate_navi'] = '<div class="paginate paginate-{POS}">{PREV:«} {NEXT:»} page #/##, result ###-####, {NAVI:1-3, |<span>|</span>}</div>'; // {NAVI:123, // Little play $template_default['article_paginate_navi'] = '<div class="paginate paginate01-{POS}"> [ {PREV:«} -- {NEXT:»} ] [Seite (page) # von (off) ##] [Resultat (result) ###-####] [{NAVI:1-3,> ↔ <|<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 -------------------- */ 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
$template_default['article_paginate_navi'] = ' <div class="article_paginate_navi"><div class="apn_prev">{PREV:« zurück «}</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:» nächste »}</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
/* --------- 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 --------------------------- */ .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; } /* ---------------------------------------- */
