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

Undraw Animating

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
12/21/23, 1:24 PM How to create your own theme?
12/20/23, 1:14 PM How to center a link or a button ?
12/10/23, 8:30 PM Third Plugins - ComboStrap Getting Started
12/10/23, 8:18 PM How to install Dokuwiki ?
8/24/23, 9:22 AM How to install Combo ?

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

<card width="250px" align="center" clickable>
   <page-image/>
   <heading 4>$title</heading>
   ${description | head(100,"...")} [[$path| ]]
</card>
  • The output for the actual page is:
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....

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:

Combostrap Default Theme File Explorer
How to create your own theme?

This page shows you how to create your own theme. You can then apply advanced design and logic to your...

Undraw Animating
How to center a link or a button ?

This how to will show you how to center a link. A link can be styled via its properties and because...

Move Plugin Rename
Third Plugins - ComboStrap Getting Started

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

Undraw Stepping Up
How to install Dokuwiki ?

Because ComboStrap is built on top of the Dokuwiki Engine, the first step is to install it. This page...

Dokuwiki Admin Window Default Template
How to install Combo ?

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



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.

Task Runner