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:

Date	Page
11/22/24, 11:59 AM	How to get DokuWiki Up and Running?
11/22/24, 11:59 AM	Favicon Installation
11/22/24, 11:59 AM	Top menubar
11/22/24, 11:59 AM	How to store your site in Git?
11/22/24, 11:59 AM	How to get started with ComboStrap ?

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 DokuWiki Up and Running?

Because ComboStrap is built on top of the Dokuwiki Engine, the first step is to have a DokuWiki app up...

Favicon Installation

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

Top menubar

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

How to store your site in Git?

This page will show you how to store your site as combo site in a remote Git repository. We will...

How to get started with ComboStrap ?

This page helps you to get started with ComboStrap

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:

That's all, folks.