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

Undraw Animating

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

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

<card width="250px" align="center" clickable>
   <page-image/>
   == $title ==
   ${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 ?

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

The output is:

Undraw Stepping Up
How to create a top menu bar?

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

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

Undraw Stepping Up
How to get started with ComboStrap ?

This page helps you to get started with ComboStrap

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

Material Design Choose Icon
How to configure the Favicons

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



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