How to generate and layout a list of pages with a grid ?
About
This howto will show you how to:
Steps
Page Sql: How to select the pages
With page sql, you can select pages via a select statement.
Page Sql permits to query pages in a lot of fashion.
For this example, we will select the last 5 modified howto with the following sql.
select from pages where path like ':howto%' order by date_modified desc limit 5
This query returns for this website the following pages:
| Date | Page |
|---|---|
| 5/12/23, 2:06 PM | How to create a top menu bar? |
| 5/3/23, 12:30 PM | How to install Dokuwiki ? |
| 4/28/23, 2:26 PM | How to get started with ComboStrap ? |
| 4/26/23, 11:09 AM | How to install Combo ? |
| 4/19/23, 7:08 AM | How to configure the Favicons |
Fragment: The markup to generate
When you generate content, you are looping over the same content over and over. This content part in ComboStrap is called a fragment
- For this howto, we will present our pages:
- in a card
- with a page image as illustration
- with a width of 200px
- with the title, description and path variable
- where the description is cut with the head pipeline function
<card width="250px" align="center" clickable>
<page-image/>
== $title ==
${description | head(100,"...")} [[$path| ]]
</card>
- The output for the actual page is:
Iterator: Iterate over the fragment with the selected pages
The iterator is a component that
- takes the page sql
- and iterates over the fragment
The below example generate a grid that splits the horizontal space in 3 (max-line=3)
<iterator>
<data>select from pages where path like ':howto%' order by date_modified desc limit 5</data>
<grid max-line="3">
<fragment>
<box>
<card width="250px" align="center" clickable>
<page-image/>
== $title ==
${description | head(100,"...")}
[[$path| ]]
</card>
</box>
</fragment>
</grid>
</iterator>
The output is:
Note that in the fragment, we have wrapped the card in a box. Why ? Because:
- the grid splits the horizontal space inside the box
- and in this space, in this box, the card takes a maximum with of 200 px.
Conclusion
In this howto, you learned about:
- the page sql
- the grid layout
That's all, folks.