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 My Documents
ComboStrap WebSite

Nov 28 16:36

A Combostrap WebSite is a collection of files (pages, images, ...) that can run everywhere thanks...

Undraw Design Objectives Re 94pd
How to add an Ad with the Ad Tag ?

Nov 28 16:36

The ad tag is a syntax component of the ads module that will insert a ad (ie ad page). For instance,...

Undraw Design Objectives Re 94pd
ComboStrap - Ads

Nov 28 16:36

Ads is a module that permits to add Ads snippet (known as Ad Unit) in your website. Ad Unit the location...

Hidepages Extrabar Configuration
ComboStrap Ads - Global Configuration

Nov 28 16:36

For all ads module, the ads are located in the namespace (directory) called combostrap Ads page have...

Undraw Design Objectives Re 94pd
ComboStrap Ads - Automatic In-Article Ads

Nov 28 16:36

In-article Ads are ads that will show up in the page content. spread the ads roughly to have one...

Ad Sense Snippet
What is an ad Page?

Nov 28 16:36

An ad page is a page that contains the ad snippet (ie a bit of code that defines the content of the ad)....

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