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:

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

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



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