You are here: Willkommen im phpwcms-HowTo:wiki » Documentation (EN) » phpwcms System » ARTICLE » Templates » Article list with CP included » Article paginate and float

Show pagesource Old revisions

Recent changes Index

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Article paginate and float
- Paginate
  - Frontend:
  - Backend:
  - Example No. 1
    - Code
    - CSS
  - Example No. 2
    - Code
    - CSS
- Article float
  - Template
  - CSS

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: Artikel Paginieren
Forum: 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:

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

Backend:

ARTICLE

Adoption: 6 Articles existing, 3 to display per page.

ADMIN → site structure → category

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

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

Example No. 2

- with {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}

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

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

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.

(See pictures above (“front output”).

Filename: list_float01.tmpl
Folder: /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;
}
 
/* ---------------------------------------- */

english/phpwcms-system/article/templates/article-list/paginate-and-float.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions