How to generate and layout a list of pages with a grid and their image?

About

This howto will show you how to:

• select a list of pages
• and lay out them in a grid.

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:

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
  • that is clickable and centered
  • 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/>
   <heading 4>$title</heading>
   ${description | head(100,"...")} [[$path| ]]
</card>

• The output for the actual page is:

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....

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/>
                   <heading 4>$title</heading>
                   ${description | head(100,"...")}
                   [[$path| ]]
               </card>    
            </box>
       </fragment>
    </grid>
</iterator>

The output is:

How to get ComboWiki Up and Running?

We offer several ways to get ComboWiki up and running. We are sorry but you need to choose the best...

Docker

This step will get you an installation with our image. Download the binary or install a package...

Server

This series of article is intended to help you get a DokuWiki instance installed on a server with a Linux/Windows...

Combo Plugin

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

Third Party Plugins

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

Conclusion

In this howto, you learned about:

• the page sql
• the page image
• the iterator and its fragment
• the grid layout

That's all, folks.