The iterator: Pages iteration made easy

Undraw Building Websites I78t

About

iterator permits to loop over a content fragment in order to create a list of pages.

You may use it to generate any layout.

In particular, you may use it to generate the following layouts:

Layout Description
grid a grid of cells that adapt to the screen size
carrousel horizontal list navigation with control
simple list a vertical list with bullet points
table a table
masonry bricks that fill the wall

Example

Masonry

The below iterator example:

  • will generate the last 4 modified pages (defined by the page sql in the data node)
select order by date_modified desc limit 4

The iterator markup:

<iterator>
    <data>select where is_low_quality = 0 order by date_modified desc limit 6</data>

    <heading d3 align="center"> The last 6 Changes </heading>
    <masonry>
        <fragment>
            <card clickable>
            <page-image ratio="16:9"/>
            === $title ===
            <itext color="muted">${date_modified | format('MMM dd HH:mm')}</itext>
            
            ${description | head(100,'...')} [[$path| ]]
            </card>
        </fragment>
    </masonry>
</iterator>

The Result:

The last 6 Changes
Undraw Stepping Up
How to create a top menu bar?

Apr 15 08:36

The theme system supports the creation of a slot page called header slot in order to create a menu bar...

Material Design Choose Icon
How to configure the Favicons

Apr 15 08:35

This page is an HowTo that shows you how to choose and install a favicon and your logo image with ComboStrap. You...

Move Plugin Rename
Third Plugins - ComboStrap Getting Started

Apr 15 08:35

This page is an optional and informative step that highlights important information that you should now...

Dokuwiki Admin Window Default Template
How to install Combo ?

Apr 15 08:34

Combo is the bundle of components that complements the strap template. This step shows you how to install...

Undraw Stepping Up
How to install Dokuwiki ?

Apr 15 08:34

Because ComboStrap is built on top of the Dokuwiki Engine, the first step is to install it. This page...

Undraw Building Websites I78t
How to define your data set with Sql

Apr 15 08:28

This page defines the sql that can be used to retrieve data from pages

Syntax

<iterator>
   <data>select where variable = 'xxx'</data>
   ... header  markup...
   <fragment>Fragment markup with $variable1 ... $variable2</fragment>
   ... footer  markup...
</iterator>

where:

  • data contains a page sql
  • fragment is a content fragment that will be repeated for each data row.
  • If your iteration is time-based, you may need to set a page cache expiration frequency.
  • If the data does not return any rows, the iterator content is not printed (ie header and footer included)




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How can I generate a list of pages?

This howto shows you how you can generate a list of pages with the iterator components. page sql a list element with a link created from: the path and the title variables ...
Undraw Animating
How to generate a list of events?

This howto shows you how you can generate a list of pages event with the iterator components. page sql a list element with the date_start and date_end formated date of a page event...
Undraw Animating
How to generate and layout a list of pages with a grid and their image?

This howto shows you how to use the page sql, a fragment, the iterator and to generate a grid layout.
Undraw Animating
How to get a serie of images with the same dimension (Width and Height) ?

When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual. To achieve it, you need to use the combine the ratio...


Recommended Pages
Backlink Action
Backlinks management in ComboStrap

Backlinks are important because they give extra-navigation possibilities and gives also more weight to pages. This article tell you everything about backlinks in ComboStrap
Card Illustration
ComboStrap UI - Card

A card is a box composed of an image, a text and a call to action
Combostrap Hierarchical Breadcrumb
ComboStrap UI - Hierarchical Breadcrumb

A Hierarchical Breadcrumb is a breadcrumb that shows where the page is located in the page system tree in hierarchical order. The label shown is the page name. Combostrap offers two types of hierarchical...
Undraw Website Builder Re Ii6e
ComboStrap UI - Masonry

masonry is a layout component. Its children are laid out like a mason-fitting stones in a wall (placing elements based on available vertical space). This layout is handy when you want to lay out a list...
Undraw My Documents
Descendant Pages

Descendant pages are pages that have the same or a higher level than the current page in the page system. The descendant's pages can be queried to create an illustrative list in index pages. You can...
Featured Icon

The featured icon is an illustrative image that you can render with the page-image tag. This is an illustrative icon for the page. You would use it generally within an iterator. With the page image...
Surfer600
First image

The first image is an illustrative image that you can render with the page-image tag. As its name indicates, this is the first image found on your page. You would use it generally within an iterator....
Undraw Growth Chart R99m
How ComboStrap tackles SEO to bring you more visitors?

seoSearch engine optimization (or SEO) is the process of making your website optimized for search/enginesearch engine (Google, Bing, ...) to get to the top of their result. On a website level, it means:...
Undraw Website Builder Re Ii6e
How to create a carrousel layout

The carrousel component permits to layout and to scroll components horizontally.
How to define your data set with Sql

This page defines the sql that can be used to retrieve data from pages



Task Runner