---json
{
    "canonical": ":iterator",
    "description": "With the fragment iterator, you can loop over a content fragment to create any list of page components such as the list of the last blog or recent pages",
    "low_quality_page": "false",
    "page_id": "5acenddpfdkik3h087892"
}
---
====== The iterator: Pages iteration made easy ======

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


You may use it to generate any [[docs:layout:component:start|layout]]. 


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

^ Layout ^ Description ^
| [[docs:layout:component:grid|grid]] | a grid of cells that adapt to the screen size |
| [[docs:layout:component:carrousel|carrousel]] | horizontal list navigation with control |
| [[docs:lists:list|simple list]] | a vertical list with bullet points |
| [[docs:lists:table|table]] | a table |
| [[docs:layout:component:masonry|masonry]] | bricks that fill the wall |
===== Example =====
==== Masonry ====

The below ''iterator'' example:
  * will generate the last 4 modified pages (defined by the [[sql|page sql]] in the ''data'' node)
<code sql>
select order by date_modified desc limit 4
</code>
  * as a list of [[docs:block:card|card]] (defined in the fragment node)
  * laid out in a [[docs:layout:component:masonry|masonry layout]]
  * with a [[docs:content:heading|display heading]] (ie ''heading d3'')
  * and the [[docs:content:page-image|illustrative image of the page]] (ie ''page-image'')

<hr/>

<webcode name="Default" frameborder="0">
**The iterator markup:**
<code dw>
<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>
</code>
**The Result:**
</webcode>

===== Syntax =====
<code dw>
<iterator>
   <data>select where variable = 'xxx'</data>
   ... header  markup...
   <fragment>Fragment markup with $variable1 ... $variable2</fragment>
   ... footer  markup...
</iterator>
</code>
where:
  * ''data'' contains a [[sql|page sql]]
  * ''fragment'' is a content fragment that will be repeated for each data row.


<note>
  * If your iteration is time-based, you may need to set a [[docs:cache:page_expiration_frequency|page cache expiration frequency]].
  * If the data does not return any rows, the iterator content is not printed (ie header and footer included)
</note>